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

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

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

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

<input type="range">

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

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

要素<input type="range">

入力要素のようなネイティブ要素の設計は、すべてのデフォルトのブラウザスタイルと異なる内部構造のために少し難しいことを知っているかもしれません。たとえば、範囲の入力要素をコードを確認すると、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的滑块样式 */
}

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

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

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

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

input[type="range"]::thumb {
  /* 滑块样式 */
}

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

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

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

を使用します。

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

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

  appearance: none; /* 删除默认浏览器样式 */
}

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

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

関数（現在はChromeのみ）に頼って、手動で定義するのではなく、値を読み取ることができます！

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

attr()これで、

属性を調整するだけで星の数を制御できます。これは素晴らしいことです。これは、

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

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

  appearance: none; /* 删除默认浏览器样式 */
}</number>

属性がブラウザによって内部的に使用されているため、値を更新すると、ブラウザの実装と動作を制御するためです。

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

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

<input type="range">

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

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

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

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

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

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

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

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

に等しくなります。これにはパディングを使用できます：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 {
  /* 滑块样式 */
}

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

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

。 border-image

属性により、そのborder-image関数を使用して要素の外側に装飾を描くことができます。これを行うために、スライダーを小さく透明にします。着色はoutsetを使用して行われます。ソースとして2つの固体色のグラデーションを使用します：border-image

input[type="range"]::thumb {
  /* 滑块样式 */
}

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

<input type="range">

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

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

ここで、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の構文は理解しやすくないことを知っています。説明するのは少し迅速です。しかし、私はSmashing Magazineに非常に詳細な記事を公開しており、このプロパティを多くの例で分析し、それがどのように機能するかをより深く理解するために読むことをお勧めします。

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

input[type="range"]::thumb {
  /* 滑块样式 */
}

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

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

  appearance: none; /* 删除默认浏览器样式 */
}

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

セミスター評価

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

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

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

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

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

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

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

  appearance: none; /* 删除默认浏览器样式 */
}</number>

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

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

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

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

  appearance: none; /* 删除默认浏览器样式 */

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

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

属性を使用して星の数を制御できることも忘れないでください。 max

キーボードを使用してスコアを調整します

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

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

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

<input type="range">

これには、内部の入力が焦点が合っている場合に概要があります。

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

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

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

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

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

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

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

その他の例！

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

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

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

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

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

最後の例では、特定の形状を繰り返す代わりに、複雑なマスク構成を使用して信号形状を作成しました。

結論

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

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

記事シリーズ

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

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

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