どのCSSプロパティやどの要素が、iOSどれから使えるか分からなくなるため私的な確認用まとめ。
主にCSS・たまにJSとHTML。
iOS14
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と組み合わせて使うと最高に便利。
theme-color Meta Tag
基本的にスマホ向けのHTML設定。
15.4
dialog要素
@layer
scroll-behavior
スムーススクロールをCSSだけでやるやつ。
:has()
2023年8月現在、Firefoxが未対応。2023年中の対応を目指しているとのうわさも。
:focus-visible
:focusだとキーボード操作時だけでなく、クリック操作時もフォーカスが当たってやだったけどこれで解決。
svh,dvh,lvhなど
accent-color
appearanceのベンダープレフィックスなし
iOS15.3までは -webkit- が必要。
img の loading=”lazy”
iOS16
16.0
コンテナクエリ
コンテナクエリ単位のサイズ
text-align-last
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.4
iframeのloading=”lazy”
Media Queries: Range Syntax
メディアクエリの@media (100px <= width <= 1900px)というような書き方
16.5
CSS でのネスト
:user-invalid
:validだとユーザーの操作前に有効な値かの判定がされてしまっていたが、:user-invalidの場合はユーザーの操作後に判定が走る。
Chrome119から対応予定。
iOS 17
以下詳細未確認
image-set()
background-imageを解像度ごとに出し分けるやつ。
コメント