Closed11
State of CSS 2021【メモ】
使ったが50%越えでここ3年で伸びている項目を中心に、知らないやつをちょいと調べていく。
レイアウト
subgrid
grid要素内をさらにgridを使ってコントロールできる。
参考
position: sticky
要素をスクロール時に固定表示にする
参考
gap
felxboxでのコンテンツ間のpxを指定できる。
参考
シェイプ&グラフィックス
object-fit
clip-path
CSS Filter Effects
インタラクション
pointer-events
アクセシビリティ
HTMLのtabindex属性
HTMLのARIA属性
そのほかの機能
CSS Variables (カスタムプロパティ)
calc()
流石に知っている。
CSS比較関数
技術
adopt:sass
assess:Emotion,Styled Components、Tailwind CSSなど
満足度はPostCSSが高い
CSSフレームワーク
- vanilla-extract
- こいつ謎??
- tailwind
- Styled Components
- CSS Modules
- Emotion
- だいぶEmotionも来ているイメージ
感想
大きな変化は感じなかった。
vanilla
CSS In 2022
ついでにJSer.infoで初回されていた「CSS in 2022」も
2022年にブラウザへと実装される/されているCSSの機能について紹介されています。
ホットリストの内容だけ確認。
いらんか
aspect-ratio
aspect-ratio は CSS のプロパティで、ボックスの推奨アスペクト比を設定します。これは auto の大きさを計算したり、他のレイアウト関数で使用されたりします。
aspect-ratio: 1 / 1;
aspect-ratio: 1;
/* グローバル値 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: unset;
vanilla-extract
- CSS Moduleの後継っぽい感じ
- TypeScriptでかける点が魅力
このスクラップは2022/01/03にクローズされました