なぜこれまで活用されてこなかったの？実は便利な9つのCSS機能をご紹介！

CSSの歴史は古く、1994年から開発がはじまっており、現在のCSS4モジュールなど継続的に新しい機能が追加されています。

今回はそんな広いCSSの世界から実はあまり使われていない機能9つ紹介します。

1. CSS clac()

Clac()自体は広く知られていますが、この場でもう一度紹介するほど重要なのです。例のようにエレメントの幅と位置をピクセルで指定することに使えます。

2. pointerメディアクエリ

タブレットやPC、スマートフォンなど様々なデバイスが存在する現代のトレンドに適応するための機能です。none(ポインティングデバイスが存在しない)、coarse(タッチスクリーンやモーションセンサーデバイス等)、fine(マウスやタッチパッド等)の入力値によりデバイスを識別し、ボタンのデザインを変更したりする際に活用します。

3. CurrentColor variable

CSS3で追加された機能。“現在の要素の色”を引き継いで指定することが出来るのでわざわざコードを指定する手間が省けます。

4. :valid, :invalid, :empty pseudoクラス

:validと:invalid pseudoクラスはフォーム入力などの過不足を知らせる際に使用します。例では、過不足ない場合は緑で、そうでなければ赤で表示。

:empty pseudoクラスは値入力が無い時の分岐に活用可能で、その項目を非表示にさせたりできます。

5. CSSでのカウンター実装

リストを作りたい際に<ol>要素やJavascriptを使わずにCSSのみでも生成することが出来ます。

6. table-layout: fixed

テーブルを表示させる時には、きちんと収まるようにセルの大きさに気を配らなければなりません。table-layout: fixedを使えばページにフィットするテーブルが簡単に作れます。

7. 簡単なフォーム確認文表示

CSSのビギナーでも知っているようなテクニックかもしれませんが、ほとんどと言っていいほど活用されていません。Javascriptを使わなくともフォームによるメール送信などの確認のメッセージを表示できるのです。

8. 関数を利用したnth-child()

あまり知られていませんが、この機能は様々な場面で活用することが可能です。例のように数学的表現方法で値を指定することが出来ます。

9. animation-fill-mode

アニメーションをつけたいときは対象の要素に例のようにanimation-fill-modeを指定して活用します。

今後はブラウザーで稼働するネイティブアプリのようなファンクションが増えていく傾向にあります。今回紹介したようなCSSを使いこなせれば、シンプルかつ機能的なWebデザインが可能となります。これを参考にぜひ活用してみることをおすすめします。

この記事は「9 Underutilized Features in CSS」を翻訳・参考にしています。