Closed11

State of CSS 2021【メモ】

てりーてりー

使ったが50%越えでここ3年で伸びている項目を中心に、知らないやつをちょいと調べていく。

https://2021.stateofcss.com/ja-JP/

レイアウト

subgrid

grid要素内をさらにgridを使ってコントロールできる。

参考
https://qiita.com/oreo/items/5301dcb1128f20cc7d97

position: sticky

要素をスクロール時に固定表示にする

参考
https://qiita.com/ari-chel/items/c1ede1f27a37129a7cbe

gap

felxboxでのコンテンツ間のpxを指定できる。

参考
https://developer.mozilla.org/ja/docs/Web/CSS/gap

てりーてりー

シェイプ&グラフィックス

object-fit

clip-path

CSS Filter Effects

てりーてりー

そのほかの機能

CSS Variables (カスタムプロパティ)

calc()

流石に知っている。

CSS比較関数

てりーてりー

技術

adopt:sass
assess:Emotion,Styled Components、Tailwind CSSなど

満足度はPostCSSが高い

てりーてりー

CSSフレームワーク

  • vanilla-extract
    • こいつ謎??
  • tailwind
  • Styled Components
  • CSS Modules
  • Emotion
    • だいぶEmotionも来ているイメージ
てりーてりー

CSS In 2022

ついでにJSer.infoで初回されていた「CSS in 2022」も

https://www.bram.us/2021/12/27/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;

https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio

このスクラップは2022/01/03にクローズされました