State of CSS の2021年版が今年もでたのでみてみた
来年はIEのサポートが正式に不要になるということで、これまでIEで使えないからと疎かにしていたCSSの知識をキャッチアップしたい
よく知らなかったものを取り上げる
レイアウト
サブグリッド
CSSグリッドで要素の高さを揃えることができたが、隣り合ったグリッドアイテムの中の要素の高さまでは揃えることができない
そのグリッドアイテム要素に対してgrid-template-columns: subgrid;やgrid-template-rows: subgrid;を指定すると、アイテム毎に高さを指定することができる
サブグリッド - CSS: カスケーディングスタイルシート | MDN
いまはFireFoxでしか使えないので、そこまで抑えなくてよさそう
CSSマルチカラム
段組レイアウトをサポートするCSS
レイアウト内の列の数、列から列へのコンテンツの流れ、列間のギャップサイズ、列の分割線、外観を指定できる
段組みレイアウトの使用 - CSS: カスケーディングスタイルシート | MDN
CSS writing-mode property
縦書きや、右から左など、さまざまな国際的な書き方を定義できるCSS
縦書きWeb普及委員会のサイトがわかりやすくてカワイイ
CSS Writing Modes の仕様解説│縦書きWeb普及委員会
CSS Container Queries
レスポンシブデザインを作成するときメディアクエリを使用することが必須だが、ブラウザのwindow幅でしかCSSの切り替えができないので、window幅が基準ではなく、親セレクタの幅を基準に子要素のセレクタに対してCSSを適応していく方法
CSS Container Queries - CSS: Cascading Style Sheets | MDN
Shapes & Graphics
あまり凝ったデザインを実装しないのでほとんど知らなかった
CSS Shapes
例えば文章中の画像に指定すると、長方形の周りを折り返していた文章が、指定した形状の周りを折り返すようになる
CSS シェイプ - CSS: カスケーディングスタイルシート | MDN
clip-path
指定した形状でクリッピング領域を作る
指定した形状の領域の内部の部分は表示され、外側の部分は非表示になる
clip-path - CSS: カスケーディングスタイルシート | MDN
CSS Blend Modes
レイヤーを重ねたときにどのように重ねて表示するかの設定
<blend-mode> - CSS: Cascading Style Sheets | MDN
backdrop-filter
[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説 | コリス
perspective
z=0 の平面とユーザーとの間の距離を定めて3D配置された要素に遠近感を与えるプロパティ
perspective - CSS: カスケーディングスタイルシート | MDN
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう - ICS MEDIA
Intrinsic Sizing
コンテンツに基づいて要素のサイズを決定したいときに、内因性サイジングを使うとよいらしい
Intrinsic size (内在サイズ) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める | コリス
accent-color
HTMLフォームの一部の要素のアクセントカラーを設定する
CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる | コリス
