より良いUXのためのCSSカスタムプロパティの使用

公開: 2019-11-29

最終更新日-2021年7月8日

CSS3は、CSS仕様が長い間持っていた最大の追加機能の1つをもたらしました。何年にもわたって開発者を悩ませてきた重要な問題に対処し、SASSのようなプリプロセッサの使用を好む主な原因であったため、多くの話題を呼んだ。変数を使用する機能である。

CSS変数が追加されたことで、テーマ設定などの基本機能をサポートするために作成する必要があった多くのコードが不要になりました。これは、繰り返しを回避し、動的なフォントサイズや、Webアプリの応答性の追加の単純さなど、さらに多くのユースケースを可能にするために使用できる便利な機能です。

CSS変数で雑然としたものを取り除く

ほとんどのアプリに共通する機能は、アプリ全体で同じで一貫性を保つ必要があるブランドの色です。将来の参照のために10個の異なる16進値を頭に格納する気はありません。ファイル間を行ったり来たりして値をコピーするのは面倒であるだけでなく、生産性にも悪影響を及ぼします。ここで、これらの色を変更する必要がある場合に実行する必要のある作業の量を想像してみてください。

WordPressでCSSプリプロセッサを使用することは、問題に対処するための最も一般的な方法です。これらは、ミックスイン、ネストされた宣言、そしてもちろん変数など、生産性を大幅に向上させる多くの機能をサポートします。

コードを1回記述するだけで、CSSにコンパイルされ、必要に応じて自由にアクセスして変更できます。ただし、実行時にこれらの値を見つけて変更できないこと、たとえば、Webアプリにダークテーマを追加できないことが最大の欠点です。 SASSがサポートしていないだけでなく、サポートしない可能性が高いため、これは大きな問題です。

CSSオープンへのカスタム組み込み変数の追加は、特にテーマ設定とレスポンシブデザインに関して、アプリケーションの作成方法に大きな影響を与えました。

CSS変数のブラウザサポートはどのようなものですか？

これは、CSS変数が議論に持ち込まれるときに出てくる最も一般的な質問です。 Caniuseによると、CSS変数のブラウザーサポートは93.16％です。最新のすべてのブラウザ（Chrome 49以降、Firefox 31以降、Safari 9.3以降、Opera 36以降、Edge 16以降）でサポートされています。いつものように、IEはショーに参加しておらず、驚くべき6.47％の市場シェアを持っています。古いブラウザをサポートしなければならない貧しい開発者にとっては、心配しないでください。ポリフィル、より正確にはポニーフィルは、一日を節約するためにここにあります。

CSS変数の正式な紹介

CSS変数に精通している場合は、CSS変数に問題はありません。

SASS変数は次のように宣言されます：

<pre>

$ facebook-blue：＃4267B2;

</ pre>

CSS変数の宣言は少し異なりますが、次のようになります。

<pre>

：根 {

–ブランドカラー：＃4267B2;

}

.brand-navbar {

背景：var（--brand-color）;

}

</ pre>

2つの構文のいくつかの違いに注意してください。

CSS変数の前には2つのダッシュを付ける必要があります
CSS変数は通常'：root'内で宣言されますが、いつでも再宣言できます。
CSSプロパティは、「var（）」関数を使用して取得されます。

CSS変数は、いくつかの追加機能へのアクセスも提供します。

カスケード値

CSSプロパティは、通常のカスケードルールに従ってカスケードされます。つまり、以下の再宣言は上記の再宣言には影響しません。

<pre>

：root {–color：黄色; }

div {–color：青; }

#great {–color：緑; }

* {色：var（–color）; }

<p>私は黄色になり、ルートから継承されます！</ p>

<div>私は青いです！</ div>

出来た！私は緑です！

<p>私も緑です！上から継承！</ p>

</ div>

</ pre>

フォールバック値

'var（）'関数はいくつかのパラメーターを受け入れます。 2つ目は、カスタムCSSプロパティが定義されていない場合のフォールバック値として使用できます。これは、JavaScriptを介してCSS変数にアクセスする必要がある人にとって便利な機能です。

その署名は'var（<custom-property-name> [、<declaration-value>]？）'のようになり、次のように使用できます。

<pre>

.brand-navbar {

背景：var（–brand-color、“＃4267B2”）;

}

</ pre>

'–brand-color'が定義されていない場合、代わりに「＃4267B2」が使用されます。

JavaScript経由でアクセス

プリプロセッサでCSS変数を使用する最も良い理由の1つは、JavaScriptを介してカスタム変数にアクセスできることです。プリプロセッサ変数はブラウザに存在しません。これらは、コードがコンパイルされるときに評価されます。このように、ブラウザでプリプロセッサ変数にアクセスすることはできません。 CSS変数を使用すると、プロパティはブラウザに存在し、値をオンザフライで編集できるようになります。

ユーザーがポップアップなどを介してカスタムカラーを選択できるダッシュボードについて考えてみます。

<pre>

.brand-navbar {

背景：var（–brand-color、“＃4267B2”）;

}

//現在の値を取得するには

getComputedStyle（document.documentElement）.getPropertyValue（'– brand-color'）;

//値を設定するには

document.documentElement.style.setProperty（'– brand-color'、'red'）;

//あるCSSプロパティを別のCSSプロパティに割り当てることもできます

document.documentElement.style.setProperty（'– brand-color'、'var（–secondary-color）'）;

</ pre>

グローバルおよびローカルスコーピング

JavaScript（または実際には任意のプログラミング言語）に精通している場合は、おそらくスコーピングの概念を理解しているでしょう。変数は通常、ローカルスコープと呼ばれるコードの特定の部分にのみアクセスできるように、またはグローバルスコープと呼ばれるアプリ全体で使用できるように定義できます。

CSS変数も同様に機能します。ブランドの色や垂直方向の間隔など、参照しやすいように、一部の変数はグローバルにスコープする必要があります。これらは通常、アプリ全体で同じままであり、変更があった場合は、どこにでも反映する必要があります。対照的に、ローカルスコープを必要とする可能性のある変数には、さまざまな大小のバリエーションを持つボタンが含まれます。特定のボタンのパディングを変更したい場合は、変更がDOM全体を通過することは望ましくありません。アプリ内の1つのポイントで変更する必要があります。

デフォルトでは、CSSプロパティはローカルスコープです。また、JavaScriptまたはその他のプログラミング言語を使用したことがある場合、スコーピングには独自の問題があります。それらは継承できるため、ローカル変数のようにも機能します。これらの使用方法に注意しないと、興味深い影響が生じる可能性があります。値はカスケードされるため、特にJavaScriptが関係している場合は、値を変更する方法に注意する必要があります。

メディアクエリでのカスタムプロパティの使用

プリプロセッサの場合と同様に、CSSプロパティを使用することの主な欠点は、メディアクエリ内で使用できないことです。たとえば、これは機能しません。

<pre>

@media（min-width：var（–breakpoint））{

パディング：1rem;

}

</ pre>

代わりにできることは、メディアクエリ内のカスタムプロパティを再定義することです。ブラウザが縮小したときにフォントサイズを変更する必要がある場合は、幸運です。 CSS変数を使用すると、JavaScriptを使用してブラウザーの変更をリッスンし、一度だけ縮小する必要のあるサイズを変更できます。

カスタムCSSプロパティの実用的なアプリケーションは何ですか？

「今日、 CDNサービスを使用してサイトのパフォーマンスを向上させる以外に、CSSカスタムプロパティを使用することは、生産性を向上させる最も速い方法の1つです」とカスタムペーパーライティングサービスのWebデザイナーであるColbyStuartはアドバイスします。

十分に強調された利点とは別に、それは生産性を向上させますが、Webアプリでそれらをどのように使用できるかについての実際の例はありますか？

ダークモードの追加

消費者市場を捉えた新しいトレンドは、Webアプリを含むすべての最新ソフトウェアでのダークモードの需要です。暗い背景色を追加するよりも少し複雑かもしれません。考慮する必要がある他の事柄には、テキストの色がどのように変化するか、そして白い背景の画像がどのように影響を受けるかが含まれます。

これはすべて、最初にアプリ全体で変数を宣言することで可能になります。ユーザーが切り替えをトリガーしてWebサイトのテーマを暗くしたときに、CSS変数を変更するJavaScript関数をトリガーします。 Webアプリがより複雑な場合、これには、現在の画像をダークモード対応の画像に置き換えることも含まれる可能性があります。

WordPressにダークモードを追加する

CSS変数は非常に影響力があり、WordPressの世界に到達しました。今日、ダークモード（またはより一般的にはテーマ）を作成することは、WordPressアプリはかなり簡単です。

ほとんどのWordPress開発者は、サイトの外観と機能を変更するためにカスタマイザーに依存しています。サイトのCSSにアクセスすることで、色、フォント、背景画像などにアクセスできます。これに関する主な問題は、CSSをこのように変更すると、PHPがHTMLを再レンダリングするように強制し、そうすることで、サーバーがファイル全体をブラウザーに再送信することです。アプリが不要なリクエストを行い、必要以上のデータを消費します。

「そのようなアプリが消費者向けである場合、おそらく多くの苦情を受けるでしょう。変更したい変数専用のCSSファイルがない場合、状況はさらに悪化します。」 papersowlreviewのシニア開発者で履歴書作成サービスの発行者であるHelenaNewmanは、CSS仕様への追加が必要であると考えています。

CSS変数を使用すると、JavaScriptを使用してブラウザですべての色が変更されます。行われる唯一の要求は、必要に応じて現在のテーマをサーバーに永続化することです。それでも、そのような変数はブラウザに保存できます。

Webサイトにレスポンシブデザインを追加する

インターネット上の携帯電話の数がこれまでになく増えているため、レスポンシブWebサイトの必要性がこれまでになく明らかになっています。開発者を困惑させるレスポンシブデザインの最も重要な側面は、フォントサイズの変更です。複数のフォントまたは動的フォントを使用するアプリの場合、それらを追跡し、ブラウザーごとに変更するのは面倒です。

代わりに、カスタムCSSプロパティを使用すると、Webサイト全体で使用および再利用できるユニバーサルフォントサイズを定義できます。変更が必要な場合は、JavaScript関数を呼び出すだけで、すべて機能します。

古いブラウザをサポートする必要がない場合は、カスタムCSS変数を（比較的）新しいグリッドCSSシステムと組み合わせて使用して、メディアクエリの必要性を完全になくすことができます。

繰り返しになりますが、CSS自体の中で幅の変更をリッスンする必要がある場合は、メディアクエリが依然として必要になる場合があります。これは、JavaScriptの実行を許可しないブラウザーをサポートできる唯一の方法です。

結論

カスタムCSS変数は、かなり長い間、仕様に追加された最も重要なもののいくつかです。 CSSファイルから雑然としたものを取り除き、不要な追加の要求を行う必要をなくすことで、設計プロセスを簡素化できます。