CSS Nite Shift14「ウェブデザイン行く年来る年」〜今 見直しておきたいCSSの新機能 2020
株式会社ICS 鹿野壮さん
Chromium版Edgeの登場
従来までのEdge
・Edge v18まで
・HTML/CSSのレンダリング：EdgeHTML
・JavaScriptの実行：Charka（チャクラ）
・他のモダンブラウザに比べてCSSやJavaScriptの機能が少なかった
Chromium版Edge
・Edge v78〜
・HTML/CSS：Blink（Chromeと同じ）
・JavaScriptの実行：V8（Chromeと同じ）
・他のモダンブラウザと同じだけCSSやJavaScriptの機能が使えるように
IE11シェア減少
多くのウェブサイトでIE11のサポートが終了
「IE11のシェア減少」
— CSS Nite (@cssnite) December 19, 2020
・日本 2018.1 16.43％→2020.12 4.13％
・世界 2018.1 3.2％→2020.12 1.3％
Twitter や Facebook、Apple、YouTubeなど多くのウェブサイトでIE11のサポートが終了
#cssnite
IE11に非対応のサイトではEdgeにリダイレクトされる機能の提供
→ 自分のサイトをリダイレクト対象として申請できる
テキストを縁取りする「text-stroke」
背景をくり抜く「background-clip」
要素を吸着する「position:sticky」
ユーザーのダークモードを判別する「prefers-color-scheme」
画像も切り替えができる
CSS Gridの自動配置
5. CSS Grid の自動配置
— CSS Nite (@cssnite) December 19, 2020
写真アルバムの敷き詰め等に使用
・auto-fit / auto-fill
コンテナに余裕がある場合、行列を追加する
・grid-auto-flow
敷き詰め方。dense を指定すると、敷き詰め
#cssnite
行数指定「line-clamp」
6. 行数指定の line-clamp プロパティ
— CSS Nite (@cssnite) December 19, 2020
2行以上のテキストを非表示にするなど。
ボックス内のテキストを2行にする
.box {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical; -
webkit-line-clamp: 3; /* 行数 */
}#cssnite
画像の嵌め込み方を指定「object-fit」
画像のアクペクト比を保ちながら画像を拡縮できる
backgroundではなくimgタグを利用するメリット
・フィルター／透明度などのCSSを用いた画像加工が容易
・画像の遅延ロードができる（loading=lazyの利用）
・最適な画像ファイルの読み込みができる（pictureタグとの組み合わせ）
2つの値のうち小さい方を利用する「min関数」
8. 2つの値のうち、小さい方を使える min() 関数
— CSS Nite (@cssnite) December 19, 2020
ブラウザ幅に合わせて、自然に拡大・縮小する文字など
小さい方のフォントサイズを使う
p {
font-size: min(30vw, 320px);
}
#cssnite
未来のCSS
FlexBoxのboxの間隔を指定する「gapプロパティ」
2021年以降にやってくるミライのCSS
— CSS Nite (@cssnite) December 19, 2020
1. Flexbox のための gap プロパティ
ボックス要素間の隙間を開けたい場合
Flexbox で要素感を 16px 設ける
.container {
display: flex;
gap: 16px;
}
※Edge 84~, Firefox 63~, Chrome 87, Safari TP~#cssnite
要素のアスペクト比を指定する「aspect-ratio」
2021年以降にやってくるミライのCSS
— CSS Nite (@cssnite) December 19, 2020
2. 要素のアスペクト比を指定できる aspect-ratio
要素のアスペクト比を16:9にする
.box {
aspect-ratio: 16/9;
}
※Chrome 88~#cssnite
CSSGridでアイテムごとに要素を詰める「Masonry」
2021年以降にやってくるミライのCSS
— CSS Nite (@cssnite) December 19, 2020
3. CSS Gridで列ごとにアイテムを積める Masonry
Pinterest のように列ごとにアイテムを積み上げる
.container {
display: inline-grid;
grid: masonry / repeat(3, 2ch);
masonry-auto-flow: next;
}
※現状、対応ブラウザなし#cssnite