用 CSS 累加數字 & CSS 支援變數

在這瞬息萬變的網路世界中
不要說十年…
五年就差很多了！
這有大部分要歸功於 Google 囉~
（Google OS：更！這又扯到我了…）

剛在這邊看到一個例子
可以用 CSS 去控制數字累進
以下擷取 The Spanner 的部份程式出來說明（範例＆原程式碼）

＠這段是用來重整頁面用的
<?php
for($i=0;$i<$maxLoop;$i++) {
$frame = $i + 1;
echo '<meta http-equiv="Refresh" content="'.$frame.';URL=cssloops.php#'.$frame.'_'.$rand.'">',"\r\n";
}
?>

＠這段是用來動態產生 CSS
<style type="text/css">
<?php
$linkCount = $maxLoop;
for($i=0;$i<$maxLoop;$i++) {
$frame = $i + 1;
for($j=0;$j<$i;$j++) {
echo 'a + ';
}
echo 'a[href="cssloops.php#'.$frame.'_'.$rand.'"]:visited + ';
for($j=0;$j<$linkCount-1;$j++) {
echo 'a + ';
}
?>
div:after {
counter-increment: count <?php echo $frame?>;
content: " " counter(count) " ";
}
<?php
$linkCount--;
}
?>
div:after {
content: " " counter(count) " ";
}
</style>

＠這段是用來顯示 CSS 效果的 HTML 部份

<?php
for($i=0;$i<$maxLoop;$i++) {
$frame = $i + 1;
?>
<a href="cssloops.php#<?php echo $frame?>_<?php echo $rand?>"></a>
<?php
}
?>
<div></div>

PS. 上面這個範例在 Opera 9.5 beta1 中無效

這邊還有介紹在 CSS 中使用變數
使用的方式很簡單
可以在定義 CSS 的地方定義一個類似這樣的東西

/*
!TEXTCOLOUR #369
!BORDER 1px solid #369
*/

然後在 CSS 引用

h1 { color: !TEXTCOLOUR; font-size: 1.1em }
p { color: !TEXTCOLOUR; font-style: italic }
div { color: !TEXTCOLOUR; border: !BORDER }

CSS 變數的部份可能一般網頁中不常使用到
但如果用程式的人應該就可以很善用這功能
尤其是重複性大或用程式去控制 icon 圖片路徑的部份


過些日子 CSS3、HTML5、XHTML2 都出來後
以後才學網頁的人可能就會很命苦了
或許是幸福也不一定喔～