利用CSS的媒體類型滿足訪客需求

2020-03-24 16:30:36

字體：大中小

來源：轉載

供稿：網友

除了需要考慮不同的瀏覽器和Web標準之外，你更需要考慮的是瀏覽站點的設備或者媒體的多樣性。CSS媒體類型提供創建Web應用軟件的功能，它能隨目標媒體的變化而變化。本文將用一些例子檢查這個CSS特點。媒體CSS媒體類型指定了一組CSS屬性。那些聲稱能夠支持媒體類型的用戶代理必須實現所有的屬性，才能將這些屬性應用于那個媒體類型。樣式表使你能夠指定在不同的媒體上如何將文件顯示出來。例如，在屏幕上瀏覽一個頁面，應該與打印頁面，或者是通過語音合成器為視覺障礙用戶播放頁面的時候不同。下面是目前支持的媒體類型的清單：All：可應用于所有的媒體類型
Aural：使用語音合成器
Braille：提供支持盲人觸覺反饋設備
Embossed：可用于盲人打印機
Handheld：支持小型的或者帶狹窄屏幕空間的手持設備
Print：應用于打印機，所以用戶能輕松打印頁面的內容
Projection：可用于項目介紹，像幻燈片一樣
Screen：Web內容最普通的顯示裝置：計算機屏幕
Tty：媒體可使用固定大小的字符柵格，例如teletypes和終端
Tv：應用于像電視這樣的設備，比如WebTV
記住這些媒體類型，你可以開發出分離的樣式表，這樣就能讓使用不同媒體的用戶都能訪問你的站點。特定媒體樣式表Media-specific CSS你可以用各種各樣的方法指定不同媒體類型。首先，你可以通過@import規則將外部樣式表導入來指定媒體類型，下面的這條語句是基于tv設備的，它通過導入指定的樣式表來完成功能。@import url("webtv.css") tv;你可以使用@media規則為Web頁面中某些媒體類型提供顯示規則。下面這條語句針對tv類型設備，使用@media規則將背景顏色設置為白色：@media tv {background: #fff;}Link html' target='_blank'>HTML元素允許你連接到外部的樣式表，這樣你就可以使用媒體屬性來指定連接的目標媒體樣式。下面的這條語句告訴你該如何使用這種方式： LINK rel="stylesheet" type="text/css" media="tv" href="tv.css" 不管你使用哪種方法你都可以指定多個媒體類型，你只需要用逗號將各個媒體類型分開即可。例如，用下面這條語句，就先前的HTML示例而言，既可以重新寫到tv類型的媒體中，也可以寫到projection類型媒體中。 LINK rel="stylesheet" type="text/css" media="tv, projection" href="tv.css" 應用因為支持不同的媒體類型，所以你能將各種設備或者可獲得的媒體類型內容格式化。一個很好的例子就是打印，打印輸出的時候，像菜單和工具條這樣的項目都被忽略了（經常使用顯示：none）。TechRepublic的Shawn Morton在先前的文章中提供了一個非常好的關于創建友好打印頁面的評論。下面的CSS是一個針對不同媒體類型格式化內容的簡單例子。在規則的屏幕上將背景顏色設置成藍色，在打印機或者手持輸出設備上，將背景顏色設置成白色。同樣，在打印機和更小的手持設備上，將字體大小設置成更容易讀的12 point。在所有的媒體類型上，字體類型都設置成相同的類型。 style type="text/css" @media all {font-family: sans-serif;}@media handheld {body {border: none;padding-bottom: 5px;font-size: 8pt;background: white;}h1, h2 {font-size: 10pt;;} }@media screen {body {background: blue;font-size: 10pt;} } @media print {body {width: auto;margin: 0 5%;padding: 0;font-size: 12pt;} } /style 在現實世界的應用軟件中，每一種媒體類型樣式表的大小都比這個簡單例子的大，所以將每種媒體類型放置在不同的文件中，可以使用Link元素進行連接，這樣就能減少代碼的下載量并節省帶寬。對于任何Web標準來說，一個最重要的問題就是它的支持問題。支持CSS媒體類型是CSS2標準的一部分，但是瀏覽器對它的支持并不太快。所有媒體類型的值，在屏幕和打印機都能很好的支持，但是保留類型卻只被有限的瀏覽器所支持。你應該充分地進行測試，以保證結果能與目標平臺上的瀏覽器所匹配。現在，手持媒體類型已經被一些設備和軟件所支持，所以你應該測試目標設備是否支持媒體類型。Opera瀏覽器支持projection媒體類型，但是在Opera外的支持卻是有限的。支持像braille，tv，tty，embossed和aural這樣的其它媒體類型幾乎不存在。Emacspeak瀏覽器使用了aural媒體類型。了解你的觀眾CSS2規范包括媒體類型特點，在這種規范中允許開發人員通過樣式表對某個媒體類型內容進行裁剪。這個特點已經得倒了打印和屏幕類型的完全支持，然而對于其它類型的支持就有點不協調了，有時候甚至不能支持。與此同時，CSS3標準將向提高媒體類型特點的方向繼續前進。在你的Web應用軟件中是否已經支持媒體類型了呢？你可以通過在Web開發社區中發表帖子和文章，來與大家一起分享你關于CSS和媒體類型的想法和經驗
本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS布局之布局模型

下一篇：如何將CSS加諸于網頁