CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法

2024/04/11 10 users サポートブラウザ CSS 関数 Firefox Chrome

Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。現在のところ、サポートブラウザはChrome, Firefoxですが、Safari TPに実装されており、次のバージョンでサポート予定となっています。 CSSのlight-dark()関数の基礎知識と実践的な使い方を紹介... 続きを読む

ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ

2024/03/26 92 users プロパティ カーニング 垂直方向 ダークモード ライトモード

今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカ... 続きを読む

CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しいプロパティ「light-dark()」が便利すぎる！

2023/10/31 11 users CCC CSS ダークモード 新しいプロパティ 関数

CSS Color Module Level 5に追加された新しいプロパティlight-dark()関数を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark M... 続きを読む