CSSのメディアクエリでcalc()が使用できるの知ってた？

CSSのメディアクエリでcalc()が使用できるのを知ってましたか？
これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。

メディアクエリは比較演算子が使えるようになったり、実はcalc()も使えたりと、まだまだ活躍の場がありますね。

HTMLはシンプル、h1の見出しだけ用意します。

CSSのメディアクエリにcalc()を使用し、幅がcalc(1024px - 50ch)以上で見出しのカラーをハイライトに表示されるように設定します。

ch単位については、下記をご覧ください。

• 知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説

比較演算子width >=については、下記をご覧ください。

• CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります

実際の動作は、デモページでご覧ください。
右上「CODEPEN」をクリックして別タブで表示すると、リサイズして見出しのカラーが変化するのが分かります。

See the Pen
use calc() in a media query by coliss (@coliss)
on CodePen.

@media: calc()は、6年くらい前からすべてのブラウザにサポートされていました。ただし、IEは除く。

@media: calc()のサポートブラウザ

元ネタは、下記ポストより。

@media (width >= calc(1024px - 50ch)) {
…
}

this blew minds at @CSSDayConf when @KevinJPowell shared that you can use calc() inside a media query

i had no idea too!
then i looked up support, and was like, woh, since 2018?https://t.co/mmSY8rshF9

— Adam Argyle (@argyleink) June 7, 2024