5月にリリースされたChromeとEdgeで、CSSのif()関数がサポートされました。これによりCSSでもif elseの...5月にリリースされたChromeとEdgeで、CSSのif()関数がサポートされました。これによりCSSでもif elseの条件文が使えるようなり、プロパティに対して条件付きで値を設定できるようになりました。 新機能なので、実際にどのように使えばよいのか分からないことも多いと思いますので、if()関数の便利な使い方を紹介します。 たとえば下記のCSSだと、ボタンの幅はマウスで操作できるデバイス(デスクトップなど)だと30px、タッチデバイスだと44pxになります。 CSS conditionals with the new if() function 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに if()関数のデモ: インラインのメディアクエリ if()関数のデモ: インライン
2025/07/17 リンク