【2022年】近年のモダンブラウザ CSSハック
自分用に忘備録です。
近年実装されたものを中心にまとめました。
※ベンダープレフィックスは省略
01. 疑似クラス：「:is()」「:where()」「:not()」
記述をすっきりさせる。
「:is()」
input[type="text"]:invalid,
input[type="email"]:invalid,
select:invalid,
textarea:invalid {
box-shadow: none;
}
/* ↓ 書き換え */
:is(input[type="text"], input[type="email"], select, textarea):invalid {
box-shadow: none;
}「:where()」
:is()とほぼ同じ挙動、しかし詳細度（CSSのしていの優先順位）が０。
:where() で指定した記述より前に書いた CSS も適用される。
aside > div h1 {
color: blue; /* :where() の指定よりも、この指定が優先される */
}
:where(header,main,footer,aside > div) h1 {
color: red;
}（「2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説」より引用）
「:not()」
かっこの中身と一致しない要素を指定。Safari 以外で、複数の要素に対する指定が実装された。
section :not(h2, h4) {
color: red;
}（「2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説」より引用）
02. 関数：「min()」「max()」「clamp()」
calc() のように便利な関数。
「min()」
section {
width: min(60% - 40px, 600px);
}
/* ↓ 書き換え */
section {
width: calc(60% - 40px);
max-width: 600px;
}（「2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説」より引用）
「max()」
section {
width: max(60% - 40px, 500px);
}
/* ↓ 書き換え */
section {
width: calc(60% - 40px);
min-width: 500px;
}（「2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説」より引用）
「clamp()」
section {
width: clamp(500px, 60% - 40px, 600px);
}
/* ↓ 書き換え */
section {
width: calc(60% - 40px);
min-width: 500px;
max-width: 600px;
}（「2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説」より引用）
03. アスペクト比：「aspect-radio」
padding-top などで面倒な指定をしていたアスペクト比を簡単に指定できる。
img {
width: calc(100% - 20px);
aspect-ratio: 16 / 9;
}（「2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説」より引用）
比率は、「実寸大横 / 実寸大縦」としてインラインでHTMLに記述することもできる。
04. flex-box：「gap」
margin を用いた指定に代わって、Grid のように要素の隙間を指定できる。
/* .container要素内のアイテムの隙間を10pxにする */
.container {
display: flex;
gap: 10px;
}（「2021年から開発の現場で使える3つの便利CSS - aspect-ratio, gap, is()」より引用）
05. メディアクリ：「prefers-color-scheme」
「@media (prefers-color-scheme: dark)」
OSの設定で見た目の好みを「ダークモード」に指定している場合に、有効になる。ダークテーマ指定を以下のようにできる。
@media (prefers-color-scheme: dark) {
:root {
--body: #1c1c1c;
--text: white;
}
}06. 画像処理：「backdrop-filter」
背景に対してブラーなどを掛けられる。
.box {
backdrop-filter: blur(10px);
}Firefox は対応していない。
07. フロート解除「display: flow-root」
.container:after {
content: "";
clear: both;
display: block;
}
/* ↓ 書き換え */
.container {
display: flow-root;
}08. 疑似クラス：「:focus-within」
入力フォームで、子孫要素にフォーカスがあたっときに自分自身のスタイルを変えたいときに便利。
.container:focus-within {
background-color: red;
}（「全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現」より引用）
例では、.container 内のテキストエリアなどにフォーカスされると、CSSが適用される。
09. 疑似要素「::marker」
li や summary の行頭に表示される記号に対して、簡単にスタイルを割り当てる。
ol li::marker {
content: "【" counter(list-item, lower-roman) "】";
}（「2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説」より引用）
10. 疑似クラス「:default」
ラジオボタン、チェックボックスなどで、デフォルトでチェックされている要素を示す。
input:default {
box-shadow: 0 0 2px 1px coral;
}
input:default + label {
color: coral;
}（MDN より引用）
11. font-display プロパティ
@font-face の中で指定し、ダウンロード可能なフォントがダウンロードされる前にどのように表示されるのかを指定。大抵は swap を使う。
@font-face {
font-family: "Open Sans Regular";
font-weight: 400;
font-style: normal;
src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2");
font-display: swap;
}（「[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」」より引用）
その他、よく使うCSSハック
01. 複数行のテキストを省略
.box {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}例では、３行を超えるテキストが省略されます。
02. 画像のコンテンツのみに影：「drop-shadow」
.drop-shadow {
filter: drop-shadow(2px 4px 8px #585858);
}（「Web制作者が知っておくと便利なCSSの小ネタ」より引用）
03. セレクションにスタイル
マウスでドラッグしたテキストにスタイルを適用。
*::selection {
background-color: #8e44ad;
color: #fff;
}04. テキストにグラデーションなど
グラデーションだけでなく、画像もできる。
.text {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(to right, #4364f7, #6fb1fc);
}（「CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ」より引用）
参考URL
この記事が気に入ったらサポートをしてみませんか？