v8
- 公開日
- タグ
- diary
現実逃避にブログを v8 にした。
マークアップとスタイルを刷新し、ビルドも少し手を加えたのでメジャーアップデートとした。ダークモードも実装したが、これは本当に難しかったので、やめてしまうかもしれない。
技術的な話
端的に言えば IE11 で閲覧したときの表示はケアしないことにした。これによりカスタムプロパティ、flexbox での gap プロパティ、論理プロパティが利用可能になった。主なトピックについて変更点をかいつまんで記録する。
マークアップ
省けるものは省いてみた。v7 では BEM の声が聞こえていたが、どうも目に重いというか命名過剰な気がしていた。クラス名を振っているのにスタイルを当てないところがままあったので、必要な要素にだけクラス名をつけるようにした。
おかげで CSS ファイルには子孫セレクタが増えてしまったが、マークアップとスタイルは完全には分離できないのでこれは避けられない。我々はクラス名に対してスタイリングしているのではなく、マークアップに対してスタイリングしているのだ。
なので、スコープを生み出すためのクラス名が最低限あればいいということにする。自分しか触らず、全てのコンポーネントを完全理解しているからこそできる手法なので、実案件でやるのは難しいだろう。個人ブログでよかった！
脱 Sass
v4 くらいから付き合っていた Sass をついにやめた。
BEM をやめたので & による親セレクタの継承も不要になり、カスタムプロパティを使うから Sass 変数も不要になり、ファイル分割するほどコンポーネントがあるわけではないので Sass import も不要になり、ネスティングと Sass Mixins に後ろ髪を引かれはしたが、勢いでそのまま脱 Sass した。
今後 PostCSS プラグインを追加することはあっても、Sass に戻ることはないだろう。時流では Dart Sass の新しいモジュールを習得すべきなのだろうけど、やりたいことに対して複雑すぎるので正直使いたくない。
カスタムプロパティ
使ってみたが、命名がだるいし難しい。どんなスコープで管理するかも難しい。あれもこれもカスタムプロパティにできてしまうから怖い。目的と手段が逆転してしまわないように、ひとまずは色と大きさだけカスタムプロパティにした。
本当は大きさの変化にバーティカルリズムを取り入れたかったいのだけど、どうしても好みの係数を見つけることができなかったのでやめた。
ダークモード
Sass 変数をやめてカスタムプロパティにしたメリットを活かすため、ダークモード対応も追加した。
ブログの外側にあるブラウザとさらにその外側にある OS の UI が、ダークモードによってかなり暗くなるので、ブログも一緒に溶け込んでデバイスと一体となるよう、暗くした。合わせて記事内の画像などに filter: brightness(85%) を指定して色を落としている。何もしないままだとコントラストがつきすぎて眩しかった。
今は OS 側の設定にしたがって自動で切り替わるが、近いうちに任意にライトモードとダークモードを切り替える機能を提供したい。
gap
トップページの最近の記事リストと、横並びのリンクリストで gap プロパティを使った。これはとても便利だ。コンテナ内のアイテム間隔をコンテナで宣言できるのがスマートでかっこいい。
例えばアイテム間隔が 1em のフレックスコンテナを作るとき、gap を使わずにやると下記のようになるだろう。
.Container {
display: flex;
}
.Container > * + * {
margin-left: 1em;
}
これは「フレックスコンテナ内にアイテムが複数あったら、２つ目以降のアイテムの左の余白が 1em」という宣言だ。条件がだるいし特定の位置にいる要素が余白を管理してるのがでしゃばっている感がある。gap を使えば下記のようになる。
.Container {
display: flex;
gap: 1em;
}
こちらは「アイテムの間隔が 1em のフレックスコンテナ」という宣言でしかなく、アイテム自身は余白について関心がない。なので複数のときだとか余白は左だとかいうことを気にしないで済む。こんなにスマートな CSS プロパティはそうそうない。好き。
もちろんコンテナによってはアイテムが余白を管理している方がいい場合もあるだろう。また gap プロパティで全ての余白/間隔/空白を制御できるわけではないので、見合わなければふさわしい者にあるべきプロパティを使えばいい。
今回は margin より gap がふさわしいところをちゃんと gap にした、ということ。margin のことも好きだよ。
論理プロパティ
-top とか -right を論理プロパティに変えた。
本当は margin-block や margin-inline を使いたいのだけど、値にカスタムプロパティを入れると macOS Safari 14.1 と iOS Safari 14.6 で適用されなかった。
CodePen に再現コードを書いている。値をカスタムプロパティではなく実態を指定すれば期待通りに動作するので、まぁバグだろう。
See the Pen margin-block valued custom property doesn't working on macOS 14.1.1 Safari and iOS 14.6 Safari by oti (@otiext) on CodePen.
カスタムプロパティを使う場合は margin-block-start などのロングハンドならば動作する。また、最新の Webkit にはすでに修正コミットが入っているので、次の Safari では直っているだろう。
[css-logical] Fix logical shorthands with var() · WebKit/WebKit@613b7be
僕はウェブ制作を生業にする者なので、自分のブログにはオピニオンを込めているつもりだ。
アウトラインアルゴリズムに期待しているし、セクションやフレーズに過度な意味づけをしたくないし、WHATWG HTML Standard に従いすぎたくないし、WAI-ARIA にできるだけ頼りたくない。
構造のためにコンテンツを犠牲にしたくない。スタイルのために構造を犠牲にしたくもない。伝えたい相手にだけ伝わればいい気持ちもあるし、どんな人にも同じように伝わって欲しいと思う気持ちもある。文章は気分によって雑すぎたり丁寧すぎたりもしたい。手段に一貫しすぎたくない。目的だけ追い求めていたくもない。
常に天秤を揺らしながら、ああでもないこうでもないを全てブログに詰め込みたい。自分で作るブログではそれが許されていると思うし、許されたいと思っている。