iOSやiPadOSが18日にリリースされ、同OS向けにSafariが更新されてSafari 17.0もあわせてリリースされた。なお、macOSのSafari 17.0は現在パブリックベータ版であり、9月26日にリリースされる予定となっている。
Safari 17.0の新機能の詳細は公式ブログを参照してもらうとして、ここでは、このバージョンのSafariからCSSの@counter-styleに標準で対応したことを取り上げたい。
@counter-styleを使うことで、順序付き箇条書きの連番（マーカー）や章タイトルの見出しなどで出てくる章番号などのカウンタースタイルが単純ではない場合の指定を設定できるようになる。
そして、疑似要素で使われるcontentプロパティで指定できるcounter()内やリスト要素で使われるlist-style-typeプロパティ上などで、設定したカウンタースタイルを指定することで、独自のカウンタースタイルを適用できる強力な機能である。
この@counter-styleはChrome・Edge・Firefoxではすでにサポートされていたが、Safari側の実装が長い間足踏みしていたため、気軽に使うことができない状況にあった。それが今回、Safari 17.0でサポートされたことにより、ブラウザすべてで使えるようになった。
ただし、::before、::after、::marker疑似要素の文字列がブラウザ上で選択できるように調整できない問題が依然として残っていている[1]。この解決にはまだまだ時間を要しそうであるが、@counter-styleが気軽に使えるようになってきたと言えるだろう。
