【CSS】@import?@charset?使っているけどよくわからない「At-Rules of CSS」

CSSのat-rule、皆さん使ってますよね?
どんなものがあって、どういう構文で成り立っているのか整理してみます。

@[KEYWORD] (ROLE);

これがCSSのルールです。

@charset "UTF-8";

を見ると「あ〜、それのこと」と思うのではないでしょうか。

それでは色々なパターンを見ていきます。

@charset

@charset "UTF-8";

上記でもご紹介した文字セット定義です。

@import

@import "global.css";

外部CSSを読み込むときのルールです。

@document

@document url(http://unitopi.com/), domain(unitopi.com)

特定のページのみにスタイルを適用したいときに使います。
urldomainのほかにも指定方法がありますが、Firefoxしか対応していないなど、サポート状況が芳しくありません。

@font-face

@font-face{
    font-family: "myfont";
    src: url('myfont.woff2');
}

これはよく使うルールの一つですね。ちなみに@RULE {...}とすることで複数条件などを入れることが出来ます。

@keyframes

@keyframes pulse{
    0%{
        background-color: #333333;
    }
    100%{
        background-color: #555555;
    }
}

これも最近ではよく目にします。キーフレームアニメーションの開始と終了(途中も定義可能)を定義します。

@media

@media only screen and(min-device-width:320px) and (max-device-width:480px){
    width: 100%;
}

@media print{
}

レスポンシブデザイン、スマートフォン対応などでよく見かける対応方法です。
特定の画面にスタイルを適用させるために条件文を含んでスタイルを適用します。
printに関しては印刷用スタイルを定義することができます。

なお、mediaの種類はこんなものがあります。

all すべての環境
screen パソコン画面
tty 文字幅固定の機器
tv テレビベースのウェブブラウザ
projection プロジェクタ

などなど

まとめ

いかがでしたか?
あまり心躍るワクワク系の内容ではなかったですが、CSS自体の定義という意味ではメタデータを扱ったり、条件情報をあつかったり、記述的情報を伝達するために必要不可欠な構文となっています。
普段使うものも多くはないので、サラッと覚えておきましょう!

フォローして続編をチェック

@universionsをフォロー