CSS的簡介@supports Rule（功能查詢）-css教學-PHP中文網

首頁

web前端

css教學

CSS的簡介@supports Rule（功能查詢）

Jennifer Aniston

Feb 23, 2025 am 09:11 AM

CSS的簡介@supports Rule（功能查詢）

鑰匙要點

> CSS中的@supports規則允許開發人員實現功能檢測，檢查瀏覽器是否支持某些CSS屬性/值對並相應地應用樣式。這是一種逐步增強方法來處理對高級技術的不平衡瀏覽器支持的一部分。
> @supports規則語法包括邏輯運算符，例如“ and”，“ or”和“不”，允許一次測試多個條件。將括號的正確使用在將條件分組在一起時至關重要。
>大多數現代瀏覽器都支持@Supports規則，但Internet Explorer 11和Opera Mini卻沒有。因此，開發人員應定義所有目標瀏覽器都可以處理的基礎樣式，並使用@supports覆蓋和補充可以處理新功能的瀏覽器。
>解決瀏覽器對最新技術的不均勻支持的兩種一般方法是優雅的降級和漸進式增強。

優雅的降級利用高級技術來設計用於復雜的用戶體驗和功能。能力較低的瀏覽器的用戶仍然能夠訪問該網站，但功能和瀏覽體驗水平下降。

> 通過逐步增強，開發人員通過設計大多數瀏覽器可以支持的用戶體驗來建立基線。他們的應用程序提供了瀏覽器功能的內置檢測，它們用來使其提供更先進的功能和更豐富的瀏覽體驗。

>漸進式增強方法中最廣泛採用的工具是Modernizr JavaScript庫。

現代izr編程檢查瀏覽器是否支持下一代Web技術，並因此返回True還是False。憑藉這些知識，您可以利用新功能來支持瀏覽器，並且仍然具有可靠的餐飲方式。

聽起來不錯，有一段時間以來釀造的東西甚至更好。您可以使用本機CSS功能查詢執行功能檢測

在這篇文章中，我將更深入地研究@supports及其關聯的JavaScript API。

>使用@supports Rule

檢測瀏覽器功能

> @supports規則是CSS3條件規範規範的一部分，其中還包括我們所有人在響應式設計工作中使用的更廣泛的@Media規則。

>使用媒體查詢時，您可以檢測顯示功能，例如視口寬度和高度，@supports允許您檢查CSS屬性/值配對的瀏覽器支持。 >>>>

考慮一個基本示例，可以說您的網頁顯示了您想使用CSS融合來增強的藝術品。的確，CSS混合模式在非支持瀏覽器中優雅地降低。但是，您可能希望通過顯示同樣特殊的東西（即使不是同樣壯觀）來使非支持瀏覽器的用戶默認顯示的內容，而不是默認情況下顯示的內容。這就是您將如何使用@supports在樣式表中執行CSS混合的支票：

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

>將不同的樣式應用於沒有混合模式支持的瀏覽器，您將使用此語法：>

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

有幾件事要注意：

>
添加尾聲！在您要測試的聲明中很重要不會影響您的代碼的有效性。

html：

CSS：

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027307262599.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS的簡介@supports Rule（功能查詢）" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

>在Codepen上查看演示：

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

>請參閱codepen上的sitepoint（@sitepoint）的筆@supports Rule Demo。

一次測試多個條件

在使用@support進行功能測試時，您不僅限於一次測試條件。結合邏輯運算符，例如和或和或和或已提到的未運算符，您可以一次測試多個功能。

和

連接

操作員測試是否存在多個必需

>條件：

： >通過使用或關鍵字，您可以測試一組樣式的多個替代功能。如果其中一些替代方案需要供應商的屬性或價值前綴：>

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

>您還可以在相同的@supports規則中與OR結合或與OR進行測試條件：

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

當您將許多條件分組在一起時，括號的正確使用至關重要。擁有和，或者，而不是混合關鍵字無效。另外，您對括號內的條件進行分組的方式建立了評估它們的順序。在上面的摘要中，首先評估析取或條件，然後根據和關鍵字引入的進一步要求的條件評估結果答案。

CSS的簡介@supports Rule（功能查詢）

>非關鍵字可讓您一次測試一個條件。例如，下面的代碼無效：

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

相反，您需要對

進行分組>與括號內的非關鍵字否定的條件。這是以上片段的更正版本：>

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  alt="CSS的簡介@supports Rule（功能查詢）" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

>最後，請確保您在一個和或或或或或或。

行動中的操作員

如果瀏覽器使用以下語法支持漸變和混合模式，則可以應用一組樣式（我將下面的代碼分為多行以出於顯示目的）：

由於一些較舊的Android瀏覽器需要線性梯度的-webkit-前綴，所以讓我們通過將這種進一步的條件納入@Supports塊來檢查瀏覽器支持：

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

>假設您的網站使用亮度和飽和混合模式，在撰寫本文時，Safari不支持。您仍然想為這些瀏覽器提供替代樣式，因此，您可以使用@supports不使用@supports設置適當的連接條件，

本節的所有演示都可以在Codepen上獲得：

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

>請參閱@supports by sitepoint（@sitepoint）上的多個功能測試的筆演示。

帶有CSS功能查詢的JavaScript

<span><span>@supports (property1: value1) or (-webkit-property1: value1)</span> {
</span>  <span>element {
</span>    <span>-webkit-property1: value1;
</span>    <span>property1: value1;
</span>  <span>}
</span><span>}</span>

>您可以使用JavaScript CSS接口和supports（）函數來利用CSS功能查詢。您可以通過兩種方式中的任何一個編寫CSS.Supports（）函數。 >

>較早和最廣泛支持的語法採用兩個參數，即 property

>和

value

，並返回一個布爾值為或false值：

確保您將屬性及其相應的值放置在報價中。該規范明確指出，如果以下兩個條件符合以下兩個條件：>

>該屬性是瀏覽器支持的“ CSS屬性名稱的字面匹配”；

字面匹配

規範意味著CSS ESCAP不會處理，並且沒有修剪空白。因此，不要逃脫角色或留下尾隨的空白，否則測試將返回false。 替代性，較新的語法在括號內只有一個參數：>

使用此語法使用和 /或關鍵字進行多種條件進行測試。

這是一個快速示例。假設您想測試瀏覽器是否支持亮度混合模式。如果這樣做，您的JavaScript會動態地向目標元素添加一類光度混合物，否則它將添加一類NoluminIsity。然後，您的CSS將相應地對元素進行樣式。

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

這是CSS：

如果您遵循兩項詞語語法，則JavaScript代碼段可能如下：>

如果您喜歡最新的單詞語語法，只需將上面代碼的相應行替換為下面的代碼線：>

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

可以隨時查看演示：

>請參閱codepen上的sitepoint（@sitepoint）的CSS特徵查詢的筆JavaScript API。

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  alt="CSS的簡介@supports Rule（功能查詢）" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

>瀏覽器支持

>除了Internet Explorer 11和Opera Mini外，主要瀏覽器的所有最新版本都支持@Supports規則。 @supports已為現實世界做好準備嗎？我用蒂法尼·布朗（Tiffany Brown）的話找到了這個問題的最佳答案：

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

…要警惕@supports中定義關鍵任務風格…

> 定義您的基本樣式 - 您的目標

>的每一種樣式瀏覽器可以處理。然後使用@supports…覆蓋和補充

瀏覽器中的這些樣式可以處理新功能。

> CSS Master，p.303

結論

>在本文中，我使用@supports Rule（又稱功能查詢）探索了本機CSS瀏覽器功能檢測。我還瀏覽了相應的JavaScript API，它使您可以使用Flexible CSS.Supports（）方法來檢查最新CSS屬性的瀏覽器支持。
瀏覽器對CSS功能查詢的支持很好，但不能涵蓋所有基礎。但是，如果您想在項目中使用@supports，則正如蒂法尼·布朗（Tiffany Brown）所建議的那樣，CSS文檔中的策略性放置以及Han Lin Yap的CSS-Support.js Polyfill可以提供幫助。

如果您嘗試了本文中的演示或使用@supports擁有真實的經驗，我很想听到您的來信。

>關於CSS @Supports規則
的常見問題
> CSS @supports規則是什麼？它如何工作？
> 是的，您可以使用邏輯運算符在CSS @Supports規則中使用多個條件。 “和”操作員允許您檢查是否支持多個功能，而“或”操作員檢查至少一個功能是否支持。 “非”操作員檢查是否不支持功能。例如，@supports（顯示：網格）和（顯示：flex）{ / *如果支持網格和flex的樣式 * /}。 CSS功能？
>您可以通過在@supports規則中使用“非”操作員來檢查瀏覽器是否不支持CSS功能。例如，@supports not（Display：Grid）{ / *如果不支持網格，則要應用 * /}。如果瀏覽器不支持CSS Grid。
>如果瀏覽器不支持@supports Rule，如果瀏覽器不支持 @ @>支持規則，它將忽略整個規則，包括其中的樣式。這意味著您可以安全地使用@supports，而不必擔心在較舊的瀏覽器上打破網站。但是，為不支持您要使用@supports測試的功能的瀏覽器提供後備樣式。 @supports規則，就像您可以嵌套其他CSS規則一樣。這使您可以以更複雜的方式測試支持多個功能的支持。例如，您只有在瀏覽器支持CSS網格和Flexbox。支持規則是CSS中特徵檢測的可靠方法，但並不完美。一些較舊的瀏覽器不支持@supports，一些瀏覽器可能會報告誤報或負面因素。在多個瀏覽器中測試您的網站總是一個好主意，以確保其按預期工作。
我可以使用@supports規則使用JavaScript？ CSS功能支持CSS.Supports（）方法。此方法與@supports規則相似，但允許您在JavaScript代碼中動態測試功能支持。
是否有任何工具可以檢查瀏覽器對CSS功能的支持？最受歡迎的是我可以使用，它可以提供有關瀏覽器支持的最新信息。是的，您可以將@support與媒體查詢結合使用，以根據功能支持和視口尺寸應用樣式。這對於創建還利用新CSS功能的響應式設計非常有用。
>
> @supports規則有哪些常見用例？
>
@supports規則通常用於僅在瀏覽器支持時，才能應用高級CSS功能，從而逐步增強網站。這可以包括CSS網格，Flexbox，自定義屬性等內容。它也用於為不支持這些功能的瀏覽器提供後備樣式。
>