Media Type trong CSS
CSS Media Typescho phép bạn định dạng nội dung trang web của mình để được trình bày chính xác trên nhiều loại thiết bị khác nhau như màn hình, bản in, … v.v. Để tìm hiểu rõ hơn về Media Type trong CSS, mời bạn đọc cùng eLib.VN tham khảo bài viết dưới đây.
Mục lục nội dung
1. CSS Media Types
CSS Media Types là một trong số các tính năng quan trọng nhất của CSS là bạn có thể chỉ định các quy tắc CSS riêng biệt cho các kiểu thiết bị kết xuất / kiểu kết xuất khác nhau.
Ví dụ, kết xuất để trình bày trên di động sẽ khác trên máy tính.
Kết xuất để in sẽ còn khác nữa.
Sử dụng media type là một trong những cách tốt nhất để xây dựng các trang Web thân thiện với máy in – Chỉ cần gán một quy tắc CSS khác cho loại ‘print‘.
Một số thuộc tính CSS chỉ được thiết kế cho một số phương tiện nhất định. Ví dụ: page-break-after chỉ áp dụng cho phương tiện được phân trang.
Tuy nhiên, có một số thuộc tính có thể được chia sẻ bởi các loại phương tiện khác nhau, nhưng có thể yêu cầu các giá trị khác nhau cho thuộc tính đó.
Ví dụ: Thuộc tính font-size có thể được sử dụng cho cả màn hình (screen) và phương tiện in (print), nhưng có thể với các giá trị khác nhau.
Một tài liệu thường cần một phông chữ lớn hơn trên màn hình máy tính so với giấy để dễ đọc hơn, các phông chữ sans-serif (không chân) cũng được coi là dễ đọc hơn trên màn hình, trong khi phông chữ serif (có chân) phổ biến để in.
Do đó, cần phải xác định tập hợp các quy tắc CSS để áp dụng cho một số loại kiểu kết xuất nhất định.
Dưới đây là ba phương pháp thường được sử dụng để chỉ định các media type
Phương pháp 1: Sử dụng quy tắc @media
Quy tắc @media được sử dụng để xác định các quy tắc CSS khác nhau cho các loại Media khác nhau trong một biểu định kiểu.
Theo sau @media thường là các danh sách các loại media được phân tách bằng dấu phẩy và khối khai báo CSS chứa các quy tắc bạn mong muốn.
Khai báo kiểu trong ví dụ dưới đây yêu cầu trình duyệt hiển thị nội dung body bằng phông chữ Arial 14 pixel trên màn hình (screen), nhưng trong trường hợp in, nó sẽ ở phông chữ Times 12 pt.
Tuy nhiên, giá trị của thuộc tính line-height được đặt thành 1.2 cho cả hai loại media:
@media screen{
body {
color: #32cd32;
font-family: Arial, sans-serif;
font-size: 14px;
}
}
@media print {
body {
color: #ff6347;
font-family: Times, serif;
font-size: 12pt;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}
Ghi chú: Các quy tắc CSS ngoài @media sẽ áp dụng chung. @media thì không hợp lệ trong CSS2.1.
Phương pháp 2: Sử dụng quy tắc @import
Quy tắc @import là một cách khác để thiết lập thông tin kiểu cho một phương tiện đích cụ thể.
Chỉ cần chỉ định các loại media được phân tách bằng dấu phẩy sau url() của các file CSS được import.
@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
background: #f5f5f5;
line-height: 1.2;
}
Kiểu media print trong câu lệnh @import trên sẽ hướng dẫn trình duyệt tải một file CSS bên ngoài (print.css) và chỉ sử dụng các kiểu của nó khi in.
Lưu ý: Tất cả các câu lệnh @import phải xuất hiện ở đầu, trước bất kỳ khai báo CSS nào. Nếu có quy tắc CSS xung đột, quy tắc ở file CSS hiện tại luôn được ưu tiên hơn quy tắc CSS được import.
Phương pháp 3: Sử dụng phần tử <link>
Thuộc tính media trên phần tử <link> được sử dụng để chỉ định loại media đích. Và áp dụng các quy tắc CSS được liên kết.
<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">
Trong ví dụ này, thuộc tính media chỉ thị cho trình duyệt tải một file CSS bên ngoài ‘screen.css‘ và chỉ sử dụng các quy tắc CSS của nó khi hiển thị trên màn hình.
Trong khi ‘print.css’ sẽ được sử dụng cho mục đích in ấn.
Mẹo: Bạn cũng có thể chỉ định nhiều loại media (mỗi loại được phân tách bằng dấu phẩy, ví dụ: media = “screen, print”)
2. Các loại media khác
Bảng sau liệt kê các loại media khác nhau có thể được sử dụng để nhắm mục tiêu các loại thiết bị khác nhau như máy in, thiết bị cầm tay, màn hình máy tính, v.v.
Loại Media | Mô tả |
---|---|
all | Sử dụng cho tất cả các loại media |
aural | Sử dụng cho loại thiết bị tương tác giọng nói và âm thanh |
braille | Sử dụng cho các thiết bị phản hồi xúc giác (chữ nổi) |
embossed | Được sử dụng cho máy in chữ nổi phân trang |
handheld | Được sử dụng cho các thiết bị nhỏ hoặc cầm tay – thường là các thiết bị màn hình nhỏ như điện thoại di động hoặc PDA. |
Sử dụng cho máy in | |
projection | Được sử dụng cho các bài thuyết trình được chiếu, ví dụ máy chiếu. |
screen | Được sử dụng chủ yếu cho màn hình máy tính màu |
tty | Được sử dụng cho trong viễn thông, thiết bị đầu cuối hoặc thiết bị di động có khả năng hiển thị hạn chế. |
tv | Được sử dụng cho các thiết bị loại tivi – màn hình có độ phân giải thấp, màu sắc, khả năng cuộn hạn chế, có sẵn âm thanh |
Trên đây là bài viết của eLib.VN về Media Type trong CSS. Như vậy, qua bài này bạn đã biết cách tùy chỉnh CSS trên các loại thiết bị khác nhau, mục đích khác nhau.
Tham khảo thêm
- doc CSS Animation
- doc CSS Gradient
- doc Transition trong CSS
- doc Tooltip trong CSS
- doc CSS Arrow
- doc CSS Flexbox
- doc 2D Transform trong CSS
- doc 3D Transform trong CSS
- doc User Interface trong CSS
- doc Qui tắc @page trong CSS