2020-07-20 CSS変数 / CSSの新しい疑似クラス:is()と:where() / 308 Permanent Redirect
CSS カスタムプロパティ (変数)
CSSの標準の変数機能。
--main-bg-color: brown; が変数定義部分。
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}
CSSの新しい疑似クラス:is()と:where()
/* BEFORE */
.embed .save-button:hover,
.attachment .save-button:hover {
opacity: 1;
}
/* AFTER */
:is(.embed, .attachment) .save-button:hover {
opacity: 1;
}
/* sanitize.css */
svg:where(:not([fill])) {
fill: currentColor;
}
/* author stylesheet */
.share-icon {
fill: blue; /* 詳細度がより高いため、上書きされる */
}
主にこの機能は、標準的なCSSで役立ちます。SassなどのCSSプリプロセッサを使用している場合は、代わりにネストすることをお勧めします。
SCSS を使っていれば必要なさそう。
308 Permanent Redirect
POST メソッドでは代わりに 308 Permanent Redirect を使用することが推奨されています。
ref. 301 Moved Permanently - HTTP | MDN
POSTのリダイレクト先の明示は301ではなく308を使う。