(随時更新)iOS○○から使えるCSSなどまとめ【iOS14以降で】

  • URLをコピーしました!

どのCSSプロパティやどの要素が、iOSどれから使えるか分からなくなるため私的な確認用まとめ。

主にCSS・たまにJSとHTML。

目次

iOS14

14.0

MediaQueryListEvent API

Can I Use…

いきなりCSSじゃないですが、メディアクエリを使ってJSのレスポンシブ対応をするときのこれ👇が使えるようになるのはiOS14からです。

const mql = window.matchMedia("(max-width: 600px)");
mql.addEventListener("change", (event) => {
  if (event.matches) {
  } 
});

:is()

Can I Use…

iOS13だと:matches()か:-webkit-any()で似た動作をしていたものが、:is()としてサポートされたのはiOS14からになります。
また、 forgiving selector listのサポート(非対応のセレクタがカッコ内にあるとき、対応するセレクタにはCSSがあたる)もiOS14からです。

:where()

Can I Use…

:is()の詳細度0版。

WebP

Can I Use…

14.5

translate, rotate, scale

Can I Use…

transform: translate(0, 20px) → translate:0 20px;
のような感じで、transformなしで個別にかけるようになった。アニメーションする時便利。

gap property for Flexbox

Can I Use…

display:flex; のときの gap(gridの方のgapは前から使える)

scroll-margin

Can I Use…

論理プロパティ

margin-block, margin-inline, padding-block, padding-inline, border-block, border-inline, inset のこと。

Can I Use…

scrollTo/ScrollBy の smoothオプション

Can I Use…

JavaScriptですがsmoothオプションが使えるのは14.5から。

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

iOS15

15.0

aspect-ratio

Can I Use…

要素の縦横比を維持したレスポンシブに欠かせない存在。
object-fitと組み合わせて使うと最高に便利。

displayの2値構文

Can I Use…

theme-color Meta Tag

Can I Use…

基本的にスマホ向けのHTML設定。

15.4

dialog要素

Can I Use…

@layer

Can I Use…

scroll-behavior

Can I Use…

スムーススクロールをCSSだけでやるやつ。

:has()

2023年8月現在、Firefoxが未対応。2023年中の対応を目指しているとのうわさも。

Can I Use…

:focus-visible

Can I Use…

:focusだとキーボード操作時だけでなく、クリック操作時もフォーカスが当たってやだったけどこれで解決。

svh,dvh,lvhなど

Can I Use…

accent-color

Can I Use…

appearanceのベンダープレフィックスなし

iOS15.3までは -webkit- が必要。

img の loading=”lazy”

Can I Use…

background-attachment: fixed

Can I Use…

iOS16

16.0

コンテナクエリ

Can I Use…

コンテナクエリ単位のサイズ

Can I Use…

text-align-last

Can I Use…

Subgrid

2023年9月にChrome/Edgeも対応。

Can I Use…

Motion Path

Can I Use…

overscroll-behavior

スマホナビやモーダルウィンドウ内にスクロールするコンテンツがあるときに、背景のコンテンツのスクロールを止める処理を書きたいときに使うCSS

Element.scrollIntoView()のsmoothオプション

JavaScript。Elementが見えるとこまでスクロールするやつのsmoothオプション。

16.1

URL Scroll-To-Text Fragment

Can I Use…

以下のような方法でリンクするやつ。
https://example.com/#:~:text=permission

16.2

color-mix()

Can I Use…

16.4

iframeのloading=”lazy”

Can I Use…

Media Queries: Range Syntax

メディアクエリの@media (100px <= width <= 1900px)というような書き方

Can I Use…

16.5

CSS でのネスト

& が不要になるのはiOS17.2から。

Can I Use…

:user-invalid

:validだとユーザーの操作前に有効な値かの判定がされてしまっていたが、:user-invalidの場合はユーザーの操作後に判定が走る。
Chrome119から対応。

Can I Use…

iOS 17

以下詳細未確認

image-set()

background-imageを解像度ごとに出し分けるやつ。

Can I Use…

@counter-style(の部分サポート)

Can I Use…

search要素

Chrome・Firefoxは118から。

Can I Use…

おまけ

バージョンシェア参考資料(statcounter

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次