「The State of CSS 2021」で振り返るCSSの近況（後編）

2022年3月27日 12:52

引き続き、昨今のCSS状況を「The State of CSS」にて振り返ります。
以下のサイトに掲載されている内容のうち、使用率が高いもの、馴染みがないものや忘れているものを中心に調べ直しています。

今回は後編として、インタラクション、タイポグラフィ、アクセスビリティ、フレームワーク他についてまとめます。

前編はこちら

インタラクション関連

主に、子要素や兄弟要素、疑似要素等、当該の要素以外をポインターのトリガーにする際に重宝します。

以下の記事にもありますが、カードの内のボタンホバーでカード全体を変化させたい、兄弟要素を変化させたい、特定部分のみをホバーの有効化したい等々、CSSだけで細かい部分に手が届くようになっています。

モダンブラウザであれば問題なく利用できるため、完全市民権を得たプロパティです。

私は主に英字表記を大文字や小文字に変えるために使用しています。スクリーンリーダーやSEOの観点からも、装飾理由で文言自体を変更することは避けたいため重宝します。

webフォントを利用時、ローディングまで文字が表示されないことを避けるためによく使用されています。使用率を見る限り、しっかり定着した模様。

指定行数以降を省略できるプロパティ。jsを利用することなく実装でき、ブラウザ対応状況を見てもしっかりスタンダードとして定着しています。

いわゆるタブキーによるフォーカスの有無と順序を指定できる、HTMLの属性です。あらゆるデバイスでアクセスされることを考慮し、キーボードだけで操作を完結させるために必須となります。

WAI-AREAに関する内容は別途まとめるので割愛。

最後に気になっていた昨今のCSSフレームワーク人気事情を取り上げておきます。以下がState of CSS 2021内では利用率ベスト3にフレームワーク。

昨今における超有名フレームワークの一つ。いわゆるユーティリティクラス（汎用・共有処理をまとめたもの）を付与していき、クラス名でどんなCSSが付与されているか判断できるのが特徴です。

CSSでプロパティを練り上げることなく、HTMLで要素にクラス付与するだけでレイアウトが完結することや、学習コストの低さがメリットです。

個人的な所感は、要素のスタイル属性に直接書いているような扱いであり、クラス名が長くなること、やや融通が利きにくい（別途設定が必要）等の理由であまり好んではいません。

非常に軽量で、jsに依存しない、モバイルファースト等、現在求められている要素が多いためか、ここ数年高い利用率を誇ります。

個人的には、グリッドレイアウト等を高速で実現できるため、このフレームワークをベースに味付けをしていくのが現時点で優秀な方法なのではないかと思っています。

中国アリババが開発したフレームワーク。これに沿ったAngluar/React/Vueフレームワークが存在する等汎用性が高く、Bootstrapのようになんでもそろっているのが利点。逆にBootstrapほどクセが強くないためあ、使いどころは多そうです。

以上、参考になれば幸いです。

この記事が気に入ったらサポートをしてみませんか？