Computer: Makeuper: CSS: Step07: Difference between revisions

From TestingMediawiki
Jump to navigation Jump to search
← Older edit
m Reverted edits by 125.103.222.73 (Talk); changed back to last version by Wini
 
(16 intermediate revisions by 3 users not shown)
Line 3: Line 3:
== 各瀏覽器對 CSS 的支援度 ==
== 各瀏覽器對 CSS 的支援度 ==


#IE 6 families: CSS 1 全部、CSS 2 非常少
# IE 6 families: CSS 1 全部、CSS 2 非常少
#IE 7 families: 還沒出不清楚
# IE 7 families: 還沒出不清楚
#Gecko families(Mozilla, Firefox...): 隨時支援絕大多數新出的開放規格及標準
# Gecko families(Mozilla, Firefox...): 隨時支援絕大多數新出的開放規格及標準
#Opera: 隨時支援絕大多數新出的開放規格及標準
# Opera: 隨時支援絕大多數新出的開放規格及標準
#lynx: 不明
# lynx: 不支援
#links2: 不支援
# links/links2: 不支援
#其它純文字瀏覽器: 不明
# 其它純文字瀏覽器: 不支援


== 如何解決不同瀏覽器的支援度不同的問題 ==
== 如何解決不同瀏覽器的支援度不同的問題 ==


#使用子類別的方式來處理
# 使用詳細指定子類別關係的方式來處理（推薦使用）
##只能用在外部的 CSS 檔案及 HTML 文件 head 處的 style 宣告而已。
## 只能用在外部的 CSS 檔案及 HTML 文件 head 處的 style 宣告而已。
##寫法 ： <p style="color:red;">* &gt; TAG { property:value; } ;</p>
## 寫法 ： <br /> '''<nowiki>* &gt; TAG { attribute : value ; }</nowiki>'''
##解說<p>「*」是萬用字元，可用來代表任何的 HTML 標籤。</p><p>「&gt;」就是子類別的表示法， IE 6 看不懂所以使用這個時，以下的樣式指定就會被它所忽略掉。</p>
## 解說
#使用 Javascript 來辯識瀏覽器的版本
### 「'''*'''」是萬用字元，可用來代表任何的 HTML 標籤。
#使用內嵌 IE7 Favelet 的 js 檔案來處理。
### 「'''&gt;'''」就是詳細指定子類別關係的表示法， IE 6 看不懂所以使用這個時，該段樣式指定就會被它所忽略掉。
##http://dean.edwards.name/IE7/favelet.html
# 使用 Javascript 來辯識瀏覽器的版本（不建議）
##在文件中放入以下 JavaScript 語法以使 IE 使用該檔，而其它瀏覽器不使用。（檔案位置請自行調整）<br />&lt;!--[if it IE7]&gt;<br />&lt;script type="text/javascript" src="ie7.js"&gt;&lt;/script&gt;<br />&lt;[endif]--&gt;<br />
# 使用內嵌 IE7 Favelet 的 js 檔案來處理。（不建議）
## http://dean.edwards.name/IE7/favelet.html
## 在文件中放入以下 JavaScript 語法以使 IE 使用該檔，而其它瀏覽器不使用。（檔案位置請自行調整）<br />&lt;!--[if it IE7]&gt;<br />&lt;script type="text/javascript" src="ie7.js"&gt;&lt;/script&gt;<br />&lt;[endif]--&gt;<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 的瀏覽器中出現的元素。
## 最後要注意一點，如果你根本不打算管使用純文字瀏覽器的人怎樣的話，那基本上是不需要費這些工夫的，把時間拿去做更多作品比較重要。

Latest revision as of 15:30, 14 July 2007

回到 Computer ‧ 回到 Computer: Makeuper
回到 Computer: Makeuper: CSS

各瀏覽器對 CSS 的支援度

  1. IE 6 families: CSS 1 全部、CSS 2 非常少
  2. IE 7 families: 還沒出不清楚
  3. Gecko families(Mozilla, Firefox...): 隨時支援絕大多數新出的開放規格及標準
  4. Opera: 隨時支援絕大多數新出的開放規格及標準
  5. lynx: 不支援
  6. links/links2: 不支援
  7. 其它純文字瀏覽器: 不支援

如何解決不同瀏覽器的支援度不同的問題

  1. 使用詳細指定子類別關係的方式來處理（推薦使用）
    1. 只能用在外部的 CSS 檔案及 HTML 文件 head 處的 style 宣告而已。
    2. 寫法 ：
      * > TAG { attribute : value ; }
    3. 解說
      1. 「*」是萬用字元，可用來代表任何的 HTML 標籤。
      2. 「>」就是詳細指定子類別關係的表示法， IE 6 看不懂所以使用這個時，該段樣式指定就會被它所忽略掉。
  2. 使用 Javascript 來辯識瀏覽器的版本（不建議）
  3. 使用內嵌 IE7 Favelet 的 js 檔案來處理。（不建議）
    1. http://dean.edwards.name/IE7/favelet.html
    2. 在文件中放入以下 JavaScript 語法以使 IE 使用該檔，而其它瀏覽器不使用。（檔案位置請自行調整）
      <!--[if it IE7]>
      <script type="text/javascript" src="ie7.js"></script>
      <[endif]-->

如何寫一個純文字瀏覽器也能正常觀看的網頁

  1. 使用 lynx viewer 你可以看看你的網頁用 lynx 的顯示結果
  2. 什麼人要用到純文字瀏覽器？
    1. 講究效率的人
    2. 只關心你網頁的文字資料而不想看你的網頁多美觀的人
    3. 使用窄頻網路、撥接之類的連線方式的人
    4. 駭客
    5. 視障人士
    6. 關於其它資料請看看此網站
  3. 純文字瀏覽器要假設其不支援以下數種功能
    1. CSS 樣式表
    2. JavaScript
    3. Java
    4. 圖片、音樂等多媒體格式檔案
  4. 在 Firefox 1.0 中可以這麼做來模擬純文字瀏覽器
    1. 關閉 css : 在「檢視 → 樣式表」中選「不使用樣式表」
    2. 關閉 JavaScript : 在「工具 → 選項 → 網頁」中把 javascript 關閉掉
    3. 關閉 Java : 在「工具 → 選項 → 網頁」中把 Java 關閉掉
    4. 關閉圖片 : 在「工具 → 選項 → 網頁」中把顯示圖片關閉掉
  5. Firefox 可以裝 Web Developer 來方便模擬
    1. 關閉 css : Disable - Disable Styles
    2. 關閉 JavaScript : Disable - Disable JavaScript
    3. 關閉 Java : Disable - Disable Java
    4. 關閉圖片 : Disable - Disable Images
  6. 其它補充：如果你的網頁在關閉以上功能後會慘不忍睹的話，最好重新編排一下網頁的結構。
    1. 網頁前端部分盡量不要放入跳躍至不同頁面用的導覽用連結（也就是導覽列），因為這種東西通常又多又長。網頁前端，亦即 HTML 源碼中，較為前面的那些資料，應該是要用來放這個頁面的概要而不是很長很～長的導覽列的。
    2. 盡可能地不要用到表格 table ，你可以參考這個網站來丟掉你的表格，這代表說你甚至可以不必用到框架頁！
    3. 你可以利用 CSS 來改變 HTML 文件中各元素 element 在圖形使用者介面瀏覽器上所表示的位置，這代表你絕對可以在兼顧到使用純文字瀏覽器使用者的情況下，寫出你所想要的網頁排版來。
    4. 多多利用 h 標題文字的標籤來分出大段落來
    5. 多多利用 p 段落的標籤來分出小段落來
    6. 利用 | 將同一列的超連結分隔開來
    7. 利用 hr 來分隔開不同主題區域
    8. 利用純文字瀏覽器不支援 CSS 這點，在標籤中加入 style="display:none;" 來隱藏不想在支援 CSS 的瀏覽器中出現的元素。
    9. 最後要注意一點，如果你根本不打算管使用純文字瀏覽器的人怎樣的話，那基本上是不需要費這些工夫的，把時間拿去做更多作品比較重要。
Retrieved from "https://www.andcycle.idv.tw/mediawiki/index.php?title=Computer:_Makeuper:_CSS:_Step07&oldid=12581"