----
2.8 Một số kĩ thuật CSS khác
Phần này sẽ giới thiệu thêm một số kĩ thuật phổ biến, khi
làm việc với CSS. Ví dụ: reset CSS mặc định của trình duyệt, sử dụng hình ảnh
thay thế cho chữ, giảm lượng request về server bằng kĩ thuật sprites, kĩ thuật
định dạng form, table, kĩ thuật responsive.
2.8.1
Reset CSS mặc định của trình duyệt
Như đã biết, mỗi trình duyệt luôn có mã CSS riêng, dùng để định
dạng các phần tử HTML, gọi là user agent style sheets. Ví dụ, với phần tử h1, mặc dù lập trình viên không thiết lập
CSS, thì trình duyệt vẫn định dạng h1
với phông chữ lớn, đậm, và khoảng cách dòng lớn hơn bình thường. Tuy nhiên, tùy
theo mỗi trình duyệt, h1 sẽ có độ lớn,
độ đậm và khoảng cách dòng khác nhau, kết quả là chúng ta sẽ có một giao diện
không ổn định. Ngoài ra, ngay cả khi người lập trình có thiết lập CSS, thì các
phần tử HTML vẫn kế thừa một số thuộc tính từ CSS mặc định, điều này gây ra các
kết quả ngoài dự tính.
Vì các lý do trên, các lập trình viên thường phải thực hiện
reset CSS của trình duyệt, mục đích là để ghi đè các thiết lập CSS mặc định, để
mọi thứ trở về với trạng thái ban đầu. Khi đó, người lập trình phải thiết lập một
cách tường minh (explicitly) các thuộc tính của phần tử, như: font, text,
margin, padding. Đổi lại, người lập trình sẽ đảm bảo luôn kiểm soát được các tác
động của CSS lên giao diện.
Bộ reset CSS được sử dụng phổ biến hiện nay là của Eric Meyer. Tham khảo mã nguồn tại đây https://meyerweb.com/eric/tools/css/reset/.
Đây là nội dung bộ
reset CSS của Eric Meyer,
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5,
h6, p, blockquote, pre,
a, abbr, acronym,
address, big, cite, code,
del, dfn, em, img,
ins, kbd, q, s, samp,
small, strike, strong,
sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul,
li,
fieldset, form, label,
legend,
table, caption, tbody,
tfoot, thead, tr, th, td,
article, aside,
canvas, details, embed,
figure, figcaption,
footer, header, hgroup,
menu, nav, output,
ruby, section, summary,
time, mark, audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role
reset for older browsers */
article, aside,
details, figcaption, figure,
footer, header,
hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Để sử dụng bộ
reset CSS, chép đoạn mã trên và đặt ở trên đầu tập tin CSS của trang web. Có thể
giữ nguyên mã nguồn hoặc tùy chỉnh theo yêu cầu của từng dự án.
Việc reset CSS
không phải là bắt buộc, vì nếu muốn dựa vào các định dạng CSS có sẵn của trình
duyệt, để không phải mất công viết lại từ đầu, thì không nhất thiết phải reset
CSS. Chỉ khi nào muốn tất cả mã CSS đều được kiểm soát thì nên reset CSS.
2.8.2
Sử dụng hình ảnh thay thế chữ
Trước đây, khi phông chữ chưa đa dạng, việc sử dụng các
phông được thiết kế riêng, lưu thành hình ảnh, rồi chèn vào trang web được dùng
khá phổ biến. Hiện tại, đã có rất nhiều các kiểu phông chữ cho tiêu đề và các
kiểu phông chữ đặc biệt, nên không cần phải dùng hình ảnh để thay thế. Tuy
nhiên, để đề phòng trường hợp phông chữ không làm việc hoặc vì ý thích thì việc
sử dụng hình ảnh vẫn là giải pháp được lựa chọn.
Khi sử dụng hình ảnh để thay thế cho chữ, nếu bỏ luôn phần
chữ đi thì sẽ là một giải pháp không hoàn hảo. Vì khi không có nội dung văn bản,
sẽ ảnh hưởng nhiều đến kết quả của bộ máy tìm kiếm, chức năng đọc tự động
(screen reader) và các chương trình hỗ trợ khác.
Vậy làm sao để vừa dùng hình ảnh để thay thế cho văn bản, vừa
giữ lại được nội dung văn bản. Giải pháp là sử dụng hình ảnh làm nền
(background) cho nội dung văn bản, sau đó kéo văn bản ra khỏi vùng hiển thị ban
đầu, mục đích là để văn bản không xuất hiện trên giao diện.
Ví dụ, sử dụng hình ảnh logo.jpg
để thay cho chữ “Janware”,
[HTML]
<h1 id="logo">Janware</h1>
[CSS]
h1#logo {
width: 383px;
height: 74px;
text-indent:
100%;
background:
url(logo.jpg) no-repeat;
white-space:
nowrap;
overflow:
hidden;
outline: 1px
dashed red; /* chỉ để kiểm tra kết quả giao diện */
}
Giải thích đoạn mã CSS ở trên, kiểu hiển thị mặc định của h1 là block, vì vậy có thể thiết lập chiều rộng và chiều cao của h1 đúng bằng
kích thước của ảnh thay thế (logo.jpg).
Thuộc tính text-indent (lùi đầu hàng)
được thiết lập đúng bằng chiều rộng của phần tử h1, mục đích để đẩy chữ “Janware” sang hết phía phải của h1. Thuộc tính white-space được thiết lập là nowrap
để đảm bảo chắc chắn văn bản không xuống hàng, do vậy không thể hiển thị trong
vùng h1. Để ẩn các nội dung bị tràn
ra khỏi h1, thiết lập overflow: hidden.
Xem hình minh họa,
Có thể thay thế luật CSS text-indent:
100% bằng text-indent: -9999px
(kéo văn bản về phía trái, nằm ngoài màn hình). Hạn chế của luật text-indent: -9999px là trình duyệt phải
vẽ vùng hiển thị rất lớn, mặc dù vùng này không xuất hiện trên giao diện, làm
giảm tốc độ hiển thị trang web.
Các kĩ thuật thay thế chữ bằng hình ảnh cũng có một hạn chế
là số request gửi về server để lấy ảnh, thời gian tải ảnh về máy mất nhiều thời
gian.
2.8.3
Kĩ thuật sprites
Nghĩa thông thường của sprite là tiên nữ. Trong đồ họa máy
tính, sprite là một hình ảnh hai chiều hoặc hình ảnh động được tích hợp vào một
cảnh lớn hơn.
Trong kĩ thuật CSS, sprites là một cách để cải thiện hiệu suất
tải và hiển thị trang web, bằng cách kết hợp nhiều hình ảnh nhỏ hoặc biểu tượng
thành một hình ảnh lớn hơn gọi là dải sprite hoặc bộ tile, và sử dụng CSS để chọn
tường ảnh nhỏ/biểu tượng, hiển thị trên trang web. Mỗi ảnh nhỏ/biểu tượng gọi
là một sprite (một cô tiên).
Điểm chính của kĩ thuật này là sử dụng thuộc tính background-position để định vị và lựa chọn
ảnh nhỏ/biểu tượng (sprite) từ ảnh lớn để hiển thị ra giao diện.
Để dễ hiểu, làm ví dụ sau,
Xem hình minh họa giao diện sẽ thực hiện,
Đầu tiên cần có một tập tin hình ảnh chứa các ảnh nhỏ/biểu
tượng, đây chính là một sprites (ví dụ social.png).
Mỗi ảnh nhỏ/biểu tượng có kích thước bằng nhau (ví dụ 30x20px), cách nhau một
khoảng trắng (2px).
[HTML]
<ul>
<li><a href="" class="hide
twitter">Twitter</a></li>
<li><a href="" class="hide
fb">Facebook</a></li>
<li><a href=""
class="hide gplus">Google+</a></li>
<li><a href="" class="hide
linkedin">LinkedIn</a></li>
<li><a href="" class="hide
blip">BlipTV</a></li>
<li><a href="" class="hide
lanyrd">Lanyrd</a></li>
<li><a href="" class="hide
slides">Slideshare</a></li>
<li><a href="" class="hide
sched">Schedule</a></li>
<li><a href="" class="hide
attendees">Attendee List</a></li>
</ul>
[CSS]
.hide {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
li a {
display: block;
width: 29px;
height: 18px;
background-image: url(social.png);
}
li a.twitter { background-position: 0 0;}
li a.fb { background-position: 0 -20px;}
li a.gplus { background-position: 0 -40px;}
li a.linkedin { background-position: 0 -60px; }
li a.blip { background-position: 0 -80px; }
li a.lanyrd { background-position: 0 -100px; }
li a.slides { background-position: 0 -120px; }
li a.sched { background-position: 0 -140px; }
li a.attendees { background-position: 0 -160px; }
Giải thích đoạn mã phía trên, ở phần mã HTML, mỗi li gồm class là hide được dùng để thay thế chữ bằng hình ảnh (đã tìm hiểu ở phần
trước), và twitter, fb, gplus,…được sử
dụng để định vị ảnh nhỏ/biểu tượng tương ứng trong sprites (social.png).
Trong phần mã CSS, luật CSS đầu tiên là thực hiện thay thế chữ
bằng hình ảnh (.hide {}). Luật CSS tiếp
theo, thực hiện thiết lập kích thước và chèn ảnh nền cho các phần tử a (li
a {}). Các luật CSS còn lại là căn lại vị trí cho hình nền để lấy đúng phần
ảnh nhỏ/biểu tượng tương ứng, thực tế là với mỗi phần tử a, sẽ cuộn hình nền lên phía trên một khoảng. Ví dụ, phần tử đầu
tiên sẽ cho hình nền nằm tại vị trí (0, 0), là nằm ở góc trên, bên trái của phần
tử; phần tử tiếp theo sẽ cho hình nền nằm tại vị trí (0, -20px), là hình nền sẽ
căn trái theo phần tử, tuy nhiên bị kéo lên phía trên 20px so với phần tử…v.v.
Ở ví dụ trên đã sử dụng sprites gồm các ảnh nhỏ/biểu tượng
cùng kích thước. Tuy nhiên, trong thực tế, có thể sử dụng sprites với các ảnh
nhỏ/biểu tượng có kích thước bất kì, khi sử dụng, chỉ việc điều chỉnh giá trị của
background-position cho phù hợp.
Có rất nhiều các công cụ giúp tạo sprites tự động, vào
google, gõ từ khóa “sprite tool” hoặc “CSS sprite generator” để tìm hiểu và học
thêm về các công cụ này.
-----------
Cập nhật [15/8/2018]
-----------
Xem thêm: Học làm web (56) - CSS căn bản (32)