你應該知道的有趣的 CSS 特性

上週我們討論了 CSS 中的偽元素和偽類。 在那篇文章中，我們看到了這些 CSS 特性如何讓我們生成更簡潔、更易懂、更易於維護的代碼。 今天我想和你分享一些額外的 CSS 屬性來構建考慮訪問者偏好的自適應網站。

具有object-fit和object-position的縱橫比

object-fit是一個 CSS 屬性，允許您設置替換元素（例如圖像）應如何調整大小以適應其容器。 讓我們用一個具體的例子來看看這意味著什麼，好嗎？

假設我們有以下垂直圖像：

我們希望在以下區域內顯示它：

它高15em ，佔可用寬度的80% 。 原則上，您可能認為我們所要做的就是為我們的圖像設置特定的width和height ，對吧？

 .custom-size { height: 15em; width: 80%; }

好吧，如果你這樣做，你會看到圖像的縱​​橫比被搞砸了：

為了防止圖像在使用特定寬度和高度時失真，開發人員過去常常依賴（有些人仍然這樣做） div的 CSS background屬性。 因此，我們沒有使用img標籤添加圖像，而是創建了一個div容器：

 <div></div>

為所述div設置正確的尺寸，然後使用background-size和background-position屬性通過 CSS 添加實際圖像：

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

在這裡你可以看到結果：

通過在div標籤上使用 CSS background屬性來縮放和裁剪圖像是一個糟糕的解決方案，因為您不再使用語義正確的 HTML 標籤： img 。 此外， img標籤包含一系列很酷的屬性，這些屬性將導致網站更快、更易於訪問：描述圖像的alt屬性、使其響應的srcset 、 loading以延遲加載等等。

如果您想縮放和裁剪圖像以使其適合某些特定尺寸而不扭曲圖像本身，您所要做的就是使用object-fit和object-position CSS 屬性，它們的行為類似於background-size和background-position做：

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

如果將前面的規則應用於img標籤：

 <img class="custom-size" src="…/image.jpg" />

這是你得到的結果：

這正是你感興趣的，不是嗎？

如果您想了解有關此房產的更多信息，請點擊此處的鏈接，其中包含所有必要信息。

帶有媒體查詢的自適應設計

媒體查詢是一種機制，允許您根據訪問者訪問 Web 的設備或應用程序的特徵向您的網站添加 CSS 規則。 我很確定您對它們有些熟悉，因為媒體查詢是構建響應式網站的基礎，但是您可以使用它們做更多事情！

經典媒體查詢

在 CSS 樣式表中使用媒體查詢就像在@media關鍵字中添加兩件事一樣簡單：一方面，描述媒體查詢何時處於活動狀態的條件，另一方面，應該設置的 CSS 規則集滿足條件時加載。 這就是為什麼媒體查詢是構建響應式設計的基礎：您只需根據訪問者瀏覽器的width應用一組或另一組規則。

例如，假設您要更改以下段落的側邊欄：

Lorem ipsum dolor sit amet, consectetur adipiscing elit。 門廊上的獅子有時柔軟醜陋，但顫抖著戶外元素。 但對創業者的需求叫做熱應力。 保留微波爐，但我的門總是或有時是大眾作者。 Android 和 Nunc sodales interdum、tincidunt erat ac、tincidunt elit。 然而，ultricies ac，arcu metus Sed congue。 為方便起見，害怕獅子座增強蛋白質。 是一個tellus orci，tempor id egestas nec，至少得到一些玩家。

以便它根據瀏覽器的寬度使用彩虹中的所有顏色。 以下是通過 CSS 實現此行為的方法：

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

很容易，對吧？ 每次瀏覽器的寬度超過某個閾值時，我們只需要應用不同的顏色。 請注意，我們使用移動優先的方法來實現這一點，因為隨著屏幕變大，會應用“新”規則。 改變窗口的寬度，你會看到結果。

如何使用 CSS 實現暗模式

黑暗模式現在很流行，無論是在移動設備還是桌面設備上。 您是否知道有一個媒體查詢可以查看用戶是否更喜歡深色模式？ 使用媒體查詢prefers-color-scheme ，您可以查看用戶喜歡light方案還是dark方案。 這意味著您現在可以構建網站的兩個版本，使其符合所有訪問者的偏好。

例如，考慮以下 HTML 片段：

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

以及這些 CSS 規則：

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

根據您的設置，您會看到之前 HTML 片段的“動態”部分看起來像淺色主題或深色主題：

很酷吧？ 而且很簡單！

其他有趣的媒體查詢用例

你可以使用很多媒體查詢（你有一個完整的列表在這裡），但我想特別關註一個。 具體來說，我想給大家解釋一下如何根據頁面是在瀏覽器中顯示還是即將打印來應用不同的樣式。 您所要做的就是在媒體查詢中使用print或screen關鍵字，如下所示：

 @media print { … } @media screen { … }

或者創建兩個單獨的 CSS 文件，一個用於每個用例，並使用link標籤的media屬性將它們包含在您的 HTML 中：

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

有趣的是，您可以創建一個樣式表，將您的網站轉換為設計用於打印的內容。 因此，例如，您可以隱藏在印刷版本中沒有意義的網絡動態部分（如菜單或表單）。 或者您甚至可以確保打印時丟失的某些內容變得可見，例如鍊接的目標 URL：

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

其結果如下：

Lorem ipsum dolor sit amet, consectetur adipiscing elit。 Vestibulum mollis leo in turpis interdum，pharetra velit elementum。 Nam eget lacus sed lacus dictum scelerisque。 Proin porta ligula sed mi semper, vel interdum massa auctor。 Pellentesque et massa congue，tincidunt erat ac，tincidunt elit。 Sed ac dolor metus。 Nam commodo metus sed ligula consectetur interdum。 Curabitur odio est, tempor id egestas nec, aliquam at nisl。

CSS 變量

最後，讓我們談談另一個驚人的 CSS 特性：CSS 自定義屬性（也稱為 CSS 變量）。 複雜的網站有大量的 CSS，並且一遍又一遍地重複相同的值是很常見的。 例如，您的調色板、邊框、填充等在所有地方都被使用。 好吧，CSS 變量簡化了這種複雜性。 它們對於輕鬆實現暗模式非常有用！

CSS 變量正是您所想的：一種在有意義的名稱後面存儲和重用特定 CSS 值的方法。 比#333更容易理解--main-text-color是什麼，不是嗎？

使用以雙連字符 ( -- ) 開頭的自定義屬性名稱和可以是任何有效 CSS 值的屬性值來聲明自定義屬性。 像任何其他屬性一樣，這寫在規則集中，如下所示：

 element { --main-color: red; --main-padding: 2em 1em; }

您在定義 CSS 變量的規則塊中使用的選擇器決定了它的範圍。 也就是說，如果您在div.banner規則中定義變量，則該變量將僅在該範圍內可用。 但是，最常見的是使用偽類:root在全局範圍內創建變量：

 :root { --main-color: red; --main-padding: 2em 1em; }

為了使用 CSS 變量，您只需在var函數中指定其名稱：

 p { color: var(--main-color); padding: var(--main-padding); }

CSS 來幫助你

網頁的 HTML 結構就像房子的地基——如果你想建立一個健全的東西，你需要一個堅實的基礎。 創建網頁時，請確保使用語義正確且乾淨的 HTML 樹。 這將導致一個頁面適用於所有訪問者的所有瀏覽器，並且在其上應用 CSS 技巧將變得簡單而有效。

我希望你喜歡今天的帖子。 如果你這樣做了，請與你的朋友分享

威廉·戴尼奧 (William Daigneault) 在 Unsplash 上的特色圖片。