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の機能に興味を持っていただけたことを願っています。
それだけです ご清聴ありがとうございました！