2018-03-14

フォント・サイズ変更機能をCSSで

実装と実行の両面でコストの低いフォント・サイズ変更機能の実装を考えていた。:target疑似クラスを使う方法が最もコストが低いように思えた。

Demo: CSS Font Size Changer

id属性を振ったdiv要素でフォント・サイズを変更したいコンテンツを括り、それにページ内アンカーでジャンプすることによって:target疑似クラスを有効化するという仕組みだ。:target属性を使った画像のズーム機能の実装と考え方としては同じだ。フラグメント識別子を消したり、ブラウザーの履歴をクリーンに保つにはJavaScriptが必要になる。

このままではページ移動が起きてしまうので、HTMLコードにはもう少し工夫が必要かもしれない。div要素で括らずに空要素として固定位置に隠して配置し、兄弟セレクターで制御するとうまくいきそうだ。

#large:target ~ main {
  font-size: 24px;
}

既存のウェブページへCSSにおける副作用なしに追加するには、こちらの方法が優れている。

もしhas()疑似クラスの実装があると、カスタム・プロパティーと組み合わせられる。例えば以下のようにも書けるだろう。

:root {
  --base-font-size: 16px;
}

body {
  font-size: var(--base-text-size);
}

:root:has(#large:target) {
  --base-text-size: 24px;
}

この場合はページ内アンカーそのものにid要素を振れば良いので、div要素が必要なくなる。ただし自身を参照するアンカーという存在そのものが微妙になる。

しかしhas()があるなら:checked疑似クラスから親を参照できるので、アンカー(やid属性)を使わず、ラジオボタンだけで実装できる。:root:has(.large:checked)というようなセレクターで良い。この場合はHTMLコードがフォーム要素だけでよくなるため、誰でも操作しやすくなる可能性が高い。

has()はかなりのポテンシャルを秘めている。想像しやすいところだとウェブログの記事にカバー画像がある場合とない場合でレイアウトを変えるとかだ。セレクターに簡単な条件節が追加できると考えるとわかりやすいかもしれない。