どのCSSプロパティやどの要素が、iOSどれから使えるか分からなくなるため私的な確認用まとめ。
主にCSS・たまにJSとHTML。
～iOS15未満
～iOS15未満
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'
});iOS15
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()など
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を解像度ごとに出し分けるやつ。
17.4
transition-behavior
@scope
17.5
@starting-style
text-wrap:balance
iOS18
相対カラー構文（Relative ColorsのcurrentColor）
相対カラー構文自体はiOS16.4から。
その他ブラウザでcurrentColorサポートはFirefoxが2024年10月ごろから、Chromeは2024年11月ごろからサポートの見込み（2024年10月時点）
2024.10時点だとまだ使えないが、いずれ使えるようになりそう
overflow-anchor
text-box-trim & text-box-edge
おまけ
バージョンシェア参考資料（statcounter）
コメント