clamp()

Safari 13.1〜,Safari on iOS

min,max は使えるので別の記述で対応。

gap (for Flexbox)

Safari 14.1〜,Safari on iOS 14.5〜

marginで対応。

論理プロパティ

よくある事例(inset)

position:〇〇;
inset:0;

と記載するとエラーが出てしまうので、下記のように書く必要があります。

position:〇〇;
top:0;
right:0;
left:0;
bottom:0;

stylelint などを使用していると自動に変換されてしまうので、変換されないように設定する必要があります。

参照:https://stylelint.io/user-guide/rules/declaration-block-no-redundant-longhand-properties/

aspect-ratio

Safari,Safari on iOS 15.0〜

iOS15 未満は padding-top:〇〇%;などを使って対処

参考: https://www.webdesignleaves.com/pr/css/css-aspect-ratio.html

translate,  rotate, scale

Safari 14.1〜,Safari on iOS 14.5〜

下記のようにtransform なしで個別にかけるようになりました。

transform: translate(0, -5px) rotate(5deg) scale(0.5);

↓

translate: 0 -5px;
rotate: 5deg;
scale: 0.5;

translateX,skew など他の値は従来通りの書き方で書く必要があります。

:has()

Safari,Safari on iOS 15.4〜

:is() , :where()

Safari,Safari on iOS 14.0〜

display の 2 値構文 (display: 外側の値 内側の値;) 

Safari ,Safari on iOS 15.0〜

scroll-behavior

Safari ,Safari on iOS 15.4〜

Large Viewport (lvw, lvh, lvmin, lvmax)

Small Viewport (svw, svh, svmin, svmax)

Dynamic Viewport (dvw, dvh, dvmin, dvmax)

Safari ,Safari on iOS 15.4〜

sin(), cos(), tan()

Safari ,Safari on iOS 15.4〜

:focus-visible

Safari ,Safari on iOS 15.4〜

その他

clip-path

以前サポートされているはずのclip-pathがiOS13.0で効いていない事例があったので

対象ブラウザが古い時は注意が必要です。

webP画像

Safari ,Safari on iOS 14.0〜

14.0未満は webP 対応していないので、CSSでWebPを使いたい場合、png,jpgと出し分けるなどの対応が必要です。

Modernizr（モダナイザー）というのを使用してブラウザ判定を行うことができます。

参考:https://mtrad-blog.com/2021/11/11/post-2665/

※補足

Modernizr は現在更新が止まっているので、iOS15.4 以降サポートの CSS ブラウザ判定はSupportsCSS(https://supportscss.dev/) というのを使用するのがいいかなと思います。

参考:https://coliss.com/articles/build-websites/operation/css/feature-detection-for-modern-css.html

dialog要素

Safari 15.4〜 ,Safari on iOS 15.4〜

img要素 の loading=”lazy"

Safari ,Safari on iOS 15.4〜

(iframeのloading=”lazy”は iOS16.4〜)

Javascript scrollTo/ScrollBy の smooth オプション

Safari ,Safari on iOS 14.0〜

window.scrollTo({
	top: 100,
	left: 100,
	behavior: 'smooth'
});

他にも「こんな記述で崩れたことがある」や、「safari対策でこんなことしてます」などあれば

是非教えていただきたいです!!

(こちらの記事も参考にしました)