「CSS」カテゴリーアーカイブ
【cssnextをすぐ触りたい】2016年夏。cssnextがgulpで動かしてざっくり理解する
「cssnextとは」というのは他の良記事にお任せします。
とにかくよくわからないけど触っとこう、という説明書読まない派の為に動くものを外国の方のgithub見てこれを作りました。(gulpfile以外ほぼまま)
以下cssnextに対しての現時点での理解。(勉強つう)
PostCSS-cssnext(PostCSSのプラグイン群)っていうプラグインのパッケージ名がcssnextで、ブラウザ間で解釈が違うプロパティ(-webkit-などのプリプロセッサー)や、まだ未実装なプロパティをトランスパイルすることで次世代のCSSを先取りできる。ブラウザの実装を待たなくていい。(ECMAScript2015をbabelでトランスパイルしてレガシーなのにも対応できるように)、自分で定義したプロパティをSassのように変数にして使えたり、ネストも使えたりできる。
CSSにそれらの「nextの記法」を直接書いて、トランスパイルして、生成されたCSSを使う。
例1
したの様にrootに「カスタムプロパティ」をCSS内で定義(今のところの決まり事)して、
:root {
--fontSize: 1rem;
--mainColor: #12345678;
--highlightColor: hwb(190, 35%, 20%);
}
--[customePropertyName]と書く。
↓
var()で値の箇所で呼び出す。calcは返された値を計算してくれるメソッド
body {
color: var(--mainColor);
font-size: var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px);
}
トランスパイルされた出力
↓
body {
color: rgba(18, 52, 86, 0.47059);
font-size: 16px;
font-size: 1rem;
line-height: 24px;
line-height: 1.5rem;
padding: calc(0.5rem + 1px);
}
例2
定義
↓
/* custom selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading { margin-top: 0 }
custom-selectorというプラグインで--headingというセレクタを定義、値をh1,h2、、としている
:で呼び出し、使っている。(custom selectorsは当然var()ではない。)
生成されるCSS
↓
/* custom selectors */
h1,
h2,
h3,
h4,
h5,
h6 { margin-top: 0 }
と理解しました。
cssnextのplayground
https://cssnext.io/playground/
cssnextの記法
でわまたーー
:scope https://developer.mozilla.org/ja/docs/Web/CSS/:scope
reference https://css-tricks.com/saving-the-day-with-scoped-css/
support https://caniuse.com/#feat=style-scoped
[html]
<style> #wrap{ min-width:410px; text-align: center; height: 300px; background: #e2e2e2; } #wrap:before{ display: inline-block; vertical-align: middle; content: ""; height:100%; margin-right: -0.25em; } #inner{ display: inline-block; vertical-align: middle; width: 200px; padding: 10px 15px; } </style> </head> <body> <div id="wrap"> <div id="inner"> <p>ふぁふぁふぁふぁふぁ</p> </div> </div> </body> [/html]