😑

[CSS]ios17でまだmarker疑似要素+contentプロパティが使えない

に公開

案件実装途中でハマったことである。
"・"を以下のように実装していた。

marker疑似要素を使って中にcontentプロパティにて"・"を指定していた。before等の疑似要素と違って、marker分の幅を担保してくれるため文字量が多くなって文字が折りたたまった時の実装が楽だったからだ。(オレンジ...のように文字量が増えて段落ちしても余白を担保してくれる)

chrome上では特に問題なかったため気にしていなかったがお戻しの時にSafariのみ"・"が表示されていない事態が発覚した。

mdnCan I useを見るとios17ではもう実装可能なマークになっている。がよく見ると、、

Safariではfont sizeとcolorしか適用できないよと書かれていた。。
結局戻しはlist-styleをautoに戻し、font-sizeを調整することで対応した。(font-sizeはSafariでも対応しているため)

今回はlist-styleの標準である"・"だったからよかったものの、複雑な模様をテキスト前に配置する必要が出た場合にはどうすればよいのだろうか、その点がわからずじまいだった。

参考記事

https://zenn.dev/miki/scraps/a1e71383986a91

Discussion