PostCssで勧告ちょい前くらいまでのCSSをビルドする

最近はGolangの勉強中心のみやっててちょっと疲れたので閑話休題っす。


要約3行

PostCss
ボイラープレート
書く


Example

やったこと

前に「cssのclearfixハックの代わりとなる記法がChromeに実装される」っていうので注目を集めたこともあって、
ちょっとcssビルド周りの設定を見直しがてら、ここで一旦jsやhtmlじゃなくて最新仕様のcssだけpostcssのcliでビルドする、という主旨でやってみます。
使うもの、postCSSのcliツール。

ここ1年以上、postCSS使用の際はビルドツールの雄webpackからpostcssを呼んでいましたが、多分そっちはやりすぎっていう向きも多いかと思うので、今回はcliでのビルドの紹介に留めます。
(というか単体でのビルドやったことなかったので。)


PostCss

概要

PostCSSは各種css変換プラグインを通すためのAPIを提供するツールです。好きなコンパイラ設定を個々に導入できるイメージです。
cssフレームワークのBootstrapはsassからpostcssになったりと、そこそこ使われている場面があります。

PostCSSプラグインには、もちろんSASS記法を高速コンパイルするものもあります。
ですが、SASSが事実上のデファクト(?)とはいえ、独自記法に関しては今回の趣旨と違うため導入手順は割愛します。

プラグインの追加

特にcliで呼ぶ場合、コマンドで指定してもいいですが、npmで各プラグインをインストール後、
こういう設定ファイルを書くと便利です。

{
  "use": [
    "postcss-import",
    "postcss-cssnext",
    "postcss-flexbugs-fixes",
    "postcss-flow-root",
    "postcss-grid-kiss"
  ],
  "postcss-flow-root" : {
    "fallback" : "clearfix"
  },
  "input": "src/index.css",
  "output": "build/bundle.css"
} 

コンパイル

postcss -c .postcssrc.json 

代表的なPostCssプラグイン

cssnext(postcss-cssnext)

cssnextは幾つかのPostCSSプラグインがあらかじめ同梱されてるPostCSSプラグインです。
基本的には策定中のCSS仕様を使えるようにするプラグインであり、CSS版Babelみたいなものです。

今回の趣旨としては大枠としてこれだけを入れとけばOKです。

同梱されているPostCSSプラグインはこんな感じ
個別に無効化することも可能です。

Bootstrapと並ぶcssフレームワークのFoundationもこれを使ってるぽいです。

できるようになることは本家やCSSの仕様見てください。

  • all : initial; のバックポート実装が使えるようになる。
  • css variables が全ブラウザで使えるようになり、カラーパレットやmargin設定の管理がより強固にできるようになる。
  • custom media queriesで各デバイス用のメディアクエリを論理立てて一元管理できるようになる。
  • 同梱されているautoprefixerプラグインでベンダープリフィックス勝手につけてくれる。

と、まあそれなりに利点があります。

あとはColor FunctionなどSASSとかの文化から策定に行ったっぽい奴もありますね。

autoprefixer

おそらく世界で一番使われてるPostCSSプラグインです。前述のcssnextの中にも同梱されています。
moz-* とか webkit-* とかのベンダープリフィックスを自動で付与します。
下記のような感じですね。

.cannot-selectble {
    user-select: none;
}

 

.cannot-selectble {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

ちょい足し

cssnextに加えて、魔改造オレオレCSS化しないよう気をつけながらテスト的にPostCSSプラグインをいくつか追加してみます。

postcss-flexbugs-fixes

ブラウザごとに起こるflexboxの挙動の違いをある程度吸収します。

postcss-flow-root

幾つかのブラウザ実装が始まったW3Cのdisplay: flow-rootを入れ込みます。
しばらくはオプション指定でclearfixとかいうあのハックまがいの実装を吐いてもらいますが、これであの実装とは事実上別れを告げます。
こういうとこにはflexboxやGrid使いたいのですが。
しばらくは fallback: "clearfix"の設定が必要そう。

postcss-grid-kiss

Safariでも実装が始まったCSS Grid Layoutのプロパティを非対応ブラウザに対しても適用します。
どうやら全部は再現できていないっぽいですが。

postcss-import

webpackなどでimportした他cssファイルを展開するのに使います。
最終的に1ファイルにして、ブラウザ実行時に@import時の負荷を防ぎます。

番外/SASS記法

独自記法があるので今回は見ませんが、SASS記法を提供するためのプラグインでstarが多そうなものに precss , sugarss , postcss-scss 等があります。
他のも探せばあるかと思います。

まとめ

成果物

トランスパイラを通すことで仕様に則った便利機能を一足先に使っていきたいという意味では有用かと思います。

そうではなく、「バグを潰す」という意味では、あまり期待しすぎない方がいい感じです。
単純にトランスパイラでなんとかなる程度のブラウザ間の差分ならかわいいもので、辛さは多分そこで吸収できない先にあるわけなので。

つらつら書きましたが、あんまり最新の仕様を把握しきってないとこもあるかと思うので、もうちょっとなんとかなるぜってご意見あれば、マサカリ等お待ちしております。
以上です。

Read More

htmlソースの並びを変更せずに左右固定3カラムリキッドレイアウトを行う

ソースの並び順はSEO上重要だと言われています。
並びは基本的に

  1. 見出し
  2. 内容

上記の順になるのが好ましいとされています。

良く見る下記の画像のようなレイアウトを実装する際の例だと
boxline

この場合、見出しは画像タイトル、内容は画像及び「詳細」リンクとなります。
floatとmarginを利用した一般的なリキッドレイアウトでは、htmlソースの順を下記のように変更しなければ厳しいものがあります。

  1. 【内容】画像(width:80px;float:left;を指定)
  2. 【内容】詳細リンク(width:100px;float:right;を指定)
  3. 【見出し】画像タイトル(margin:0 100px 0 80px;を指定)

これだと内容と見出しが逆転してしまっていますので、あまり好ましい状態とは言えません。

そこでpositionを使い多少強引ですが下記のようにする事で、並びを変えずに左右固定の3カラムリキッドレイアウトが可能になります。
html

<div id="floatBox">
	<div class="floatBoxLine">

		<div class="boxTitle">
			<h2>画像のタイトル</h2>
		</div>

		<div class="boxImg">
			<img src="hoge.jpg" alt="画像" width="80" height="80" />
		</div>

		<div class="boxLink">
			<a href="">詳細</a>
		</div>

	</div>
</div>

css

#floatBox {
	width:100%;
}

h2 {
	margin:0;
}

.floatBoxLine {
	width:100%;
	position:relative;
}

	.boxTitle {
		margin:0 50px 0 80px;
		height:80px;
		background-color:#ffcccc;
	}

	.boxImg {
		top:0;
		position:absolute;
		width:80px;
		height:80px;
		background-color:#ccffcc;
	}

	.boxLink {
		position:absolute;
		top:0;
		right:0;
		width:100px;
		height:80px;
		background-color:#ccccff;
	}

Read More