今日のCSS4機能をcssnextで使用する

2011年9月から4年間、W3CはCSS4を開発しています。 カスケードスタイルシートの4番目のバージョンのモジュールは、CSS3に基づいて設計され、新しいプロパティと値でそれらを補完します。 この記事では、今日のCSS4機能の使用方法、cssnextについてお話ししたいと思います。



したがって、cssnextは、今日の最新のCSS構文を使用できるCSSコンパイラです。 新しいCSS仕様をより最新のコードに変換するため、ブラウザーの新機能のサポートを待つ必要はありません。

特徴

自動ベンダー接頭辞

ベンダープレフィックスは、PostCSS Autoprefixerプラグインを使用して自動的に追加されます（廃止される場合は削除されます）。

CSSプロパティの変数

root：ルートセレクターのcssnext機能により、無制限の数の変数を設定し、CSSプロパティで使用できます。

:root { --fontSize: 1rem; --mainColor: #ddd; } a { color: var(--mainColor); font-size: var(--fontSize); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

簡単な数式

calc（）プロパティの使用を許可します。 このプロパティは、単純な値だけでなく変数でも使用できます。

 :root { --fontSize: 1rem; } h2 { font-size: calc(var(--fontSize)*2); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグインのドキュメント

メディアクエリの変数

 @custom-media --small-viewport (max-width: 30em); @media (--small-viewport) { /*     */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

改善されたメディアクエリ構文

メディアクエリでmin-widthおよびmax-widthの代わりに式> =および<=の使用を許可します。

 @media (width >= 500px) and (width <= 1200px) { /*   */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

カスタムセレクター

独自のセレクターを作成できます。

 @custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { margin-top: 0; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

色修正のための関数

現在、非常に多くの色修飾子が使用可能です。 詳細はこちらをご覧ください 。

 a { color: color(red alpha(-10%)); } a:hover { color: color(red blackness(80%)); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

Hwbカラーのサポート（）

W3C CSS hwb（）色を使用してrgb（）またはrgba（）に変換できます。

 body { color: hwb(90, 0%, 0%, 0.5); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

50階調以上のグレー

グレー（）プロパティを使用する機能。 最初の引数として、0〜255または0〜100パーセントの値を使用できます。

 .foo { color: gray(85); } .bar { color: gray(10%, 50%); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

色#rrggbbaa

色を示すために4桁または8桁の値を使用できるようにします。

 .boo { color: #9d9c; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

カラーレベッカパープル

新しい色。

 .foo { background: rebeccapurple; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

フォントバリアントプロパティ

このプラグインを使用すると、フォントバリアントプロパティを、現在最も人気のあるブラウザーとより互換性のあるCSSに変換できます。

 h2 { font-variant-caps: small-caps; } table { font-variant-numeric: lining-nums; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

フィルター

10種類のCSSフィルターを使用できます。

• グレースケール
• セピア
• 飽和する
• 色相回転
• 転倒
• 不透明度
• 明るさ
• 対比
• ぼかす
• ドロップシャドウ

 .blur { filter: blur(4px); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

レムユニット

Rem単位はpxで返されます。

 h1 { font-size: 1.5rem; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

疑似クラス：エニーリンク

次を使用できます：リンクにany-linkクラス。

 /* : */ nav :any-link > span { background-color: yellow; } /* : */ nav :link > span, nav :visited > span { background-color: yellow; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

疑似クラス：一致

クラスの使用を許可します。matches（）。

 /* : */ p:matches(:first-child, .special) { color: red; } /* : */ p:first-child, p.special { color: red; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

擬似クラス：なし

前の擬似クラスに似たものですが、結果は反対です。

 p:not(:first-child, .special) { color: red; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント

アルファカラー

rgbaカラーのカラーフォールバックを追加します（古いブラウザー用）。

 body { background: rgba(153, 221, 153, 0.8); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕様 | プラグインのドキュメント



また、cssnanoには、上記のすべてに加えて、サードパーティのCSSファイルを最終的なCSSファイルにインポート（@import）したり、CSSNanoを使用して最終的なCSS出力を制作および圧縮したりするなど、多くのボーナス機能が含まれています。

使用する

お気に入りのビルドシステムGrunt 、 Gulp 、 Broccoli 、 Webpack 、 Flyなどのプラグインとしてcssnextを使用できます。 または、PostCSSのプラグインとして。



私は後者のオプションを好みます。 実際、私は自分のプロジェクトを開発するための開始アセンブリでそれを使用します。



cssnextの機能に興味を持っていただけたことを願っています。



それだけです ご清聴ありがとうございました！