----
CSS dựa trên môi trường
hiển thị
CSS dựa trên môi trường hiển thị (media queries) cho phép lập
trình viên tạo ra mã CSS cho từng loại môi trường (hay thiết bị) hiển thị khác
nhau. Các môi trường hiển thị gồm: in (print), màn hình máy tính (screen), thiết
bị cầm tay (handheld), thiết bị liên quan đến hệ thống chữ nổi (braille), màn
chiếu (screen projection), thiết bị xử lý văn bản qua đường điện thoại (tty),
Ti vi (TV). Sử dụng từ khóa all nếu
muốn áp dụng định dạng CSS cho toàn bộ các loại môi trường. Media queries cũng
xét đến các đặc trưng khác như: độ rộng của thiết bị (device-width), hướng
(ngang, dọc) của màn hình (orientation) và độ phân giải (resolution).
Đây là danh sách các thuộc tính có thể kiểm tra trong chế độ
media queries: width, height,
device-width, device-height, orientation, aspect-ratio, device-aspect-ratio,
color, color-index, monochrome, resolution, scan, grid. Có thể kiểm tra giá
trị nhỏ nhất hoặc lớn nhất của hầu hết các thuộc tính bằng tiếp đầu ngữ min- hoặc max- tương ứng. Ví dụ: min-width:
480px dùng để kiểm tra kích thước màn hình có lớn hơn hoặc bằng 480px hay
không? Như vậy, màn hình kích thước 768px sẽ thỏa điều kiện này và được áp dụng
CSS, trong khi màn hình kích thước 320px sẽ không thỏa điều kiện.
Đoạn mã của media queries được viết trong tập tin CSS như
các luật CSS thông thường khác. Ví dụ,
@media screen and
(min-width: 480px;) {
/* các luật CSS được đặt
tại đây */
}
Đoạn mã trên sẽ kiểm tra xem môi trường hiển thị có phải là
screen không và kích thước có phải từ 480px trở lên hay không?
Cú pháp của câu lệnh truy vấn môi trường bắt đầu bằng
@media, tiếp theo là “tên thiết bị”, sau đó là các đặc trưng và các giá trị cần
kiểm tra được đặt trong ngoặc đơn (), cuối cùng, các luật CSS được đặt trong dấu
ngoặc nhọn {}.
Từ khóa “and” là toán tử logic, được dùng để nối các điều kiện
kiểm tra. Như ở ví dụ trên, câu lệnh truy vấn sẽ trả về kết quả là “true” nếu
môi trường hiển thị là screen và có độ rộng tử 480px trở lên.
Ví dụ câu lệnh truy vấn sau kiểm tra cùng lúc ba điều kiện:
là screen, độ rộng từ 700px trở lên, và màn hình xoay ngang (landscape).
@media screen and
(min-width: 700px;) and (orientation: landscape) {
/* các luật CSS được đặt
tại đây */
}
Đặt lệnh truy vấn
trong thẻ link
Lệnh @media ngoài việc đặt trong một tập tin CSS, còn có thể
đặt trong thẻ link của tài liệu HTML. Mục đích là để tải tập tin CSS nếu thỏa
điều kiện cho trước.
Ví dụ, đoạn mã dưới đây sẽ tải tập tin định dạng cơ bản trước
(styles.css), nếu màn hình có độ rộng từ 780px trở lên thì tải thêm tập tin định
dạng mở rộng (2column-styles.css).
<head>
<link rel="stylesheet"
href="styles.css">
<link rel="stylesheet"
href="2column-styles.css" media="screen and
(min-width:780px)">
</head>
Lưu ý: Việc đặt lệnh truy vấn trong thể link cũng có nhược
điểm là cần thêm một request về server, do vậy có thể ảnh hưởng đến tốc độ hiển
thị trang web.
Mobile First
Trong kĩ thuật responsive, phương pháp được sử dụng nhiều là
ưu tiên thiết bị di động trước (mobile first). Nghĩa là, thực hiện định dạng
cho thiết bị nhỏ nhất, đơn giản nhất trước, sau đó sử dụng media queries để thiết
lập riêng cho các trường hợp còn lại (trường hợp có màn hình lớn hơn, có thêm
nhiều đặc trưng hơn).
Theo phương pháp mobile-first, người ta thường sử dụng từ
khóa min- trong các câu truy vấn kích
thước màn hình, nghĩa là nếu thiết bị có độ rộng ít nhất là xyz hoặc lớn hơn
thì sẽ áp dụng thêm những CSS tương ứng. Điều này đảm bảo tính kế thừa của định
dạng CSS, các định dạng sau sẽ dựa trên các định dạng trước đó.
Cần lưu ý đến thứ tự ưu tiên khi thực thi mã CSS để đặt các tập
tin CSS cho phù hợp, cụ thể, các tập tin định dạng cơ bản sẽ áp dụng trước, sau
đó đến CSS cho màn hình nhỏ và cuối cùng là CSS cho màn hình lớn.
Lab 2.8 (tt) (exercise 18-3, p.450,
[3])
Một số kích thước màn
hình
Một câu hỏi được đặt ra là: với kích thước màn hình bao
nhiêu thì nên thiết lập một định dạng CSS riêng?
Như đã biết, các thiết bị duyệt web có kích thước rất đa dạng,
có thể xoay đứng hoặc xoay ngang. Do vậy, làm định dạng CSS cho từng trường hợp
như vậy là không thể. Trong thực tế, thường tạo ba thiết kế CSS cho ba loại màn
hình chính (mobile phone, tablet và desktop). Hình sau liệt kê các kích thước của
mỗi loại thiết bị, dựa vào thông tin này để quyết định chọn kích thước cho mỗi media
queries.
2.8.7 Câu hỏi & bài tập
1. Mục đích của reset CSS là gì?
a. Ghi đè các định dạng mặc định của trình duyệt
b. Để lập trình viên luôn kiểm soát được định dạng CSS của họ
c. Ngăn ngừa phần tử kế thừa các định dạng CSS không mong muốn
d. Tất cả đáp án trên
2. Mục đích của CSS sprites là gì?
a. Tăng tốc độ tải và hiển thị trang web
b. Gom nhiều ảnh nhỏ vào một ảnh lớn để giảm kích thước tập
tin
c. Giảm số lượng HTTP request về server
d. a và c
e. Tất cả đáp án trên
3. Mục đích của kĩ thuật “dùng hình ảnh thay thế chữ” là gì?
a. Để thụt đầu hàng cho các văn bản có kích thước lớn
b. Sử dụng đối tượng đồ họa thay thế cho văn bản
c. Gỡ bỏ nội dung văn bản, thay vào đó là một hình ảnh
d. Giúp duy trì nội dung và ngữ nghĩa của tài liệu
e. b và d
f. Tất cả đáp án trên
4. Ứng với mỗi câu lệnh truy vấn (cột trái), chọn ngữ nghĩa
tương ứng (cột phải)
a. @media screen and (max-width: 800px) { }
|
Áp dụng định dạng này khi in trên trang giấy xoay đứng
|
b. @media screen and (min-device-width: 800px) { }
|
Áp dụng định dạng này cho tất cả thiết bị hiển thị đen-trắng
|
c. @media print and (orientation: portrait) { }
|
Áp dụng tập tin CSS mở rộng này khi màn hình hiển
thị có kích thước 800px trở lên
|
d. <link rel="stylesheet"
href="special.css"
media="screen and (min-width: 800px)">
|
Áp dụng định dạng này khi thiết bị hiển thị có độ rộng
nhỏ hơn 800px
|
e. @media all and (monochrome) { }
|
Áp dụng định dạng này khi thiết bị hiển thị có độ rộng tử
800px trở lên
|
5. Ứng với mỗi đoạn mã, hãy chọn hình kết quả tương ứng.
(1.) table { border-collapse: collapse;}
td { border: 2px black solid; }
(2.) table { border-collapse: separate; }
td { border: 2px black solid; }
(3.) table {
border-collapse: separate;
border-spacing: 2px 12px; }
td { border: 2px black solid; }
(4.) table {
border-collapse: separate;
border-spacing: 5px;
border: 2px black solid; }
td { background-color: #99f; }
(5.) table {
border-collapse: separate;
border-spacing: 5px; }
td {
background-color: #99f;
border: 2px black solid; }
3 Tài liệu tham khảo chính
[1] Jon Duckett, HTML&CSS
design and build websites, John Wiley & Son, 2011
[2] Tutorials Point, HTML
hypertext markup language, ebook, 2015
[3] Jennifer Niederst Robbins, Learning
web design, O’Reilly, 2012
[4] W3schools, https://www.w3schools.com/
Cập nhật [19/8/2018]
-----------
Xem thêm: Học làm web (58_1) - Mini project (hosting, domain, git, html, css)