Media Type trong CSS

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”)

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.

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.