文字与清单计数

虽著 CSS 的版本演进，也陆续支援动态取得元素属性等好用的功能，这篇教学会介绍“文字与清单计数”相关的 CSS 函数，例如 attr()、url()、counter()、counters() 等等，透过动态取得的文字或变数，让版面的操控更具弹性。

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

“文字与清单计数”的 CSS 函数

下方列出“文字与清单计数”类型的 CSS 函数 ( 目前所有浏览器都支援 )：

attr()

“attr()”是“取得套用该选择器元素的属性值”CSS 函数，通常会搭配虚拟元素的 content 一同使用，基本写法如下：

div::before {
  content: attr(name);  /* 讀取 name 屬性數值作為內容文字 */
}
div::after {
  content: "<< " attr(name) " >>";  /* 讀取 name 屬性數值作為內容文字，文字左右加上額外文字 */
}

下方的范例执行后，会使用虚拟元素，将 div 的前方和后方都加上对应属性的文字。

线上展示：https://codepen.io/oxxo/pen/wvborYW

<!-- 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() 读取属性时，可在后方加入下列参数，就能根据参数指定该数值的类型：

下方范例会使用 attr() 读取元素属性值，透过属性值改变 CSS 样式 ( 如果看不到效果，表示浏览器仍不支援 )。

线上展示：https://codepen.io/oxxo/pen/azvdxjJ

<!-- 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 样式。

线上展示：https://codepen.io/oxxo/pen/GgpoLzw

<!-- 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 会加入背景图片，清单则会使用图片作为清单标记。

线上展示：https://codepen.io/oxxo/pen/mdYOqdV

<!-- 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 程序码”的图片内容，下方的范例执行后，会用这两种方式呈现背景图片。

线上展示：https://codepen.io/oxxo/pen/gOJLXaw

<!-- 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”样式属性使用，基本写法如下：

延伸阅读：清单计数器 counter()、counters()

li::marker { 
  content: counter(名稱, 類型);
}
li::before { 
  content: counter(名稱, 類型);
}

常用的计数器类型如下表所示：

下方的范例执行后，会使用 counter() 定义清单的数字标记格式。

线上展示：https://codepen.io/oxxo/pen/dyEOZap

<!-- 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”样式属性使用，基本写法如下：

延伸阅读：清单计数器 counter()、counters()

li::marker { 
  content: counters(名稱, 分隔符, 類型);
}
li::before { 
  content: counters(名稱, 分隔符, 類型);
}

下方的范例执行后，会使用 counters() 定义清单的数字标记格式。

线上展示：https://codepen.io/oxxo/pen/PovbOrQ

<!-- 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() 只能应用在基本虚拟元素，但随着浏览器的进步，相信不久的将来就能真正发挥出它的功能啰。

意见反馈