@document でメニューのアクティブ状態を指定

• @document

現在 @document 規則は Firefox だけが対応している。

この規則を使うと、URL をもとにしてスタイルを適用する・しないを分けることができる。これにより、やろうと思えば CSS だけでもメニューのアクティブ状態を表現することができるになった。

/* Firefox でこの規則を使うには -moz- プレフィックスをつける */
@-moz-document url-prefix(http://example.com/blog/) {
    .nav__item__link[href*="blog"] {
        font-weight: bold;
    }
}

@-moz-document url-prefix(http://example.com/work/) {
    .nav__item__link[href*="work"] {
        font-weight: bold;
    }
}

@-moz-document url-prefix(http://example.com/about/) {
    .nav__item__link[href*="about"] {
        font-weight: bold;
    }
}

はてなブログのデザインをカスタマイズする際にも、以下のように書けば「記事ページだけに〜を適用する」などができて、CSS だけで触れる場所も増えそう。

@-moz-document url-prefix(http://name.hatenablog.com/entry/) {
    ...
}

サイトの言語ごとにスタイルを変えることもできるし、使える幅が広そうな規則だと思う。