元の記事は
https://2021.stateofcss.com/ja-JP/
The State of CSSは年に1度のCSSに関してのレポートであり、JavaScriptバージョンは毎年チェックしていたが、今年はCSSもチェックしました。
レポート全体を見ながら直近3年で伸びていて、かつ利用率や満足度が50%を越えている注目度の高い技術についてチェックしていきます。
機能
CSSに備わっているプロパティをカテゴリ毎に分けて確認します
レイアウト
- 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
- 画像をコンテナにフィットしたサイズにトリミングする
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
- clip-path
- 内部のコンテンツは表示され、外部のコンテンツは非表示になるクリッピング領域を作成する
- CSS Filter Effects
- 画像の彩度、明度、コントラスなどを変更したり、ぼかしを加えたり出来る
https://code-kitchen.dev/css/filter/
インタラクション
- pointer-events
- 要素のクリックイベントをキャンセルする
アクセシビリティ
- HTML：tabindex属性
- Tabキーによるフォーカスの移動順序などを指定する
https://www.tagindex.com/html5/attribute/tabindex.html
技術・フレームワークなど
注目度の高いものをピックアップ
Tailwind CS
昨年から騒がれていれ次戦投入しているプロダクトも多いイメージ。
クラス名を考えなくて良い所が個人的は楽で好き。
順当に満足度も利用者も上がっていて、今後はtailwindがしばらく中心になりそう。
Styled Components
CSS in JSのライブラリの1つ。2020年ぐらいにReactとの掛け合わせで流行って、今も多くのプロダクトで使われている印象。
https://styled-components.com/
Emotion
CSS in JSのライブラリの1つ。個人的なイメージとしてはStyled Componentsの上位互換。
TypeScriptとの相性が良い。
https://emotion.sh/docs/introduction
vanilla-extract
今回初めて知ったライブラリ。
CSS inJSではなく、CSS Module + TypeScriptというイメージ。
https://vanilla-extract.style/
まとめ
最近はサーバー周りの開発が多く、CSSを全然触っていないのでメリットをイメージし辛い。
個人で何か作る際もCSSはショートカットしたりなど、毛嫌いしている節があるので、定期的にトレンドぐらいは追っておきたいなーと思った。
元のスクラップ