The State of CSS 2021のメモ

  • 2022年1月5日
  • 2022年2月5日
  • HTML・CSS
  • 36view

元の記事は

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
    • 内部のコンテンツは表示され、外部のコンテンツは非表示になるクリッピング領域を作成する
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html
  • CSS Filter Effects
    • 画像の彩度、明度、コントラスなどを変更したり、ぼかしを加えたり出来る

https://code-kitchen.dev/css/filter/

インタラクション

  • pointer-events
    • 要素のクリックイベントをキャンセルする
https://coliss.com/articles/build-websites/operation/css/css-pointer-events.html

アクセシビリティ

  • HTML:tabindex属性
    • Tabキーによるフォーカスの移動順序などを指定する

https://www.tagindex.com/html5/attribute/tabindex.html

 

 

技術・フレームワークなど

注目度の高いものをピックアップ

Tailwind CS

昨年から騒がれていれ次戦投入しているプロダクトも多いイメージ。

クラス名を考えなくて良い所が個人的は楽で好き。

https://tailwindcss.jp/

順当に満足度も利用者も上がっていて、今後は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はショートカットしたりなど、毛嫌いしている節があるので、定期的にトレンドぐらいは追っておきたいなーと思った。

元のスクラップ

https://zenn.dev/gunners6518/scraps/a8a08c99f44770

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping