|
|
| Line 15: |
Line 15: |
| # 使用詳細指定子類別關係的方式來處理（推薦使用） | | # 使用詳細指定子類別關係的方式來處理（推薦使用） |
| ## 只能用在外部的 CSS 檔案及 HTML 文件 head 處的 style 宣告而已。 | | ## 只能用在外部的 CSS 檔案及 HTML 文件 head 處的 style 宣告而已。 |
| ## 寫法 ： <br /> '''<nowiki>* > TAG { attribute : value ; }</nowiki>''' | | ## 寫法 ： <br /> '''<nowiki>* |
| ## 解說
| |
| ### 「'''*'''」是萬用字元，可用來代表任何的 HTML 標籤。
| |
| ### 「'''>'''」就是詳細指定子類別關係的表示法， IE 6 看不懂所以使用這個時，該段樣式指定就會被它所忽略掉。
| |
| # 使用 Javascript 來辯識瀏覽器的版本（不建議）
| |
| # 使用內嵌 IE7 Favelet 的 js 檔案來處理。（不建議）
| |
| ## http://dean.edwards.name/IE7/favelet.html
| |
| ## 在文件中放入以下 JavaScript 語法以使 IE 使用該檔，而其它瀏覽器不使用。（檔案位置請自行調整）<br /><!--[if it IE7]><br /><script type="text/javascript" src="ie7.js"></script><br /><[endif]--><br />
| |
| | |
| == 如何寫一個純文字瀏覽器也能正常觀看的網頁 ==
| |
| | |
| # 使用 lynx viewer 你可以看看你的網頁用 lynx 的顯示結果
| |
| #* http://www.delorie.com/web/lynxview.html
| |
| # 什麼人要用到純文字瀏覽器？
| |
| ## 講究效率的人
| |
| ## 只關心你網頁的文字資料而不想看你的網頁多美觀的人
| |
| ## 使用窄頻網路、撥接之類的連線方式的人
| |
| ## 駭客
| |
| ## 視障人士
| |
| ## 關於其它資料請[http://dia.z6i.org/ 看看此網站]
| |
| # 純文字瀏覽器要假設其不支援以下數種功能
| |
| ## CSS 樣式表
| |
| ## JavaScript
| |
| ## Java
| |
| ## 圖片、音樂等多媒體格式檔案
| |
| # 在 Firefox 1.0 中可以這麼做來模擬純文字瀏覽器
| |
| ## 關閉 css : 在「檢視 → 樣式表」中選「不使用樣式表」
| |
| ## 關閉 JavaScript : 在「工具 → 選項 → 網頁」中把 javascript 關閉掉
| |
| ## 關閉 Java : 在「工具 → 選項 → 網頁」中把 Java 關閉掉
| |
| ## 關閉圖片 : 在「工具 → 選項 → 網頁」中把顯示圖片關閉掉
| |
| # Firefox 可以裝 Web Developer 來方便模擬
| |
| #* 相關使用法請見 [http://forum.moztw.org/viewtopic.php?t=5460 moztw.org]
| |
| ## 關閉 css : Disable - Disable Styles
| |
| ## 關閉 JavaScript : Disable - Disable JavaScript
| |
| ## 關閉 Java : Disable - Disable Java
| |
| ## 關閉圖片 : Disable - Disable Images
| |
| # 其它補充：如果你的網頁在關閉以上功能後會慘不忍睹的話，最好重新編排一下網頁的結構。
| |
| ## 網頁前端部分盡量不要放入跳躍至不同頁面用的導覽用連結（也就是導覽列），因為這種東西通常又多又長。網頁前端，亦即 HTML 源碼中，較為前面的那些資料，應該是要用來放這個頁面的概要而不是很長很～長的導覽列的。
| |
| ## 盡可能地不要用到表格 table ，你可以參考[http://ccca.nctu.edu.tw/~hlb/trans/practicalcss/ 這個網站]來丟掉你的表格，這代表說你甚至可以不必用到框架頁！
| |
| ## 你可以利用 CSS 來改變 HTML 文件中各元素 element 在圖形使用者介面瀏覽器上所表示的位置，這代表你絕對可以在兼顧到使用純文字瀏覽器使用者的情況下，寫出你所想要的網頁排版來。
| |
| ## 多多利用 h 標題文字的標籤來分出大段落來
| |
| ## 多多利用 p 段落的標籤來分出小段落來
| |
| ## 利用 | 將同一列的超連結分隔開來
| |
| ## 利用 hr 來分隔開不同主題區域
| |
| ## 利用純文字瀏覽器不支援 CSS 這點，在標籤中加入 style="display:none;" 來隱藏不想在支援 CSS 的瀏覽器中出現的元素。
| |
| ## 最後要注意一點，如果你根本不打算管使用純文字瀏覽器的人怎樣的話，那基本上是不需要費這些工夫的，把時間拿去做更多作品比較重要。
| |
回到 Computer ‧ 回到 Computer: Makeuper
回到 Computer: Makeuper: CSS
各瀏覽器對 CSS 的支援度
- IE 6 families: CSS 1 全部、CSS 2 非常少
- IE 7 families: 還沒出不清楚
- Gecko families(Mozilla, Firefox...): 隨時支援絕大多數新出的開放規格及標準
- Opera: 隨時支援絕大多數新出的開放規格及標準
- lynx: 不支援
- links/links2: 不支援
- 其它純文字瀏覽器: 不支援
如何解決不同瀏覽器的支援度不同的問題
- 使用詳細指定子類別關係的方式來處理（推薦使用）
- 只能用在外部的 CSS 檔案及 HTML 文件 head 處的 style 宣告而已。
- 寫法 ：
<nowiki>*