ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。
ただ、新しいプロパティはブラウザごとに対応状況が違うので、必ずcan I use 等で対応状況を確認しましょう。
backdrop-filter
backdrop-filterは要素の背景をぼかす事が出来ます。filterプロパティと似ていますが、filterは適用した要素自体がボケますが、backdrop-filterは適用した要素の背後の領域の色味やぼけ具合が変化します。なので、基本的にはRBGAとセットで使う事がほとんどです。
scroll-snap
scroll-snapを使うと、画面をスクロールしたときに特定の画面領域で止まるように制御できます。縦スクロールだけでなく横スクロールにも対応しています。
aspect-ratio
例えば、要素の幅に対してアスペクト比を使って高さを設定したい場合、今までは1:1ならpadding-top: 100%、16:9ならpadding-top: 56.25%というようにpaddingを使う方法が一般的でした。その計算や記述が不要になり、CSSで基準のwidthを指定し、aspect-ratioに比率を指定するだけでheightが自動的に算出され、アスペクト比を保つことができます。
See the Pen
aspect-ratio by yachin29 (@yachin29)
on CodePen.
新しいリセットcss
リセットcssも対象ブラウザが変わる度に変わっていきます。
/* Box sizing rules */ /* Box sizingの定義 */ *, *::before, *::after { box-sizing: border-box; } /* Remove default padding */ /* デフォルトのpaddingを削除 */ ul[class], ol[class] { padding: 0; } /* Remove default margin */ /* デフォルトのmarginを削除 */ body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; } /* Set core body defaults */ /* bodyのデフォルトを定義 */ body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; } /* Remove list styles on ul, ol elements with a class attribute */ /* class属性を持つul、ol要素のリストスタイルを削除 */ ul[class], ol[class] { list-style: none; } /* A elements that don't have a class get default styles */ /* classを持たない要素はデフォルトのスタイルを取得 */ a:not([class]) { text-decoration-skip-ink: auto; } /* Make images easier to work with */ /* img要素の扱いを簡単にする */ img { max-width: 100%; display: block; } /* Natural flow and rhythm in articles by default */ /* article要素内の要素に自然な流れとリズムを定義 */ article > * + * { margin-top: 1em; } /* Inherit fonts for inputs and buttons */ /* inputやbuttonなどのフォントは継承を定義 */ input, button, textarea, select { font: inherit; } /* Remove all animations and transitions for people that prefer not to see them */ /* 見たくない人用に、すべてのアニメーションとトランジションを削除 */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
IE11のサポートが切れれば使用出来るHTMLやCSSの便利な機能
Windows OSのサポートには期限があり、各OSの期限は、Windows 7は2020年1月14日で終了済みで、Windows 8.1は2023年1月10日に終了となります。
Windows 7のサポート期限が過ぎた事で、今後IE11のサポートを切るという選択が一層増えてきます。
HTML5やCSS3にはIE11がサポートしていない為、使えない便利な機能が多くあります。そういった便利な機能が今後は使えるようになって来るので、知っておきましょう。
HTML
rel=“noopener"
target="_blank"を使用するとリンク先を別のタブで開く事が出来ますが、セキュリティ上の脆弱性があり、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。それを避ける事が出来るのがこの「rel=“noopener"」属性です。
<a href="http://example.com" rel=“noopener" target="_blank">アンカー</a>
input type="color"
16進数表記のテキストフィールド。カラーピッカーのUIが用意されている。
<input type="color" value="#f6b73c">
meter要素
<p>オーブンの温度: <meter min="200" max="500" value="350">350 degrees</meter></p>
details, summary要素
CSS、JavaScriptを使用せずにアコーディオンが実装できる。
<details> <summary>Details</summary> Something small enough to escape casual notice. </details>
button form Attribute
送信ボタン(button submit)をform要素の外からでも利用できるようになる。
<form action="outout.php" method="post" id="form1"> <input type="text" id="name" name="name"> </form> <button type="submit" form="form1" value="Submit">Submit</button>
picture要素
srcset属性
CSS
flow-root
clearfixを利用しなくてもfloatを解除できる。overflow:hiddenも必要ありません。
div { display: flow-root; }
all
すべてのプロパティを一括して指定する。
button { all: unset; }
unset
プロパティをリセットし、親からの継承された場合は継承値、そうでなければ初期値を設定します。
<style> .box{ color: green; } p { color: red; font-size: 20px; } .bar{ all: unset; } </style> </head> <body> <div class="box"> <p>このテキストは赤です。</p> <p>このテキストも赤です。</p> <p class="bar">このテキストです。</p> </div> </body>
それ以外にも便利なものがたくさんあります