星評価コンポーネントの構(gòu)築は、Web開発における古典的な演習(xí)であり、さまざまな手法を使用して繰り返し実裝されています。通常、少量のJavaScriptコードが必要ですが、CSSを使用した実裝についてはどうですか？はい、はい！

これは、CSSのみを使用して実裝されたSTAR評価コンポーネントのデモンストレーションです。 [評価の更新]をクリックできます。

かっこいいですよね？ CSSのみを使用することに加えて、HTMLコードは単一の要素です。

<input type="range">

範(fàn)囲入力要素は、ユーザーが2つの境界（最小および最大）間で數(shù)値を選択できるため、理想的です。私たちの目標(biāo)は、このネイティブ要素を設(shè)計し、追加のタグ付けやスクリプトなしで星評価コンポーネントに変換することです。また、最後により多くのコンポーネントを作成するため、お楽しみに。

メモ：この記事は、CSS部分のみに焦點を當(dāng)てています。 UI、UX、およびアクセシビリティの側(cè)面について考えるために最善を盡くしましたが、私のコンポーネントは完璧ではありませんでした。いくつかの欠點（エラー、アクセシビリティの問題など）がある場合があるため、注意して使用してください。

要素<input type="range">

入力要素のようなネイティブ要素の設(shè)計は、すべてのデフォルトのブラウザスタイルと異なる內(nèi)部構(gòu)造のために少し難しいことを知っているかもしれません。たとえば、範(fàn)囲の入力要素をコードを確認(rèn)すると、Chrome（またはSafari、Edge）とFirefoxの間に異なるHTMLが表示されます。

幸いなことに、私が頼りにするいくつかの共通の部分があります。 2つの異なる要素を見つけます：

メイン要素（入力自體）とスライダー要素（マウスを使用してスワイプして値を更新する）。

私たちのCSSは主に次のとおりです

唯一の欠點は、スライダー要素のスタイルを2回繰り返す必要があることです。次のことをしようとしないでください：

input[type="range"] {
  /* 主元素樣式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑塊樣式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑塊樣式 */
}

これは、セレクター全體が無効であるため、機(jī)能しません。 chromeなどは

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑塊樣式 */
}

部分を理解していませんが、Firefoxは

部分を理解していません。簡単にするために、この記事では、次のセレクターを使用します。 ::-moz-* ::-webkit-*しかし、デモには、スタイルを繰り返す実際のセレクターが含まれています。紹介で十分です、コーディングを始めましょう！

input[type="range"]::thumb {
  /* 滑塊樣式 */
}

メイン要素スタイル（星）

最初にサイズを定義します：

各星が正方形の領(lǐng)域にあると思う場合は、5つ星の評価のために、幅が5倍に等しい幅が必要なので、

を使用します。

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: 5;

  appearance: none; /* 刪除默認(rèn)瀏覽器樣式 */
}

5つの値は、入力要素のaspect-ratio: 5屬性の値として定義されます。

maxしたがって、新しく拡張された

関數(shù)（現(xiàn)在はChromeのみ）に頼って、手動で定義するのではなく、値を読み取ることができます！

<input type="range" max="5">

attr()これで、

屬性を調(diào)整するだけで星の數(shù)を制御できます。これは素晴らしいことです。これは、

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 刪除默認(rèn)瀏覽器樣式 */
}</number>

屬性がブラウザによって內(nèi)部的に使用されているため、値を更新すると、ブラウザの実裝と動作を制御するためです。

この拡張されたバージョンのattr()は現(xiàn)在Chromeでのみ利用可能であるため、すべてのデモには、サポートされていないブラウザを支援するフォールバックスキームが含まれています。

次のステップは、CSSマスクを使用して星を作成することです。形狀を5回繰り返す必要があります（max値に応じて、またはそれ以上）。したがって、マスクのサイズはvar(--s) var(--s)またはvar(--s) 100%に等しいか、var(--s)に単純化する必要があります。

<input type="range">

屬性は何ですか？勾配が必要だと言うのは驚くことではないと思いますが、SVGにもなる可能性があります。この記事は、星評価コンポーネントを作成することに関するものですが、スターパーツを多用途のままにして、必要な形狀に簡単に置き換えることができます。だから私はこの投稿のタイトルで「もっと」と言った。同じコード構(gòu)造を使用して、さまざまな異なるバリアントを取得する方法を後で確認(rèn)します。 mask-image

ここに、星形成を?qū)g裝する2つの異なる方法を示すデモがあります。 1つは勾配を使用すること、もう1つはSVGを使用することです。

この場合、SVG実裝はよりクリーンに見え、コードは短くなりますが、勾配実裝がより良くなることがあるため、両方の方法を覚えておいてください。

スライダースタイル（選択された値）

スライダー要素に焦點を合わせましょう。最後のデモを使用して、星をクリックして、スライダーの位置に注意してください。

良いニュースは、すべての値（最小から最大まで）で、スライダーは常に特定の星の領(lǐng)域內(nèi)にあるが、各星は異なる位置を持っているということです。値に関係なく、位置が常に同じである場合、それはさらに良いでしょう。理想的には、一貫性のために、スライダーは常に星の中央にある必要があります。

これは、場所と更新方法を示す寫真です。

これらの行は、各値のスライダー位置です。左側(cè)には、スライダーがメイン要素の左端から右端に移動するデフォルトの位置があります。右側(cè)では、両側(cè)にいくつかのスペースを追加してスライダーの位置を小さな領(lǐng)域に制限すると、より良いアライメントが得られます。このスペースは、星の半分のサイズ、または

に等しくなります。これにはパディングを使用できます：var(--s)/2

input[type="range"] {
  /* 主元素樣式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑塊樣式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑塊樣式 */
}

スライダーサイズについては考えていなかったので、それはより良いですが、完璧ではありません。これは問題ではありません。1PXに等しい幅を使用してスライダーのサイズを非常に小さくするからです。

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑塊樣式 */
}

スライダーは、星の中央にある細(xì)い線になりました。私はレッドを使用して位置を強調(diào)しますが、実際には透明になるので色は必要ありません。

あなたは私たちがまだ最終結(jié)果からはほど遠(yuǎn)いと思うかもしれませんが、私たちはほとんど終わりです！このパズルを完成させるためにプロパティがありません：

。 border-image

屬性により、そのborder-image関數(shù)を使用して要素の外側(cè)に裝飾を描くことができます。これを行うために、スライダーを小さく透明にします。著色はoutsetを使用して行われます。ソースとして2つの固體色のグラデーションを使用します：border-image

input[type="range"]::thumb {
  /* 滑塊樣式 */
}

次のコンテンツを書きます：

<input type="range">

上記は、要素の両側(cè)からborder-imageの面積を100px拡張することを意味し、勾配がその領(lǐng)域を埋めることを意味します。言い換えれば、勾配の各色は、エリアの半分、つまり100pxをカバーします。

ロジックを理解していますか？スライダーの両側(cè)にあふれたシェーディングを作成しました。スライダーを論理的に追跡して、スターがクリックするたびにスライドするようにします。

ここで、100pxの代わりに非常に大きな値を使用しましょう：

私たちはほとんど終わりました！著色はすべての星を満たしますが、私たちはそれが真ん中にあることを望んでいませんが、選択した星全體にあります。これを行うには、50％を使用する代わりに、50％var(--s)/2を使用する代わりに、勾配を少し更新します。星の幅の半分に等しいオフセットを追加します。つまり、最初の色がより多くのスペースを占有し、星評価コンポーネントが完璧です！

スライダーの高さを定義する代わりに、コードをわずかに最適化することができます。0に保ち、border-imageの垂直outsetを検討して、シェーディングを拡張します。

input[type="range"] {
  /* 主元素樣式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑塊樣式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑塊樣式 */
}

円錐形の勾配を使用して勾配を異なる方法で書き込むこともできます：

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑塊樣式 */
}

border-imageの構(gòu)文は理解しやすくないことを知っています。説明するのは少し迅速です。しかし、私はSmashing Magazineに非常に詳細(xì)な記事を公開しており、このプロパティを多くの例で分析し、それがどのように機(jī)能するかをより深く理解するために読むことをお勧めします。

コンポーネントの完全なコードは次のとおりです。

input[type="range"]::thumb {
  /* 滑塊樣式 */
}

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: 5;

  appearance: none; /* 刪除默認(rèn)瀏覽器樣式 */
}

それだけです！ CSSコードの數(shù)行を使用すると、素晴らしい星評価コンポーネントが得られます！

セミスター評価

スコアの粒度をハーフスターに設(shè)定するにはどうすればよいですか？これは非常に一般的であり、いくつかの微調(diào)整を行うことで以前のコードを完了することができます。

最初に、完全なステップではなく、ハーフステップで入力要素をハーフステップで増分に更新します：

<input type="range" max="5">

デフォルトでは、ステップサイズは1に等しくなりますが、.5（または任意の値）に更新してから、最小値を.5に更新できます。 CSS側(cè)では、パディングを

からvar(--s)/2に変更し、勾配內(nèi)のオフセットに対して同じことを行います。 var(--s)/4

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 刪除默認(rèn)瀏覽器樣式 */
}</number>

2つの実裝の違いは、1分の1の要因であり、これもステップサイズの値です。これは、

を使用して、両方のケースで機(jī)能する共通コードを作成できることを意味します。 attr()

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 刪除默認(rèn)瀏覽器樣式 */

  mask-image: /* ... */;
  mask-size: var(--s);
}</number>

これは、ステップサイズを変更することが粒度を制御するために必要なすべてのものであるデモです。

屬性を使用して星の數(shù)を制御できることも忘れないでください。 max

キーボードを使用してスコアを調(diào)整します

ご存知のように、キーボードを使用してレンジスライダーが入力した値を調(diào)整することができるため、キーボードを使用してスコアを制御することもできます。これは良いことですが、警告があります。

プロパティの使用により、キーボードの焦點を示すデフォルトのアウトラインがなくなりました。これは、キーボード入力に依存するユーザーにとってアクセシビリティの問題です。 mask

ユーザーエクスペリエンスを向上させ、コンポーネントをよりアクセスしやすくするためには、焦點を合わせてアウトラインを表示するのが最善です。最も簡単な解決策は、追加のラッパーを追加することです：

<input type="range">

これには、內(nèi)部の入力が焦點が合っている場合に概要があります。

input[type="range"] {
  /* 主元素樣式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑塊樣式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑塊樣式 */
}

キーボードを使用して、次の例でこれらの2つの評価を調(diào)整してみてください。

もう1つのアイデアは、要素の周りの小さな領(lǐng)域を見えるようにしてアウトラインを表示するために、より複雑なマスク構(gòu)成を検討することです。

単一の要素の実裝を保持しているため、最後の方法を使用することを好みますが、HTML構(gòu)造を使用すると、親要素にフォーカスを追加でき、マスク構(gòu)成をシンプルに保つことができます。それはすべてあなた次第です！

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑塊樣式 */
}

その他の例！

前に言ったように、私たちは単なる星評価コンポーネント以上のものを作りました。マスク値を簡単に更新して、必要な形狀を使用できます。

ここに例があります、私は星の代わりに心臓のSVGを使用しています。

なぜ蝶ではないのですか？

今回は、PNG畫像をマスクとして使用します。 SVGまたは勾配の使用に慣れていない場合は、透過畫像を使用できます。 SVG、PNG、または勾配がある限り、この方法では何でもすることができます。

次のようなボリュームコントロールコンポーネントをさらにカスタマイズして作成できます。

最後の例では、特定の形狀を繰り返す代わりに、複雑なマスク構(gòu)成を使用して信號形狀を作成しました。

結(jié)論

星評価コンポーネントから始めて、多くのクールな例がありました。タイトルは、「範(fàn)囲の入力要素を設(shè)計する方法」だったかもしれません。それが私たちがしていることだからです。スクリプトや追加のタグなしでネイティブコンポーネントをアップグレードし、CSSコードの數(shù)行のみを使用しました。

どこにいるの？同じコード構(gòu)造を使用する別の美しいコンポーネントを考えることができますか？コメントセクションで例を共有してください！

記事シリーズ

CSSのみのスター評価コンポーネントなど！ （パート1）

CSSのみのスター評価コンポーネントなど！ （パート2） - 3月7日にリリースされました！

以上がCSSのみのスター評価コンポーネントなど！ （パート1）の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。