Media Type trong CSS

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ử

Thuộc tính media trên phần tử  đượ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.

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.
print	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.