舊文件

此處文件僅供參考,請自行考量時效性與適用程度,其他庫藏文件請參考文件頁面
我們亟需您的協助,進行共筆系統搬移、及文件整理工作,詳情請查閱參與我們

「針對特定網站設立樣式」修訂間的差異

出自 MozTW Wiki

(編寫/翻譯中...)
 
(reverts SPAM created by 202.108.189.41)
 
(未顯示由 4 位使用者於中間所作的 8 次修訂)
行 1: 行 1:
Mozilla Firefox 1.5 有新增了一個 CSS 功能允許使用者為特定網站設立自訂樣式。blah blah
+
Mozilla Firefox 1.5 新增了一個樣式表功能允許使用者為特定網站或網頁設立樣式,指定方式有網域名、完整位址、與位址前段三個。
  
 
== 編輯自訂樣式檔 ==
 
== 編輯自訂樣式檔 ==
  
== CSS 語法 ==
+
# 要編輯自訂樣式檔,先把瀏覽器完全關閉。
 +
# 到[[設定檔詳解|個人設定檔]]的 chrome 子路徑內,用文字編輯器打開 userContent.css(如果沒有此檔,把 userContent-example.css 檔重命名為 userContent.css)。
 +
# 置入樣式規則
  
以下內容取自 http://lists.w3.org/Archives/Public/www-style/2004Aug/0135.html
+
== <code>@-moz-document</code> 語法 ==
  
The syntax that I've implemented is the addition of an @-moz-document
+
指定網站的規則是 <code>@-moz-document</code>。語法為
rule that works like an @media rule and has the syntax (in some
 
reasonably typical notation):
 
  
docrule ::= "@-moz-document" S+ url-list "{" S* ruleset* "}"
+
  @-moz-document 位址指定表 {
 
+
    /* 樣式規則 */
url-list ::= url-item ( "," S* url-item )*
+
  }
 
 
url-item ::= ( "url(" | "url-prefix(" | "domain(" ) URL ")" S*
 
  
where S is from the CSS2 tokenization, ruleset is from the CSS2 grammar,
+
位址指定表是個以逗號 (,) 區格的列表,指定項可以是
and URL is like the production URI in the CSS2 tokenization except
+
* <code>url(<var>URL</var>)</code> : 指定完整位址為 <var>URL</var> 的網頁。注意 <var>URL</var> 前後不用引號 (")。
without the 'url(' and ')'.
+
* <code>url-prefix(<var>URL</var>)</code> : 指定位址以 <var>URL</var> 為開頭的網頁。
 +
* <code>domain(<var>URL</var>)</code> : 指定位址主機是 <var>URL</var> 或以 <var>URL</var> 為開頭的網頁。
  
To define the three functions by example:
+
=== 範例 ===
  
 
   @-moz-document url(http://www.w3.org/),
 
   @-moz-document url(http://www.w3.org/),
行 28: 行 27:
 
   {
 
   {
 
     /* 這裡的 CSS 規則會套用到
 
     /* 這裡的 CSS 規則會套用到
       + "http://www.w3.org/" 頁面
+
       - "http://www.w3.org/" 頁面
       + 任何位址以 "http://www.w3.org/Style/" 為開頭的頁面
+
       - 位址以 "http://www.w3.org/Style/" 為開頭的頁面
       + 任何位址主機是 "moztw.org" 或以 ".moztw.org" 為結尾的頁面
+
       - 位址主機是 "moztw.org" 或以 ".moztw.org" 為結尾的頁面
 
     */
 
     */
 
   }
 
   }
  
== 範例 ==
+
== 分檔指定網頁樣式 ==
[[Category:Firefox]]
+
 
 +
為了樣式表管理方便,使用者可以將網頁樣式規則以個別 .css 檔存到 chrome 路徑內,再嵌入到 userContent.css 檔內。要嵌入外部 .css 檔,用以下語法:
 +
  @import(moztw.css) /* 嵌入 moztw.css 檔 */
 +
注意 <code>@import</code> 必須要放在其它所有樣式規則之前(<code>@-moz-document</code> 無此限制)。
 +
 
 +
== 參考資料 ==
 +
* [https://bugzilla.mozilla.org/show_bug.cgi?id=238099 Bug 238099 - implement at-rule for matching on site/document URL] (L. David Baron)
 +
* [http://lists.w3.org/Archives/Public/www-style/2004Aug/0135.html www-style - per-site user stylesheet rules] (L. David Baron)
 +
<!--
 +
http://lxr.mozilla.org/mozilla/source/layout/style/nsCSSParser.cpp#1182
 +
http://lxr.mozilla.org/mozilla/source/layout/style/nsCSSParser.cpp#1389
 +
-->
 +
 
 +
<div style="display:none;">
 +
[[{{literal2|=Category:Firefox|Firefox=}}|{{literal2|=ㄓ{{PAGENAME}}|Firefox=}}]]
 +
[[{{literal2|=Category:{{{4}}}|{{{4}}}=}}|{{literal2|=ㄓ{{PAGENAME}}|{{{4}}}=}}]]
 +
[[{{literal2|=Category:{{{5}}}|{{{5}}}=}}|{{literal2|=ㄓ{{PAGENAME}}|{{{5}}}=}}]]
 +
[[{{literal2|=Category:{{{6}}}|{{{6}}}=}}|{{literal2|=ㄓ{{PAGENAME}}|{{{6}}}=}}]]
 +
</div>
 +
<div class="page-nav">
 +
<b>‧返回上一頁: </b>[[Mozilla Firefox]]
 +
</div>

於 2006年6月27日 (二) 20:20 的最新修訂

Mozilla Firefox 1.5 新增了一個樣式表功能允許使用者為特定網站或網頁設立樣式,指定方式有網域名、完整位址、與位址前段三個。

編輯自訂樣式檔

  1. 要編輯自訂樣式檔,先把瀏覽器完全關閉。
  2. 個人設定檔的 chrome 子路徑內,用文字編輯器打開 userContent.css(如果沒有此檔,把 userContent-example.css 檔重命名為 userContent.css)。
  3. 置入樣式規則

@-moz-document 語法

指定網站的規則是 @-moz-document。語法為

 @-moz-document 位址指定表 {
   /* 樣式規則 */
 }

位址指定表是個以逗號 (,) 區格的列表,指定項可以是

  • url(URL) : 指定完整位址為 URL 的網頁。注意 URL 前後不用引號 (")。
  • url-prefix(URL) : 指定位址以 URL 為開頭的網頁。
  • domain(URL) : 指定位址主機是 URL 或以 URL 為開頭的網頁。

範例

 @-moz-document url(http://www.w3.org/),
                url-prefix(http://www.w3.org/Style/),
                domain(moztw.org)
 {
   /* 這裡的 CSS 規則會套用到
      - "http://www.w3.org/" 頁面
      - 位址以 "http://www.w3.org/Style/" 為開頭的頁面
      - 位址主機是 "moztw.org" 或以 ".moztw.org" 為結尾的頁面
    */
 }

分檔指定網頁樣式

為了樣式表管理方便,使用者可以將網頁樣式規則以個別 .css 檔存到 chrome 路徑內,再嵌入到 userContent.css 檔內。要嵌入外部 .css 檔,用以下語法:

 @import(moztw.css) /* 嵌入 moztw.css 檔 */

注意 @import 必須要放在其它所有樣式規則之前(@-moz-document 無此限制)。

參考資料

[[Category:{{{4}}}|ㄓ針對特定網站設立樣式]] [[Category:{{{5}}}|ㄓ針對特定網站設立樣式]] [[Category:{{{6}}}|ㄓ針對特定網站設立樣式]]

個人工具