Interop 2024
Webブラウザ間の相互運用性を高めるためのプロジェクトであるInteropで2024年にフォーカスされる機能群が発表されました。
本記事では、Interop2024で対象となった機能のうち個人的に関心が高いものをいくつか紹介します。
font-size-adjust
font-size-adjust は、小文字のフォントサイズを指定するCSSプロパティです。
フォントサイズを指定する既存のCSSプロパティには font-size が存在しますが、こちらは大文字のフォントサイズを指定するものです。
font-size-adjust が採用された背景として、文字の読みやすさが小文字の大きさによって決まるのに対し、現状では小文字の大きさを担保するCSSプロパティが存在しないからです。
例えば、font-family で代替フォントを読み込んだ際、大文字と小文字の比率が本来想定していたフォントよりも著しく異なる場合があります。
このとき、font-size だけではサイズの調整ができず、想定より読みにくくなったり表示が崩れたりする原因となります。
font-size-adjust の場合、このような課題をシンプルに解決できます。
font-size-adjust は、指定されている font-size に対しての相対的な割合を指定します。
.times {
font-family: Times, serif;
font-size: 14px;
}
.helvetica {
font-family: Helvetica, serif;
font-size: 14px;
}
.times_adjust {
font-family: Times, serif;
font-size: 14px;
font-size-adjust: 0.5;
}
.helvetica_adjust {
font-family: Helvetica, serif;
font-size: 14px;
font-size-adjust: 0.5;
}
font-size-adjust は現在、FirefoxおよびSafari(iOS、macOS)で実装済みです。
Relative Color Syntax
Relative Color SyntaxはCSS Color Module Level 5の機能の内のひとつであり、色を相対的に制御するための構文が包含されています。
本記事では、Relative Color Syntaxで重要な構文となる from キーワードについて解説します。
from キーワードは、CSSの color() 関数に利用できる構文のひとつで、色を相対的に制御するための機能です。
この構文によって、指定されたベース色を基準とした相対的な色空間や色調の制御が可能になります。
構文
color: <color-function>(from <base-color> <replacement-value>);
from の主な構文はこのようになっています。
わかりやすいように、緑を相対的に青へ変換する例を紹介します。
color: rgb(from green r b g); // = rgb(0 0 128)
この例では、named color のgreen、つまり rgb(0 128 0) を受け取り、RGB色空間としてgreenとblueの色成分を入れ替えた色が出力されます。
<replacement-value> に含まれる変数は最初に指定した色空間と対応することを覚えておいて下さい。
色空間の変更
from で指定された値の色を異なる色空間へ変換できます。
今回の例では、RGB色空間で指定した緑をHSL色空間へ変換して補色を表現します。
color: hsl(from rgb(0 128 0) calc(h + 180) s l) // = hsl(300 100% 25%)
RGB色空間で補色を表現するにはコツが要りますが、HSL色空間へ変換することで容易に表現可能になりました。
また、例示のように calc() を用いて値を制御したり、0 等の定数を代入してベースの値をオミットしたりと自由に値を調整可能です。
ブラウザサポートの確認
@support を用いることで対応ブラウザの判定が可能です。
@supports (color: rgb(from white r g b))
執筆時点では、Firefox以外の主要なデスクトップ向けブラウザがサポート済みです。
Discussion