CSS Nite Shift14「ウェブデザイン行く年来る年」〜今 見直しておきたいCSSの新機能 2020

CSS Nite Shift14「ウェブデザイン、行く年来る年」

株式会社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のシェア減少」
・日本　2018.1 16.43％→2020.12　4.13％
・世界　2018.1 3.2％→2020.12 1.3％

Twitter や Facebook、Apple、YouTubeなど多くのウェブサイトでIE11のサポートが終了

#cssnite

— CSS Nite (@cssnite) December 19, 2020

IE11に非対応のサイトではEdgeにリダイレクトされる機能の提供
→　自分のサイトをリダイレクト対象として申請できる

最新の Web サイトに対応するための Internet Explorer から Microsoft Edge へのリダイレクト

テキストを縁取りする「text-stroke」

-webkit-text-stroke-color - CSS: カスケーディングスタイルシート | MDN

背景をくり抜く「background-clip」

background-clip - CSS: カスケーディングスタイルシート | MDN

要素を吸着する「position:sticky」

position - CSS: カスケーディングスタイルシート | MDN

ユーザーのダークモードを判別する「prefers-color-scheme」

prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN

画像も切り替えができる

: The Picture element - HTML: HyperText Markup Language | MDN

CSS Gridの自動配置

グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN

5. CSS Grid の自動配置

写真アルバムの敷き詰め等に使用

・auto-fit / auto-fill
　コンテナに余裕がある場合、行列を追加する
・grid-auto-flow
　敷き詰め方。dense を指定すると、敷き詰め

#cssnite

— CSS Nite (@cssnite) December 19, 2020

行数指定「line-clamp」

-webkit-line-clamp - CSS: カスケーディングスタイルシート | MDN

6. 行数指定の line-clamp プロパティ
2行以上のテキストを非表示にするなど。

ボックス内のテキストを2行にする
.box {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical; -
webkit-line-clamp: 3; /* 行数 */
}#cssnite

— CSS Nite (@cssnite) December 19, 2020

画像の嵌め込み方を指定「object-fit」

画像のアクペクト比を保ちながら画像を拡縮できる
backgroundではなくimgタグを利用するメリット
・フィルター／透明度などのCSSを用いた画像加工が容易
・画像の遅延ロードができる（loading=lazyの利用）
・最適な画像ファイルの読み込みができる（pictureタグとの組み合わせ）

object-fit - CSS: カスケーディングスタイルシート | MDN

2つの値のうち小さい方を利用する「min関数」

min() - CSS: カスケーディングスタイルシート | MDN

8. 2つの値のうち、小さい方を使える min() 関数
ブラウザ幅に合わせて、自然に拡大・縮小する文字など

小さい方のフォントサイズを使う
p {
font-size: min(30vw, 320px);
}

#cssnite

— CSS Nite (@cssnite) December 19, 2020

未来のCSS

FlexBoxのboxの間隔を指定する「gapプロパティ」

2021年以降にやってくるミライのCSS

1. Flexbox のための gap プロパティ
　ボックス要素間の隙間を開けたい場合
　Flexbox で要素感を 16px 設ける

.container {
display: flex;
gap: 16px;
}

※Edge 84~, Firefox 63~, Chrome 87, Safari TP~#cssnite

— CSS Nite (@cssnite) December 19, 2020

要素のアスペクト比を指定する「aspect-ratio」

2021年以降にやってくるミライのCSS
2. 要素のアスペクト比を指定できる aspect-ratio

要素のアスペクト比を16:9にする
.box {
aspect-ratio: 16/9;
}

※Chrome 88~#cssnite

— CSS Nite (@cssnite) December 19, 2020

CSSGridでアイテムごとに要素を詰める「Masonry」

2021年以降にやってくるミライのCSS
3. CSS Gridで列ごとにアイテムを積める Masonry

Pinterest のように列ごとにアイテムを積み上げる

.container {
display: inline-grid;
grid: masonry / repeat(3, 2ch);
masonry-auto-flow: next;
}

※現状、対応ブラウザなし#cssnite

— CSS Nite (@cssnite) December 19, 2020

参考

Browser Market Share Japan | StatCounter Global Stats