興が乗って色々いじる。内部に手を入れ、各ページの順序などを定義し、ホームにあるナビゲーションを自動生成できるようにするところから始めた。副作用としてテンプレートがすっきりするなど、良いことが多い。他にローカルにコピーしたNu Html Checkerにパスを通して実行するエイリアスを作り、HTMLファイルをテストするようにもする。あまり速くない。CSSは戻したり、直したり、追加したりだ。
color-schemeプロパティーをやめる- View Transitionsの有効化
scrollbar-gutter: stableにして計算を楽にするtext-align: justifyをまた諦める- ハイパーリンクの色を青寄りに戻し、コントラスト比を上げる
- 文字色や
pre要素の背景色を、背景色からcolor-mix()関数で生成する - 無理やり計算していたサイズを文字または行などで制御する
round()関数を使って、文字サイズが整数ピクセルになるようにする
他にもあるが、CSSでは主にこのようなことを行う。color-schemeプロパティーとView Transitionsについては別に書こうと思う。両端寄せはやはりというか、5日くらい確認すると受け入れ難い程崩れるところがいくつか見つかってしまうし、日本語ではまだまだ厳しいのかもしれない。ハイパーリンクは緑に寄せるとWCAG 2.1のコントラスト比計算が落ちがちで、それを確保しようとすると、今度は地の文字との識別がやや厳しくなる。やはり青っぽいなら青い方が良いようだ。
View Transitionsやscrollbar-gutterプロパティーは、バグはあっても副作用はほとんどないようなので、リセットやノーマライズに含めても良さそうな気配がある。color-schemeのmetaタグも含めて、HTMLやCSSの初期ファイルを更新する良い機会かもしれない。さすがにもうHTML5 BoilerplateやNormalize.cssは使っていないが、かといってそれほど進化してもいない。
color-mix()関数の利用はそこそこすんなり進められる。ただし、それで生成される色をgetComputedStyle()で拾うと、今までのようにrgb()関数で返ってこない。Web Platform Testsの実行結果を見ると、color(srgb ...)だったり、lch(...)だったり、色々だ。色空間への理解が中途半端なので、Color.jsに頼るしかなさそうだ。
round()関数はmin()関数を含められないような気がしていた。しかし、寝て、起きて、ご飯を食べて、書き直したらちゃんと含められた。睡眠と食事は大切だ。このウェブサイトでは、主に文字サイズを整数ピクセルにするために利用しているが、割り算の余りが丸められる時のずれを吸収するためにも利用している。