Học làm web (55) - CSS căn bản (31)

Tiếp theo của: Học làm web (54) - CSS căn bản (30)
----

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: Tổng hợp các bài viết về Học làm web
Xem thêm: Học làm web (56) - CSS căn bản (32)