具有自定義屬性的顏色的上下文實用課程

CSS 的currentColor屬性非常實用，但遺憾的是，我們沒有類似的currentBackgroundColor屬性，而且color-mod()函數也尚未廣泛支持。

因此，許多開發者希望根據上下文樣式化鏈接，並在懸停或聚焦時反轉顏色。借助CSS 自定義屬性和一些簡單的實用程序類，我們可以利用樣式的層疊特性實現強大的效果。

為此，我們需要使用實用程序類（包含自定義屬性）來指定文本和背景顏色，然後用這些類定義下劃線的顏色，並在懸停時擴展為完整的背景。

首先，來看HTML 結構：

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">sed do eiusmod tempor incididunt</a> ut labore et dolore magna aliqua. Aliquam sem fringilla ut morbi tincidunt. Maecenas accumsan lacus vel facilisis. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper.
  </p>

這段代碼包含一個段落和一個鏈接。接下來，我們設置實用程序類。我將在Color Hunt 上定義四種顏色，分別創建顏色屬性類和背景顏色屬性類，每個類都包含一個變量來賦值（分別為--c和--bg ）。例如，綠色顏色對應的類如下：

 .u-color--green {
  --c: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
}

.u-bg--green {
  --bg: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
  background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
}

Sass 用戶可以使用映射和循環來自動創建顏色和背景類。這並非必需，只是自動創建許多顏色相關實用程序類的一種方法。這非常有用，但要跟踪使用情況，避免創建未使用的類。以下是生成這些類的Sass 代碼：

 $colors: ( // 定義顏色列表'green': https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8,
  'light': https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff7f7,
  'grey': https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bdadada,
  'dark': https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b204969
);

@each $n, $c in $colors { // $n 為鍵，$c 為值.u-color--https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$n} {
    --c: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
  }

  .u-bg--https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$n} {
    --bg: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
    background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
  }
}

如果忘記在HTML 中應用實用程序類， --c變量將使用currentColor ， --bg也是如此！為了避免這種情況，我們定義一個頂級默認值：

 html {
  --c: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000000;
  --bg: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
}

現在，只需要樣式化鏈接即可。本文中我們將樣式化所有<a></a>元素，但也可以輕鬆添加例如.fancy-link這樣的類。

鏈接的樣式應遵循“LoVe-HAte” 順序： :link 、 :visited 、 :hover （和:focus ！）以及:active 。我們可以使用:any-link ，但瀏覽器支持度不如CSS 自定義屬性好。

我們可以先聲明鏈接樣式，為舊版瀏覽器提供可接受的體驗，然後檢查自定義屬性支持：

 /* 舊版瀏覽器的樣式*/
a {
  color: inherit;
  text-decoration: underline;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: .0625em solid currentColor;
  outline-offset: .0625em;
}

a:active {
  outline-width: .125em;
}

@supports (--a: b) { /* 檢查CSS 變量支持*/
  /* 默認變量值*/
  html {
    --c: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000000;
    --bg: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  }

  a {
    /* 基本鏈接樣式*/
  }
}

接下來創建基本鏈接樣式。我們將使用自定義屬性使樣式盡可能DRY。

首先，我們需要設置變量。我們想要定義一個--space變量，用於各種屬性，在文本周圍添加一些空間。鏈接顏色也將在--link-color變量中定義，默認為currentColor 。虛假下劃線將使用背景圖像生成，其大小將根據狀態使用--bg-size變量調整，默認為--space值。最後，為了增加趣味性，我們還將在鏈接處於:active狀態時模擬一個邊框，因此我們將在--shadow-size中定義其大小，在非活動狀態下設置為0。這給了我們：

 --space: .125em;
--link-color: currentColor;
--bg-size: var(--space);
--shadow-size: 0;

首先，我們需要調整回退樣式。我們將設置顏色以使用自定義屬性，並刪除默認的下劃線：

 color: var(--link-color);
text-decoration: none;

接下來創建虛假下劃線。該圖像將是一個線性漸變，具有兩個相同的起點和終點：文本顏色--c 。我們確保它只水平重複background-repeat: repeat-x; ，並將其放置在元素底部background-position: 0 100%; 。最後，我們給出它的尺寸，水平為100%，垂直為--bg-size值。最終得到：

 background-image: linear-gradient(var(--c, currentColor), var(--c, currentColor));
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 100% var(--bg-size);

為了:active狀態，我們還定義了box-shadow ，它將不存在，但使用我們的變量，它將能夠生效： box-shadow: 0 0 0 var(--shadow-size, 0) var(--c);

這是基本樣式的大部分內容。現在，我們需要根據鏈接狀態為變量分配新值。

:link和:visited是用戶在鏈接處於“空閒”狀態時看到的。由於我們已經設置好了一切，這是一個簡短的規則集。雖然我們可以在--link-color的初始賦值中聲明--c變量，但我在這裡賦值是為了使我們樣式的每個步驟都清晰明了：

 a:link,
a:visited {
  --link-color: var(--c);
}

鏈接現在看起來很酷，但如果我們與它交互，什麼也不會發生……接下來創建這些樣式。需要發生兩件事：背景必須佔據所有可用高度（即100%），並且文本顏色必須更改為背景的顏色，因為背景是文本顏色（令人困惑，對吧？）。第一個很簡單： --bg-size: 100%; 。對於文本顏色，我們分配--bg變量，如下所示： --link-color: var(--bg); 。連同我們的偽類選擇器，我們最終得到：

 a:hover,
a:focus,
a:active {
    --bg-size: 100%;
    --link-color: var(--bg);
}

看，懸停或聚焦時下劃線變成了完整的背景！作為獎勵，我們可以通過增加--shadow-size來添加點擊鏈接時的模擬邊框，我們的--space變量將再次派上用場：

 a:active {
  --shadow-size: var(--space);
}

我們現在差不多完成了！但是，它看起來有點過於通用，所以讓我們添加一個過渡、一些填充和圓角，並確保如果鏈接跨越多行，它看起來也很不錯！

對於過渡，我們只需要動畫顏色、背景大小和box-shadow 。持續時間由您決定，但鑑於鏈接通常約為20 像素高，我們可以設置一個較短的持續時間。最後，為了使它看起來更流暢，讓我們使用ease-in-out緩動。這總結為：

 transition-property: color, background-size, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
will-change: color, background-size, box-shadow; /* 讓瀏覽器知道哪些屬性即將被操作。 */

接下來，我們將--space變量分配給padding和border-radius ，但不要擔心前者——因為我們沒有將其定義為內聯塊，所以padding不會弄亂文本塊的垂直節奏。 （只需確保測試您的值）

 padding: var(--space);
border-radius: var(--space);

最後，為了確保樣式在多行上正確應用，我們只需要添加box-decoration-break: clone; （以及前綴，如果您願意），就是這樣。

完成後，我們應該有這些樣式：

 /* 舊版瀏覽器的樣式*/
a {
  color: inherit;
  text-decoration: underline;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: .0625em solid currentColor;
  outline-offset: .0625em;
}

a:active {
  outline-width: .125em;
}

/* 現代瀏覽器的基本鏈接樣式*/
@supports (--a: b) {
  /* 默認變量值*/
  html {
    --c: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000000;
    --bg: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  }

  a {
    /* 變量*/
    --space: .125em;
    --link-color: currentColor;
    --bg-size: var(--space);
    --shadow-size: 0;

    /* 佈局*/
    padding: var(--space); /* 內聯元素不會影響垂直節奏，因此我們不需要指定每個方向*/

    /* 文本樣式*/
    color: var(--link-color); /* 使用變量設置顏色*/
    text-decoration: none; /* 刪除默認下劃線*/

    /* 盒子樣式*/
    border-radius: var(--space); /* 使其更漂亮✨ */
    background-image: linear-gradient(var(--c, currentColor), var(--c, currentColor));
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 100% var(--bg-size);
    box-shadow: 0 0 0 var(--shadow-size, 0) var(--c, currentColor); /* 在:active 狀態下使用*/
    box-decoration-break: clone; /* 確保樣式在跨越多行的鏈接上重複*/

    /* 過渡聲明*/
    transition-property: color, background-size, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
    will-change: color, background-size, box-shadow;
  }

  /* 空閒狀態*/
  a:link,
  a:visited {
    --link-color: var(--c, currentColor); /* 使用--c，或回退到currentColor */
  }

  /* 交互狀態*/
  a:hover,
  a:focus,
  a:active {
    --bg-size: 100%;
    --link-color: var(--bg);
  }

  /* 活動狀態*/
  a:active {
    --shadow-size: var(--space); /* 定義box-shadow 大小*/
  }
}

當然，它比只使用下劃線要復雜一些，但與允許您始終訪問文本和背景顏色的實用程序類結合使用，它是一個相當不錯的漸進式增強。

您可以使用三個變量來增強此功能，每個顏色使用rgb 或hsl 格式來調整不透明度等。您還可以添加文本陰影來模擬text-decoration-skip-ink ！

以上是具有自定義屬性的顏色的上下文實用課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！