CSS4は来ないという話を聞いて自分なりに解釈をまとめた


CSS4、あちこちで注目され出しました。
すでに3年も前にドラフトが出ているので、Webデザイナーやコーダー、フロント寄りの人たちはとっくに勉強を始めているかもしれませんね。

CSS4で何が変わるのか

詳しいことはこちらのスライドを参照してほしいです。
このスライドは、CSS以外についても大事な情報が非常にわかりやすくきれいにまとまっていてすばらしいです!

めんどくさい人のためにCSSについてだけ抜き出して簡単に説明します。

CSS4で変わること。
単純に便利なセレクタが増えるということもありますが、大きく変わるのは「CSSのバージョンが上がることはなくなる」らしいのです。
これだけ聞くと、どういうこと(゚д゚)!ってびっくりしちゃうんですが、要はCSSという言語ではなく、セレクタのバージョンが上がっていくことになる、と思ってください。

これまではCSSは「CSS Level 3」のように、バージョンではなくレベルがつけられていました。
では次世代のCSS4が来るなら、当然「CSS Level 4」が来るだろう、と思われていたはずです(私は思っていました)。
ところが、今回CSS4とされている内容は、「CSS Level 4」として策定されるのではない、ということです。

ますますわかりにくいですかね?

セレクタのバージョンが上がる、とはどういうことか?
セレクタというのはCSSの中身なのだから、CSSのバージョンが上がるのではないのか?

そんな疑問について、次項で説明します。

CSSだけじゃない、セレクタの使い道

これまでのセレクタについてはここのまとめがわかりやすいです。

今後はこのセレクタというモジュールがバージョンアップしていきます。
Slectors Level 4」のように定義されています。
最近では、新しいセレクタのいくつかは、一部のブラウザで実装され始めているようです。

これまでセレクタといえばCSSのもの、というイメージが強かったのですが、

CSSのセレクタという位置づけではなく、セレクタ単体として定義されています。
セレクタはもうCSSだけのものではないという事でしょう。

というわけですね。

そう言われてみるとたしかに、私にはこれまで疑問に思っていたことがあります。
JavaScriptないしjQueryを利用している人たちが、「セレクタがややこしくてわかりにくい」と嘆いているのを見るたび、「CSSとまったく同じでめちゃめちゃわかりやすいのに、なんで悩んでいるんだろう?」と。

JavaScriptの.querySelectorや.querySelectorAll、またjQueryオブジェクトの$(”)で指定されるセレクタも、CSSと同じセレクタなんですよね。

ですから、私にとっては

言語ごとに独自のセレクタ記法を持つのではなく、CSSでもJSでも「セレクタ」という共通のモジュールを利用する

という考え方はとてもかんたんでわかりやすく、すんなり納得できました。

もう、エンジニアも逃げられない

ちょっと煽った見出しにしてしまいましたが、エンジニアだからCSSは苦手(でもしょうがない)、と言っていた人たちも、勉強しないわけにはいかなくなるかもしれません。

CSSを勉強するというよりは、セレクタ、つまりはHTMLの要素、構造、DOMツリーの理解を深めて、フロントを触るならば知っていて当然、という時代になりつつあるのかもしれません。

それはWebデザイナーがPhotoshopで画像だけ作れればいいわけではなくHTML/CSSコーディングができて当然、ということや、コーダーがHTML/CSSコーディングだけでなくJSも扱えて当然、という流れになってきたことと同じ。
作業にあたる領域が増えたり、直接作業をしなくても周辺の領域の知識が必要になってきますね。

分業制であっても、(むしろ分業制ならばそれこそ)デザイナーはコーダーやフロントエンドエンジニアと、フロントエンドエンジニアはデザイナーやコーダーと、ひとつのプロジェクトに関わりソースを共有する以上、それぞれの領域を理解して連携していかなければなりません。

前回の記事、エンジニアの仕事はパスタだよっていう話でも触れたように、お互いの仕事を尊重して勉強を続けていきたいですね。