将来のCSS:時と他のステートメントの最初の観察

CSSでは、メディアクエリを使用して異なるデバイスの選択を行います.メディアクエリは、画面サイズ、ピクセル密度、あるいは形式などの多数の条件に基づいてデバイスを選択する簡単な方法を与える:すなわち、印刷または画面.
これは次第に時間とともに複雑になってきた.そして今ではしばしば矛盾する多くの条件を均衡させている.
新しいCSS Conditional Rules 5 Specificationは、この問題を解決しようとしている.これらは最終的に直接バニラCSSに条件文を作成することができます.どのように動作を見てみましょう!

時サポート

現在、ブラウザはネイティブ242479142/@whenをサポートしていないが、それはすぐに変更される可能性があります.@else/@whenのフルサポートを以下に示します.

CSSでの

私たちが@elseをサポートしている780 px幅未満のスクリーンサイズに適用したい1セットの規則を持っていると仮定しましょう.以前に、私たちは別々にこれらのもののために選択する@when質問を使用しなければなりません.複数の異なるものを選択するとき、これは少し乱雑になりました.@elseとdisplay: flexでは以下のようになります.

@when screen and (max-width: 780px) and supports(display: flex) {
    .my-element {
        color: red;
        display: flex;
    }
}
@else {
    .my-element {
        display: block;
    }
}

また、複数の条件をチェーンすることができます.例えば、私たちには、3つのシナリオがあると言いましょう:@mediaをサポートしている780 pxの最大幅を持つスクリーン、より大きいスクリーン、そして、他のすべてを支持するスクリーン.その場合、複数の条件を持つことができます.

@when screen and (max-width: 780px) and supports(display: flex) {
    .my-element {
        color: red;
        display: flex;
    }
}
@else screen and supports(display: flex) {
    .my-element {
        display: flex;
    }
}
@else {
    .my-element {
        display: block;
    }
}

あなたが期待するように、私たちはさらに@whenステートメントを持つことができますが、上記はCSSで実行されるとき、@elseとdisplay: flexのどちらが役に立つかという考えをあなたに与えます.

結論

条件文は、バニラCSSにされたことがないので、最後にすぐに来て参照してくださいに最適です.また、我々がメディア問合せをする方法を非常に単純にするつもりです.我々は既にSASSのようなサードパーティ製のパッケージを使用している場合はCSSでロジックを持っていますが、CSSにネイティブになると、プリプロセッサを使用する必要がなくなります.