CSS 文字與清單計數 ( 函式類型 )
雖著 CSS 的版本演進，也陸續支援動態取得元素屬性等好用的功能，這篇教學會介紹「文字與清單計數」相關的 CSS 函式，例如 attr()、url()、counter()、counters() 等等，透過動態取得的文字或變數，讓版面的操控更具彈性。
教學影片
搭配教學影片一起閱讀，效果會更好！歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道。
「文字與清單計數」的 CSS 函式
下方列出「文字與清單計數」類型的 CSS 函式 ( 目前所有瀏覽器都支援 )：
| 文字與清單函式 | 說明 |
|---|---|
| attr() | 取得套用該選擇器元素的屬性值。 |
| url() | 網址。 |
| counter() | 計數器。 |
| counters() | 多層計數器。 |
attr()
「attr()」是「取得套用該選擇器元素的屬性值」CSS 函式，通常會搭配虛擬元素的 content 一同使用，基本寫法如下：
div::before {
content: attr(name); /* 讀取 name 屬性數值作為內容文字 */
}
div::after {
content: "<< " attr(name) " >>"; /* 讀取 name 屬性數值作為內容文字，文字左右加上額外文字 */
}
下方的範例執行後，會使用虛擬元素，將 div 的前方和後方都加上對應屬性的文字。
<!-- HTML 程式碼 -->
<div left="123" right="456">oxxo</div>
<div left="789" right="000">apple</div>
<!-- CSS 程式碼 -->
<style>
div {
border: 1px solid #000;
margin:10px;
padding:10px;
}
div::before {
content: attr(left) ", ";
}
div::after {
content: " ," attr(right);
}
</style>
W3C 在 CSS Level 5 的規範中，attr() 可以將讀取的數值應用於長度、角度、顏色等 CSS 樣式，使用這種方式不僅可以讓版面的設計更加靈活，大幅減少 JavaScript 的使用，進而提高網頁效能，目前支援下列幾種寫法：
- 注意！雖然已有部分新版瀏覽器支援這種寫法，但目前仍有許多瀏覽器「不支援」。
- 由於安全性的緣故，不支援 attr() 和 url() 互相混用 ( 無法用這種方式改變背景圖 )。
div {
/* 傳統寫法，僅支援 content、marker */
content: attr(data-count);
content: attr(data-title);
/* 讀取屬性值並指定單位 */
opacity: attr(data-opacity type(<number>)); /* 指定數字類型 */
width: attr(data-width %); /* 讀取後套用百分比單位 */
height: attr(data-height px); /* 讀取後套用 px 單位 */
/* 讀取屬性值並指定單位，增加預設值，如果讀取屬性失敗就用預設值 */
content: attr(data-title type(<string>), "oxxo"); /* 指定字串類型，讀取錯誤就用 oxxo */
width: attr(data-width %, 50%); /* 讀取後套用百分比單位，讀取錯誤就用 50% */
height: attr(data-height px, 200px); /* 讀取後套用 px 單位，讀取錯誤就用 200px */
}
使用 attr() 讀取屬性時，可在後方加入下列參數，就能根據參數指定該數值的類型：
| 參數 | 寫法 | 單位需求 | 說明 |
|---|---|---|---|
| * | type(*) |
有單位數值需要加上單位 | 全部類型 |
| string | type(<custom-ident>) |
- | 字串 |
| integer | type(<integer>) |
- | 整數 |
| number | type(<number>) |
- | 數字 |
| color | type(<color>) |
顏色單位 | 顏色 |
| length | type(<length>) |
長度單位 | 長度 |
| px, em, rem, vw, vh, vmin, vmax, mm, cm, in, pt, pc | px |
不用單位，套用參數單位 | 長度 |
| angle | type(<angle>) |
角度單位 | 角度 |
| deg, grad, rad | deg |
不用單位，套用參數單位 | 長度 |
| time | type(<time>) |
時間單位 | 時間 |
| s, ms | s |
不用單位，套用參數單位 | 時間 |
| percentage | type(<percentage>) |
百分比單位 | 百分比 |
| % | % |
不用單位，套用參數單位 | 百分比 |
| frequency | type(<frequency>) |
頻率單位 | 頻率 |
| Hz, kHz | Hz |
不用單位，套用參數單位 | 頻率 |
下方範例會使用 attr() 讀取元素屬性值，透過屬性值改變 CSS 樣式 ( 如果看不到效果，表示瀏覽器仍不支援 )。
<!-- HTML 程式碼 -->
<div class="a" o="0.5">沒有 w，o="0.5"</div>
<div class="b" w="200">w="200"</div>
<div class="c" w="200px">w="200px"</div>
<div class="d" w="50">w="50"</div>
<div class="e" w="50%">w="50%"</div>
<div class="f" d="-10">d="-10"</div>
<div class="g" d="-10deg">d="-10deg"</div>
<div class="h" d="-10deg">d="-10deg"</div>
<!-- CSS 程式碼 -->
<style>
div {
border: 1px solid #000;
height: 50px;
margin: 10px;
max-width: 300px;
background: orange;
}
.a {
width: attr(w px, 200px); /* 讀取不到 w 就套用 200px */
opacity: attr(o type(<number>), 1); /* o 是浮點數，使用 number */
}
.b {
width: attr(w px, 100px); /* 讀取 w，因為只有純數字，所以使用 px 單位 */
}
.c {
width: attr(w type(<length>), 100px); /* 讀取 w，因為自帶 px 單位，所以 type 使用 length */
}
.d {
width: attr(w %, 100px); /* 讀取 w，因為只有純數字，所以使用 % 單位 */
}
.e {
width: attr(w type(<percentage>), 100px); /* 讀取 w，因為自帶 % 單位，所以 type 使用 percentage */
}
.f {
transform: rotateZ(attr(d deg, 15deg)); /* 讀取 d，因為只有純數字，所以使用 deg 單位 */
}
.g {
transform: rotateZ(attr(d type(<angle>), 15deg)); /* 讀取 d，因為自帶 deg 單位，所以 type 使用 angle */
}
.h {
transform: rotateZ(attr(d type(*), 15deg)); /* 讀取 d，使用星號使得不論何種類型都能讀取 */
}
</style>
如果將 attr() 搭配 CSS 變數，也更能發揮變數的特色，下方範例除了搭配變數，也混合 calc() 進行更複雜的計算，做出更好管理的 CSS 樣式。
<!-- HTML 程式碼 -->
<div class="a" w="50px">50px ( 讀取失敗，套用預設值 )</div>
<div class="b" w="100" o="0.8">100</div>
<div class="c" w="200">200</div>
<div class="d" w="200" o="0.3">200 x 2</div>
<!-- CSS 程式碼 -->
<style>
div {
border: 1px solid #000;
height: 50px;
margin: 10px;
background: orange;
--w: attr(w px, 250px);
--o: attr(o type(<number>), 0.5);
width: var(--w);
opacity: var(--o);
}
.d {
width: calc(var(--w) * 2);
}
</style>
url()
「url()」是「網址」CSS 函式，通常應用於「背景圖片、清單圖示、滑鼠游標、外部字體」等需要使用 url 的樣式，使用方法如下：
div {
background-image: url("oxxo.gif");
list-style-image: url("../icon/icon-01.jpg");
content: url("bg.jpg");
cursor: url("mycursor.cur");
src: url("google-font.woff");
}
div::before {
content: " - " url(star.gif);
}
url() 的網址可以「不用引號」或「使用雙引號或單引號」包覆，但如果網址中有出現「括號、空格或引號」，則必須使用引號包覆 ( 這種情形幾乎不會發生 )，例如下方的寫法都可以正常運作的。
background-image: url(oxxo.gif); /* 不使用引號 */
background-image: url('oxxo.gif'); /* 使用單引號 */
background-image: url("oxxo.gif"); /* 使用雙引號 */
下方的範例執行後，畫面中的 div 會加入背景圖片，清單則會使用圖片作為清單標記。
<!-- HTML 程式碼 -->
<div></div>
<ul>
<li>oxxo</li>
<li>banana</li>
<li>orange</li>
<li>papaya</li>
</ul>
<!-- CSS 程式碼 -->
<style>
div {
width: 300px;
height: 200px;
background-image: url(https://img.freepik.com/free-vector/minimal-geometric-stripe-shape-background_1409-1014.jpg);
}
li {
list-style: url(https://cdn-icons-png.freepik.com/16/11694/11694600.png);
}
</style>
url() 除了使用網址作為參數，也支援「base64 編碼」或「SVG 程式碼」的圖片內容，下方的範例執行後，會用這兩種方式呈現背景圖片。
<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 225px;
height: 225px;
border: 1px solid black;
margin: 5px;
}
.a {
background-image: url(data:image/png;base64,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)
}
.b {
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="225px" height="225px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path style="opacity:1" fill="%23fffefd" d="M -0.5,-0.5 C 74.5,-0.5 149.5,-0.5 224.5,-0.5C 224.5,74.5 224.5,149.5 224.5,224.5C 149.5,224.5 74.5,224.5 -0.5,224.5C -0.5,149.5 -0.5,74.5 -0.5,-0.5 Z"/></g><g><path style="opacity:1" fill="%23ff5916" d="M 67.5,170.5 C 65.9814,173.526 65.3148,176.859 65.5,180.5C 65.5034,183.025 65.8367,185.359 66.5,187.5C 67.6737,196.514 71.507,204.181 78,210.5C 78.6877,211.332 78.521,211.998 77.5,212.5C 48.2324,195.34 32.0657,169.674 29,135.5C 27.6436,114.26 31.9769,94.26 42,75.5C 42.6667,74.1667 43.3333,74.1667 44,75.5C 46.6601,86.484 52.1601,95.8173 60.5,103.5C 60.56,104.043 60.8933,104.376 61.5,104.5C 61.8333,103.667 62.1667,102.833 62.5,102C 62.0542,98.6499 61.3875,95.4833 60.5,92.5C 60.2665,87.1053 60.5998,81.772 61.5,76.5C 62.4915,71.9496 63.4915,67.2829 64.5,62.5C 74.5133,33.6547 94.1799,14.8213 123.5,6C 124.833,5.33333 126.167,5.33333 127.5,6C 125.539,9.21483 124.373,12.7148 124,16.5C 123.298,25.2032 123.632,33.8698 125,42.5C 128.058,50.2834 131.392,57.9501 135,65.5C 143.853,79.8737 152.187,94.5404 160,109.5C 161.897,115.485 163.73,121.485 165.5,127.5C 177.98,110.853 182.48,92.1865 179,71.5C 200.654,107.867 200.988,144.534 180,181.5C 168.36,199.822 152.194,211.989 131.5,218C 153.158,203.498 160.325,183.665 153,158.5C 150.433,164.069 147.433,169.403 144,174.5C 142.104,176.53 139.937,178.197 137.5,179.5C 137.158,172.876 135.658,166.543 133,160.5C 124.602,147.036 117.269,133.036 111,118.5C 109.524,113.594 108.524,108.594 108,103.5C 92.0711,117.283 86.0711,134.617 90,155.5C 91.8739,162.952 94.0405,170.285 96.5,177.5C 84.6868,173.684 77.3534,165.684 74.5,153.5C 70.7749,158.614 68.4415,164.281 67.5,170.5 Z"/></g><g><path style="opacity:1" fill="%23ff8e66" d="M 64.5,62.5 C 63.4915,67.2829 62.4915,71.9496 61.5,76.5C 61.0439,71.4045 62.0439,66.7378 64.5,62.5 Z"/></g><g><path style="opacity:1" fill="%23ffcbb9" d="M 60.5,92.5 C 61.3875,95.4833 62.0542,98.6499 62.5,102C 62.1667,102.833 61.8333,103.667 61.5,104.5C 60.8933,104.376 60.56,104.043 60.5,103.5C 60.7037,100.082 60.7037,96.4158 60.5,92.5 Z"/></g><g><path style="opacity:1" fill="%23ff895f" d="M 67.5,170.5 C 66.7081,176.13 66.3748,181.797 66.5,187.5C 65.8367,185.359 65.5034,183.025 65.5,180.5C 65.3148,176.859 65.9814,173.526 67.5,170.5 Z"/></g></svg>');
}
</style>
counter()
「counter()」是「計數器」CSS 函式， 具有兩個參數，分別是「計數器名稱」以及「計數器類型」，使用後可以「產生指定格式的計數器數值」，必須搭配清單的「counter-reset」和「counter-increment」樣式屬性使用，基本寫法如下：
li::marker {
content: counter(名稱, 類型);
}
li::before {
content: counter(名稱, 類型);
}
常用的計數器類型如下表所示：
| 類型 | 說明 |
|---|---|
| decimal | 阿拉伯數字 |
| decimal-leading-zero | 個位數開頭補零阿拉伯數字 |
| lower-alpha | 小寫英文字母 |
| lower-greek | 小寫希臘字母 |
| lower-roman | 小寫羅馬數字 |
| upper-alpha | 大寫英文字母 |
| upper-greek | 大寫希臘字母 |
| upper-roman | 大寫羅馬數字 |
| cjk-ideographic | 中文數字 |
| hiragana | 日文平假名 |
| katakana | 日文片假名 |
| armenian | 希臘數字 |
| georgian | 喬治亞文 |
| hebrew | 希伯來文 |
下方的範例執行後，會使用 counter() 定義清單的數字標記格式。
<!-- HTML 程式碼 -->
<ul>
<li>oxxo</li>
<li>banana</li>
<li>apple
<ul>
<li>aaa
<ul>
<li>xxx</li>
<li>yyy</li>
<li>yyy</li>
</ul>
</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</li>
<li>orange</li>
</ul>
<!-- CSS 程式碼 -->
<style>
ul {
counter-reset: oxxo;
list-style-type: none;
}
li{
counter-increment: oxxo;
}
li::before {
content: counter(oxxo, decimal) ' > ';
}
</style>
counters()
「counters()」是「多層計數器」CSS 函式，具有兩三個參數，分別是「計數器名稱」、「分隔符」以及「計數器類型」， 有別於 counter 只能取得「單層」的計數數值，counters() 使用後可以「保留父層數值，並結合新的計數器數值」，必須搭配清單的「counter-reset」和「counter-increment」樣式屬性使用，基本寫法如下：
li::marker {
content: counters(名稱, 分隔符, 類型);
}
li::before {
content: counters(名稱, 分隔符, 類型);
}
下方的範例執行後，會使用 counters() 定義清單的數字標記格式。
<!-- HTML 程式碼 -->
<ul>
<li>oxxo</li>
<li>banana</li>
<li>apple
<ul>
<li>aaa
<ul>
<li>xxx</li>
<li>yyy</li>
<li>yyy</li>
</ul>
</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</li>
<li>orange</li>
</ul>
<!-- CSS 程式碼 -->
<style>
ul {
counter-reset: oxxo;
list-style-type: none;
}
li{
counter-increment: oxxo;
}
li::before {
content: counters(oxxo, '-', decimal) '、';
}
</style>
小結
「文字與清單計數」相關的 CSS 函式已經存在許久，特別是 url()，由於太常會用到，甚至會忘記了它也是一種 CSS 函式，此外，雖然目前 attr() 只能應用在基本虛擬元素，但隨著瀏覽器的進步，相信不久的將來就能真正發揮出它的功能囉。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～