株式会社プライムネットワークスタッフが、html5やCSS3、phpなどのWEB技術に関することやワードプレスなどのCMSについて学んだことなどを紹介して行きたいと思います。
CSSはどんどんと進化しており、いまではJavaScriptがなくてもできることが増えてきていますよね。
そして、今回紹介するのがCSSに追加されたカスケードレイヤー。
このカスケードレイヤーを使うと、CSSの詳細度とスタイルの順番をカスケード内で明示的に階層化でき、これまでのCSSの実装方法が大きく変わると期待されています。
どういうことかというと、CSSスタイル適用の優先順位をルールとしてまとめることができるCSSの新機能で、これまでであれば、CSSは記述された順番で後に書かれているものが優先されるので、スタイルの適用順序を調整しようとすると、ソースの記述順を大幅に変更したり、セレクターや「!important」などを使うことになり、複雑化しやすく、メンテナンス性に難があったのですが、このカスケードレイヤーがあればその手間が省け、意図しない不具合の発生も抑えられるようになります。
通常、同じ優先度の場合、ファイルの中で上よりも下に書いたスタイルが適用されるのですが、カスケードレイヤー、つまり@layerを使うことで、優先度を無視してグループごとにスタイルの優先度を設定することができるようになります。
レイヤーを定義するには、 @の後にレイヤー名を記述するだけ。
