CSSの限界はどこにある。

#前置き
CSSって思ったより凄いよって記事です。
高校生の分際で一丁前にCSSを語るなと有識者諸兄に怒られそうなので先にお詫びしておきます。大変申し訳ございませんでした。

#本題
謝ったので好きな事言えます。

##CSSアニメーション
まずは広く知られてるであろう所から。
CSSでアニメーションが記述できる。それだけの代物。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="hatopoppo" data-slug-hash="ExgWJJY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ExgWJJY">
  <span>See the Pen <a href="https://codepen.io/hatopoppo/pen/ExgWJJY">
  ExgWJJY</a> by HATO (<a href="https://codepen.io/hatopoppo">@hatopoppo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
最近だとハンバーガーメニューとかで見かける。( transitionで実装してる物の方が多いけど )
これを頑張れば、
<p class="codepen" data-height="500" data-theme-id="light" data-default-tab="css,result" data-user="hatopoppo" data-slug-hash="mdrWZXY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="mdrWZXY">
  <span>See the Pen <a href="https://codepen.io/hatopoppo/pen/mdrWZXY">
  mdrWZXY</a> by HATO (<a href="https://codepen.io/hatopoppo">@hatopoppo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
こういう事もできる。
因みにコードは__transform-origin__でrotationの原点を関節の位置に変えて回してるだけ。
コードの行数と比例する形にはなるがとりあえずアニメーションに限界はなさそう。
##CSS変数
CSSは変数も扱える。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="hatopoppo" data-slug-hash="GRjWVpp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="GRjWVpp">
  <span>See the Pen <a href="https://codepen.io/hatopoppo/pen/GRjWVpp">
  GRjWVpp</a> by HATO (<a href="https://codepen.io/hatopoppo">@hatopoppo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
もちろんこれだけでも、全体の色味変えたりする点でとても便利だが、本命はこちら。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="hatopoppo" data-slug-hash="wvzJVWg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="wvzJVWg">
  <span>See the Pen <a href="https://codepen.io/hatopoppo/pen/wvzJVWg">
  wvzJVWg</a> by HATO (<a href="https://codepen.io/hatopoppo">@hatopoppo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
ダークモード対応。
__media__で端末がダークモードか否か判定して結果により変数を変える。

今例示した二つはどちらもcolorを変数に入れた物だったが、数値型も扱えればvwやremのような単位のついたものも扱える。さらに 「 __inline__ 」 とか 「 __flex__ 」 のような文字列ですら扱える為スタイリングの幅が広がりそう。
因みにCSSアニメーションと組み合わせるとこういう事もできる。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="hatopoppo" data-slug-hash="PoGpMpG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="PoGpMpG">
  <span>See the Pen <a href="https://codepen.io/hatopoppo/pen/PoGpMpG">
  PoGpMpG</a> by HATO (<a href="https://codepen.io/hatopoppo">@hatopoppo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
hsl[^1] の h[^2] だけを変数で変化させたもの。これでもちゃんと動くのがすごい。
鬼のようなアニメーションの長文を見てもらうとわかるだろうが、残念ながらCSSアニメーションでは変数間の補完はできない。その為短い間隔で色を描き変えないといけない。少し残念。
ただ相変わらず限界は見えない。変数によって出来ることが広がりすぎ。
[^1]: 色相 明度 彩度の3つで構成される色の表し方
[^2]: 色相
##attr
属性値の取得もできる。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="hatopoppo" data-slug-hash="LYRWwdY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="LYRWwdY">
  <span>See the Pen <a href="https://codepen.io/hatopoppo/pen/LYRWwdY">
  LYRWwdY</a> by HATO (<a href="https://codepen.io/hatopoppo">@hatopoppo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
こんな感じ。
pタグに付いたdata属性、data-textから文字列を持ってきた。
尚attrはCSS Level4に位置付けられる物であり、まだ草案段階のため、今は擬似要素のcontentにしか使えない。だが、今後colorプロパティに使えるようにする事なども検討されている。
data属性はjsからも扱いやすい[^3]ので、そこからスタイルなども弄れるようになるととても面白くなりそう。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="hatopoppo" data-slug-hash="oNzZKVb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="oNzZKVb">
  <span>See the Pen <a href="https://codepen.io/hatopoppo/pen/oNzZKVb">
  oNzZKVb</a> by HATO (<a href="https://codepen.io/hatopoppo">@hatopoppo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
とりあえず今できることは、日付等のデータを入れることくらい。
これもコンポーネントっぽくてかなり需要はありそう。
[^3]: Object.dataset.hoge で取得や変更が出来る。
# 終わりに
__初心者向け__だとか__プログラミング言語じゃない__[^4]だとか__怪しげな情報商材屋のTwitterのプロフィールによく書いてある__だとか散々揶揄された言語ですが、見かけによらず奥深く、限界が見えないのがCSSです。
今回は飽く迄も分かりやすさ重視で、一目でわかるようなCSSの変貌を中心に据えましたが、色々と組み合わせてやれば意外と器用な事もできます。
最近は、CSS in JS など生のCSSを追いやろうとする流れが散見されますが、追いやられるべきCSSは過去の遺産となろうとしています。
限界知らずの、これからも成長していくCSSで、是非楽しい開発を。

__CSS is GOD__
[^4]: 因みに最近MDNが行ったアンケートで「今書いてるプログラミング言語は何ですか」という設問で選択肢にHTMLとCSSがあったので誰が何と言おうとプログラミング言語です。チューリング完全だし。http://hoo89.hatenablog.com/entry/2014/09/12/164712