單一 HTML 元素星級評定元件

過去，建立自訂元件需要 HTML、CSS 和 JavaScript 的複雜組合。然而，近年來 CSS 的進步使我們能夠僅使用 HTML 和 CSS  建立許多元件 - 利用瀏覽器中已內建的邏輯。當我們可以重複使用大部分輪子時，為什麼還要重新發明輪子呢？

諸如複選框、單選按鈕和切換開關之類的簡單元件可以使用 HTML 和 CSS 創建，同時依賴瀏覽器的功能。但我們並不局限於簡單的組件。更複雜的組件也可以透過這種方式實現。

在本文中，我們將探索如何使用單一 HTML 和一個 JavaScript 命令建立星級評級系統。

超文本標記語言

星級評定元件本質上是使用者可以從中選擇一個的一系列值。變體可能包括 5 個值（每顆星一個）或 10 個值（允許半顆星），但想法保持不變 - 使用者可以選擇一個值，並且只能選擇一個值。

HTML 提供了專為範圍設計的輸入類型，我們可以將其用作組件的基礎：

<input type="range">

就目前情況而言，此輸入並不是很有用。我們需要根據我們的設計規格定義一些屬性：

1. 允許半星評級。
2. 0.5 到 5 星不等。
3. 預設選擇為 2.5 顆星。

依上述規範，HTML 將如下圖所示：

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

此元件是範圍輸入()，允許使用者選擇0.5 (min="0.5") 和5 星(max="5") 之間的值，增量為0.5 （步長=“0.5”）。初始值設定為 2.5 顆星 (value="2.5")。

將最小值設為 0.5 而不是 0 可能看起來不尋常，但這是有實際原因的。允許 0 星審核將創建 11 個潛在值，但該範圍在視覺上代表 10 個值（10 個半星），從而導致可點擊區域與範圍內的星星不匹配。這種設計選擇確保了更好的可用性並簡化了以後的實現。

設定最小值 0.5 可以讓點擊區域更自然

透過使用 11 個單選按鈕建立元件可以部分解決此問題。但這會在設計（我們如何使用滑鼠選擇0 值？）、可用性（我們應該模仿範圍輸入的本機行為還是單選按鈕的本機行為？）和可訪問性（如何我們管理整個元件的焦點？ ）

這些對於另一個關於如何使用單選按鈕建立評級元件的教學來說是很好的問題。對於本教學課程，介紹如何使用單一 HTML 元素建立元件，我選擇最小值 0.5 以避免這些複雜性。

我們稍後會添加一些調整，但此程式碼可以作為一個堅實的起點。沒有任何 CSS，它在視覺上類似於標準範圍輸入：

接下來，我們將新增更多屬性。雖然它們目前看起來並不重要，但以後它們會很重要：

• 類別名稱：幫助辨識CSS中輸入的範圍。
• 內聯樣式：使用自訂屬性來儲存輸入的值。
• 內聯 JavaScript：用於更新上面內聯樣式中的自訂屬性的單一命令。

最終程式碼將如下所示（為了方便閱讀而格式化）：

<input type="range">

在下一節中，我們將稍微完善這個規則。我們必須為 Chrome/Safari 和 Firefox 定義樣式，這會帶來一些重複。我們可以透過使用自訂屬性來儲存值並將它們應用於兩種樣式來簡化流程。

設定軌道樣式

軌道將佔據元素的整個大小，然後我們將使用漸變為我們需要的部分著色。

我們不需要擔心寬度——它會佔據元素的整個寬度——但高度是另一回事。雖然 Chrome 和 Firefox 使軌道的高度與容器相匹配，但 Safari 卻不然。因此，我們必須明確指定 100% 的高度。

接下來我們要定義彩色區域。我們將利用先前建立的 --val 和 --size 自訂屬性。我們將設定一個從左到右的線性漸變，在 --val 屬性指示的點改變顏色：

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

我們將將此漸層移到父元素中的另一個自訂屬性。這使我們能夠重複使用 Chrome/Safari 和 Firefox 的值——正如我之前提到的…稍後可能會提到。

這樣，我們就有了一個矩形，其中較暗的區域代表所選值。當我們單擊或滑過矩形時，黑色區域會發生變化，這是所需的功能，但缺乏視覺效果。我們需要 CSS 遮罩。

我不否認，下面的部分很難看。我選擇全面使用 CSS，而不依賴外部圖片或內嵌 SVG。您可以使用這些選項中的任何一個來簡化程式碼。

以下程式碼適用於星形評級組件，但我們可以透過更改蒙版輕鬆更改形狀（例如，更改為圓形）。

我們將使用一組圓錐漸層來使用 CSS 遮罩來剪輯五點星。它考慮了輸入範圍的大小，因此，在水平重複掩碼後，我們將得到五顆星：

<input type="range">

與上面的線性漸變一樣，我們將在 Chrome/Safari 和 Firefox 的樣式中套用此遮罩。為了避免程式碼重複，我們將在父元素內的自訂屬性中定義它。

最終程式碼將如下所示：

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

請注意 Webkit 和 Firefox 的程式碼幾乎相同。 CSS 中的 mixins 這樣的功能在這種情況下會非常有幫助——儘管有一個受支援的標準會更好。

我們還添加了一些樣式（列印顏色調整：精確）以確保組件的列印與螢幕上顯示的完全一致。這在使用背景時非常有用，因為預設通常不會列印背景。

設定拇指樣式

在這個星級評定係統的情況下，大拇指並不是特別重要。視覺效果是利用軌道本身來實現的。因此，我們將把拇指隱藏起來。

我們可以透過將其不透明度設為零來做到這一點：

<input 
  type="range"
  min="0.5"
  max="5"
  step="0.5"
  value="2.5"
 >



<h2>
  
  
  The CSS
</h2>

<p>Styling range inputs can be tricky–but not excessively complex. Unfortunately, it requires a lot of repetition due to lack of support and standardization, so we must use vendor prefixes and browser-specific pseudo-classes for the different elements of the component:</p>

• thumb: the element user can move to change the value. The pseudo-elements are ::-webkit-slider-thumb (Chrome and Safari) and ::-moz-range-thumb (Firefox)
• track: the area or line along which the thumb slides. The pseudo-elements are ::-webkit-slider-runnable-track (Chrome and Safari) and ::-moz-range-track (Firefox)

And, of course, we'll need to apply some specific styles for each browser, as they don't style the component consistently. For example, we'll need to set up heights on Safari or remove a pesky border on Firefox.

From here, the next steps are as follows:

1. Defined the size of the star-rating component.
2. Mask the track to only keep the shapes of the stars visible.
3. Define the background that only colors the selected stars.
4. Hide the thumb.

Hiding the thumb is optional and it will depend on the type of component you are building. It makes sense to hide the thumb in this star-rating system. However, in a user-satisfaction component, the thumb may be useful. You can explore different demos at the end of this article.

Styling the range element

The first step will be removing the default appearance of the range input. This can be done that by setting the the appearance:none property. All modern browsers support it, but we may want to add the vendor-prefixed versions, so it's compatible with older browsers too.

Since we have five stars, it makes sense to set the width to five times the height. aspect-ratio: 5/1 could handle this, but some browsers still have inconsistent support, so we'll "hard code" the size using a custom property.

Additionally, we want to remove the border. Firefox applies a default border to the ranges, and removing it ensures a more consistent styling across browsers.

.star-rating {
  --size: 2rem;
  height: var(--size);
  width: calc(5 * var(--size));
  appearance: none;
  border: 0;
}

您可能已經注意到，我在上面的程式碼片段中沒有使用 CSS 嵌套（而我在下面的演示中使用了它）。這是因為嵌套相對較新，並且存在一些限制：許多舊版瀏覽器不支援它，而且一些現代瀏覽器也難以應對非標準偽元素 - 我在 WebKit 上報告了有關 Safari 上此行為的錯誤。

範例

人們說一圖勝千言。因此，這裡有一些可以使用單一 HTML 元素進行編碼的輸入範圍範例。

讓我們從本文中描述的星級評分組件開始：

接下來是一個豐富多彩的例子。它具有非典型的形狀，需要對範圍輸入的所有部分進行樣式設計：範圍本身、軌道和拇指：

最後，我最喜歡的一個：一個動畫的單元素使用者滿意度元件。選擇任何不同的面孔，它們將根據選擇移動：

結論

有許多不同的方法來編碼這個組件。我僅使用 HTML 和 CSS（使用一個內聯 JavaScript 命令）來完成此操作，但您也可以使用圖像或更多 JavaScript 來防止這種醜陋的內聯。 

關鍵想法是，只需進行最少的 HTML 和 CSS 更改，您就可以調整規範，並且您的星級評級系統的行為會略有不同或看起來完全不同。

該元件還可以使用多個單選按鈕重新創建，這將消除對 JavaScript 行和一些 CSS 的需求。這是一個有效的方法。它將需要額外的程式碼來確保可訪問性並複製帶有輸入範圍的開箱即用的預設行為。有些人可能會發現這種方法比較容易，而且確實可行。

這是我最喜歡軟體開發的事情之一：有許多不同的方法和選項，每種方法和選項都有其優點和缺點，而且都可以完美實現。

我希望你喜歡這篇文章。繼續編碼！

以上是單一 HTML 元素星級評定元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！