Media Type trong CSS

“Hãy hòa nhã với những kẻ dở hơi. Ai biết được ngày sau bạn có thể phải làm việc cho một kẻ như vậy.”

Bill Gates

Microsoft

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.

CSS Media Type là gì?

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

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ả
allSử dụng cho tất cả các loại media
auralSử dụng cho loại thiết bị tương tác giọng nói và âm thanh
brailleSử 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.
printSử 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

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.

Học tiếp: Thuộc tính Opacity trong CSS

Đọc thêm: Pesudo Element trong CSS

Có thể bạn muốn xem

Leave a reply

Please enter your comment!
Please enter your name here