[IE除外] Counter屬性

IE對於樣式的支援性實在有待加強,這篇文章要介紹一個相當好用但是IE卻沒有的屬性,那就是Counter屬性。

很多時候,我們在寫文章的時候會使用到許多的段落,尤其像是技術文章或是教學文件那種東西,一大堆的1.1或是1.2.1…常常會把人搞到頭昏眼花,常常寫到最後回頭在檢查文章的時候,才發現怎麼中間的章節數字錯掉了,結果還要大費周章的把後面的數字改掉,這實在是很麻煩也很討厭。

不過,CSS其實也支援動態加入章節的計數功能,可惜這個好用的功能,IE完全沒有反應,如果各位覺得IE使用者不值得照顧,就不用太煩惱IE上面的顯示問題。

這讓我想起,CSS禪意花園上的許多作者,常常有意無意的懲罰IE的用戶,老是讓他們看最醜的樣式,然後把精緻漂亮的畫面留給其他標準化瀏覽器的使用者,這真是個不錯的處罰呢!哈哈哈~

body { 
  counter-reset: chapter;    /*建立章節的計數器*/ 
} 
h1:before { 
  content: "第" counter(chapter) "章. "; 
  counter-increment: chapter;   /* chapter +1*/ 
} 
h1 { 
  counter-reset: section;      /* 把 section 設為 0 */ 
} 
h2:before { 
  content: counter(chapter) "." counter(section) " "; 
  counter-increment: section; 
}

接著,你只需要在這個網頁當中打入下列的Code,這些HTML元素就會自動套用上面的規則和設定:

<h1>標題一</h1>
<h2>我是副標題</h2>
<h1>標題二</h1>
<h2>我也是副標題</h2>
<h2>我也是副標題</h2>
<h2>我也是副標題</h2>

下面是瀏覽器顯示出來的樣子:

1.gif

效果真的很不錯呢!不過IE就是不支援的啦~所以,如果可以大家就還是改用支援標準化的瀏覽器吧!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s