どのCSSプロパティやどの要素が、iOSどれから使えるか分からなくなるため私的な確認用まとめ。
主にCSS・たまにJSとHTML。
～iOS16未満
～iOS16未満
14.0
MediaQueryListEvent API
いきなりCSSじゃないですが、メディアクエリを使ってJSのレスポンシブ対応をするときのこれ👇が使えるようになるのはiOS14からです。
const mql = window.matchMedia("(max-width: 600px)");
mql.addEventListener("change", (event) => {
if (event.matches) {
}
});:is()
iOS13だと:matches()か:-webkit-any()で似た動作をしていたものが、:is()としてサポートされたのはiOS14からになります。
また、 forgiving selector listのサポート（非対応のセレクタがカッコ内にあるとき、対応するセレクタにはCSSがあたる）もiOS14からです。
:where()
:is()の詳細度0版。
WebP
14.5
translate, rotate, scale
transform: translate(0, 20px) → translate:0 20px;
のような感じで、transformなしで個別にかけるようになった。アニメーションする時便利。
gap property for Flexbox
display:flex; のときの gap（gridの方のgapは前から使える）
scroll-margin
論理プロパティ
margin-block, margin-inline, padding-block, padding-inline, border-block, border-inline, inset のこと。
scrollTo/ScrollBy の smoothオプション
JavaScriptですがsmoothオプションが使えるのは14.5から。
window.scrollTo({
top: 100,
left: 100,
behavior: 'smooth'
});15.0
aspect-ratio
要素の縦横比を維持したレスポンシブに欠かせない存在。
object-fitと組み合わせて使うと最高に便利。
displayの2値構文
theme-color Meta Tag
基本的にスマホ向けのHTML設定。
15.4
dialog要素
@layer
scroll-behavior
スムーススクロールをCSSだけでやるやつ。
:has()
:focus-visible
:focusだとキーボード操作時だけでなく、クリック操作時もフォーカスが当たってやだったけどこれで解決。
svh,dvh,lvhなど
CSSの三角関数:sin()など
ステップ値関数 round()、mod()、rem()
accent-color
appearanceのベンダープレフィックスなし
iOS15.3までは -webkit- が必要。
img の loading=”lazy”
iOS16
16.0
コンテナクエリ
コンテナクエリ単位のサイズ
text-align-last
overflow:clip
Subgrid
2023年9月にChrome/Edgeも対応。
Motion Path
overscroll-behavior
スマホナビやモーダルウィンドウ内にスクロールするコンテンツがあるときに、背景のコンテンツのスクロールを止める処理を書きたいときに使うCSS
Element.scrollIntoView()のsmoothオプション
JavaScript。Elementが見えるとこまでスクロールするやつのsmoothオプション。
16.1
URL Scroll-To-Text Fragment
以下のような方法でリンクするやつ。
https://example.com/#:~:text=permission
16.2
color-mix()
16.4
単位 lh
フォントサイズ×line-height
iframeのloading=”lazy”
Media Queries: Range Syntax
メディアクエリの@media (100px <= width <= 1900px)というような書き方
相対カラー構文（Relative Colors）
Firefoxが2024年7月から利用可能に。
currentColorが使えるようになるのはiOS18から
@property
Firefoxが2024年7月から利用可能に
16.5
CSS でのネスト
& が不要になるのはiOS17.2から。
:user-invalid
:validだとユーザーの操作前に有効な値かの判定がされてしまっていたが、:user-invalidの場合はユーザーの操作後に判定が走る。
Chrome119から対応。
iOS 17
17.0
search要素
Chrome・Firefoxは118から。
@counter-style（の部分サポート）
image-set()
background-imageを解像度ごとに出し分けるやつ。
font-size-adjust
17.2
linear() イージング関数
animation-timing-function: linear(0, 0.25, 1); のような感じで使えるイージング関数。
JavaScriptでしか表現できないイージングカーブも、努力すればlinear()で書ける。
17.4
display:blockのときのalign-content
transition-behavior
transition-behavior: allow-discrete; にすると、display:noneへのtransitionが効くようになる。
background-imageのアニメーションにも使える。@starting-style とあわせて使う。
@scope
17.5
@starting-style
display:noneからのtransitionを効かせるために使えるやつ。transition-behavior とあわせて使う。
text-wrap:balance
iOS18
18.0
相対カラー構文（Relative ColorsのcurrentColor）
相対カラー構文自体はiOS16.4から。
その他ブラウザでcurrentColorサポートはFirefoxが2024年10月ごろから、Chromeは2024年11月ごろからサポートの見込み（2024年10月時点）
content-visibility
レンダリングパフォーマンス関連。画面外の要素のレンダリングをスキップする。
（contain-intrinsic-size と一緒に使う）
コンテナスタイルクエリ（の部分サポート）
コンテナのスタイル（CSS変数の値）が○○だったら……という、スタイルで判定するコンテナクエリ。
2025年1月時点ではFirefoxが対応していない。
offset-path（の多くの機能）
offset-pathそのものはiOS15.4から。
利用可能な値が増加したのがiOS18.0から。
View Transitions API
画面遷移アニメーション用のCSSとJS。18.2からサポートの機能もある。
2025年1月時点ではFirefoxが対応していない。
18.2
text-box-trim & text-box-edge
Chromeが133からだが、2025年1月時点だとFirefoxは対応していない。
2025.1時点だとまだ使えないが、いずれ使えるようになりそう
CSS Anchor Positioning
指定した要素（アンカー要素）の位置を基準に、要素を配置できる。
表示領域に要素が収まらないときの挙動を指定できるのが特徴。
dialogのclosedby属性
Light dismiss 機能のやつ。
overflow-anchor
おまけ
バージョンシェア参考資料（statcounter）
コメント