これからの主流！？「カスケードレイヤー」の仕組み

2023年10月25日2023年10月29日

CSSプロパティの「優先順位」を決める「新たな仕組み」として「カスケードレイヤー（Cascade Layer）」が主要なブラウザに既に搭載されています。

今後は、この「カスケードレイヤー」を活用したCSSの実装が増えていく可能性があります。

「カスケードレイヤー」を利用するメリットと作り方

WEBサイトのデザインの修正や更新など、「既存のCSS」に新たに「CSSプロパティ」を追加してデザインを修正する必要がある場合「詳細度」を考慮して「CSSセレクタ」を指定していく必要があります。

「詳細度」を上げるために「セレクタだらけになってしまった」という経験をお持ちの方もいるのではないでしょうか。

例えば、

.main  > .content > .subcontent > .description > .sentence {
    margin: 20px;
}

のようにセレクタがどんどん増えていきます。

元の設定がセレクタを指定し尽くしてしまっていたら・・・優先度を最大まで引き上げる「!important」を利用するしかないというケースもあります。

そのような「CSS設定の気苦労」を解消してくれるのが「カスケードレイヤー」という仕組みです。

「カスケードレイヤー」の作り方

カスケードレイヤーは下記のように作ります。

@layer レイヤー名1, レイヤー名2, レイヤー名3・・・

この時に「右側に書いているレイヤー」が優先されます。

「レイヤー名１」より「レイヤー名２」が優先され、さらに「レイヤー名２」より「レイヤー名３」が優先されます。

【レイヤーの優先順位】
レイヤー名1　＜　レイヤー名2　＜　レイヤー名3

例えば、

@layer common-layout, main-layout, sub-layout;

のようなカスケードレイヤーを作成すると、「sub-layout」が一番に優先されます。

その次に「main-layout」で、最後に「common-layout」という順でCSSが適用されます。

カスケードレイヤーの内容の定義

カスケードレイヤーの内容を定義する場合は、

@layer レイヤー名 {
    セレクタ {
        プロパティ名： 値;
    }
}

のように定義します。

例えば、

@layer common-layout {
    .main-title {
        font-size: 2rem;
    }
}

のような形になります。

全体を記述してみると、

@layer common-layout, main-layout, sub-layout;

@layer common-layout {
    .main-title {
        font-size: 2rem;
    }
}

@layer main-layout {
    .main-title {
        font-size: 3rem;
    }
}

@layer sub-layout {
    .main-title {
        font-size: 4rem;
    }
}

のようになります。

この場合は、「sub-layoutレイヤー」の設定が適用されます。

カスケードレイヤーの内容を定義する前に「カスケードレイヤーの適用順序」を指定しておく必要があります。

下記のようにカスケードレイヤーの内容を定義してから「カスケードレイヤーの適用順序」を指定しても無効となります。

@layer common-layout {
    .main-title {
        font-size: 2rem;
    }
}

@layer main-layout {
    .main-title {
        font-size: 3rem;
    }
}

@layer sub-layout {
    .main-title {
        font-size: 4rem;
    }
}

@layer common-layout, main-layout, sub-layout;

それぞれの「レイヤー内の優先度」は「レイヤーの優先順位」には影響がありません。

レイヤー外に定義した場合

「CSS」をレイヤー外に定義した場合は、「レイヤー外に定義したCSS」が優先されます。

例えば、

@layer common-layout, main-layout, sub-layout;

@layer common-layout {
    .main-title {
        font-size: 2rem;
    }
}

@layer main-layout {
    .main-title {
        font-size: 3rem;
    }
}

@layer sub-layout {
    .main-title {
        font-size: 4rem;
    }
}

.main-title {
    font-size: 5rem;
}

上記の場合は、「レイヤー外」に定義した「font-size: 5rem;」が適用されます。

名前の無い「無名レイヤー」を作成した場合

名前の無い「無名のレイヤー」を作成することもできます。

@layer {
    セレクタ {
        プロパティ名： 値;
    }
}

のように「無名のレイヤー」を定義することができます。

例えば、

@layer common-layout, main-layout, sub-layout;

@layer common-layout {
    .main-title {
        font-size: 2rem;
    }
}

@layer main-layout {
    .main-title {
        font-size: 3rem;
    }
}

@layer sub-layout {
    .main-title {
        font-size: 4rem;
    }
}

@layer {
    .main-title {
        font-size: 5rem;
    }
}

のように定義します。

「無名レイヤー」は上記のように「名前付きレイヤー」の後に定義すると、「無名レイヤー」が優先して適用されます。

しかし、下記のように「名前付きレイヤー」の前に「無名レイヤー」を定義した場合は「名前付きレイヤー」が優先して適用されます。

@layer {
    .main-title {
        font-size: 5rem;
    }
}

@layer common-layout, main-layout, sub-layout;

@layer common-layout {
    .main-title {
        font-size: 2rem;
    }
}

@layer main-layout {
    .main-title {
        font-size: 3rem;
    }
}

@layer sub-layout {
    .main-title {
        font-size: 4rem;
    }
}