時間：2023-09-06 02:30:01 | 來源：網(wǎng)站運營
時間：2023-09-06 02:30:01 來源：網(wǎng)站運營
3 種在任何瀏覽器中使用 CSS 網(wǎng)格的后備方案：“特性查詢 是使用 CSS 的 at 規(guī)則如果你曾經(jīng)使用過媒體查詢，那么我想，你也會非常熟悉@supports創(chuàng)建的。它給予 Web 開發(fā)者一種有效的方法去測試瀏覽器是否支持某個確定特性，而后提供基于測試結(jié)果生效的 CSS 。在此指南中你將學(xué)習(xí)如何使用特性查詢實現(xiàn)漸進式增強?！?— [MDN Web文檔]（https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries）
在線咨詢
@supports 的語法，畢竟兩者是很相似的。不過在這里我們使用 @supports 不是希望基于瀏覽器的視口大小來調(diào)整布局，而是希望基于 CSS 屬性的支持與否來定義指定的樣式。@supports，我們將檢查瀏覽器是否支持 Grid。如果支持，我們就會使用 Grid 來增強布局。@supports 查詢基本的 display：grid 功能：@supports (display: grid) { /* ... code here */}完整的例子如下：<!DOCTYPE html><html lang="en"><head> <title>生產(chǎn)中的 Grid</title> <meta charset="UTF-8"/></head><body><style> #container { display: flex; flex-direction: column; gap: 10px; border: 1px solid #000; padding: 10px; } @supports (display: grid) { #container { display: grid; } @media (min-width: 768px) { #container { grid-template-columns: 100px 1fr 100px; } } } .side1 { padding: 10px; background-color: #CEB992; } .side2 { padding: 10px; background-color: #CEB992; } .content { padding: 10px; min-height: 400px; background-color: #5B2E48; } body { color: #FFF; font-weight: 500; }</style><div id="container"> <div class="side1"> 側(cè)邊欄 </div> <div class="content"> 主要內(nèi)容 </div> <div class="side2"> 側(cè)邊欄 </div></div></body></html>注意，我們并沒有斷言 Grid 特性 grid-template-columns。如果瀏覽器不支持該怎么辦？在這種情況下，Grid 將退回到默認的定位算法 —— 它將堆疊 div。在我們的示例中，該方法可以正常運行，因此我們不需要再去進行額外的工作。CSSSupportsRule 來訪問 @supports。讓我們看一下它的定義：CSSSupportsRule接口代表一個 CSS@supports和at-rule— [MDN Web文檔]（https://developer.mozilla.org/en-US/docs/Web/API/CSSSupportsRule）
function supports(property: string, value: string): boolean;我們在一個假設(shè)的案例中使用看看。如果用戶使用的瀏覽器不支持 Grid 布局功能，它就會給用戶發(fā)出警告。不過我們可不能在生產(chǎn)環(huán)境中這樣做，這只是一個有趣的例子。if (!CSS || !CSS.supports('display', 'grid')) { // ...}請注意，某些瀏覽器可能不支持 CSS.supports，因此我們還添加了空檢查。<!DOCTYPE html><html lang="en"><head> <title>生產(chǎn)中的 Grid</title> <meta charset="UTF-8"/></head><body><style> #container { display: flex; flex-direction: column; gap: 10px; border: 1px solid #000; padding: 10px; } @supports (display: grid) { #container { display: grid; } @media (min-width: 768px) { #container { grid-template-columns: 100px 1fr 100px; } } } .side1 { padding: 10px; background-color: #CEB992; } .side2 { padding: 10px; background-color: #CEB992; } .content { padding: 10px; min-height: 400px; background-color: #5B2E48; } body { color: #FFF; font-weight: 500; }</style><script> (function warnSupport() { if (!CSS || !CSS.supports('display', 'grid')) { alert('Warning your Browser does not support the latests features. Consider switching to a newer one') } })();</script><div id="container"> <div class="side1"> 側(cè)邊欄 </div> <div class="content"> 主要內(nèi)容 </div> <div class="side2"> 側(cè)邊欄 </div></div></body></html>CSS.supports 是用于以編程方式創(chuàng)建后備布局的優(yōu)秀工具。如果我們必須處理非常復(fù)雜的布局，那么我們可能需要選用此方法而不是 CSS 特性查詢。有了這種程序化的后備方案，我們可以使用它來創(chuàng)建 Web 組件。#container { display: flex; display: grid; /* 如果 Grid 不可用，則第二個屬性聲明將失效，且瀏覽器會應(yīng)用第一個屬性聲明的值 `flex` */}我們可以以更簡單的方式重寫先前的 CSS 特性查詢示例：<!DOCTYPE html><html lang="en"><head> <title>生產(chǎn)中的 Grid</title> <meta charset="UTF-8"/></head><body><style> #container { display: flex; display: grid; flex-direction: column; gap: 10px; border: 1px solid #000; padding: 10px; } @media (min-width: 768px) { #container { grid-template-columns: 100px 1fr 100px; } } .side1 { padding: 10px; background-color: #CEB992; } .side2 { padding: 10px; background-color: #CEB992; } .content { padding: 10px; min-height: 400px; background-color: #5B2E48; } body { color: #FFF; font-weight: 500; }</style><script> (function warnSupport() { if (!CSS || !CSS.supports('display', 'grid')) { alert('Warning your Browser does not support the latests features. Consider switching to a newer one') } })();</script><div id="container"> <div class="side1"> 側(cè)邊欄 </div> <div class="content"> 主要內(nèi)容 </div> <div class="side2"> 側(cè)邊欄 </div></div></body></html>這種后備方案雖然簡單但是功能強大。在許多情況下它很有用 —— 畢竟我們可能無法對所有要使用的 Grid 功能都進行查詢。subgrid 進行回退吧。我們應(yīng)該如何使用呢？subgrid 的場景，劃重點：#content { grid-template-columns: inherit; grid-template-columns: subgrid;}在此示例中，當(dāng)不支持 subgrid 時候，它將僅繼承父級的 Grid 定義。這將創(chuàng)建一個大致相似的布局。grid-template-columns 微調(diào)到某些固定大小，或者在我們的特定情況下最適合的大小。<!DOCTYPE html><html lang="en"><head> <title>Grid 案例</title> <meta charset="UTF-8"/></head><body><style> body { color: white; text-align: center; box-sizing: content-box; margin: 20px; } .palette-1 { background-color: #CEB992; } .palette-2 { background-color: #471323; } .palette-3 { background-color: #73937E; } .palette-4 { background-color: #5B2E48; } .palette-5 { background-color: #585563; } #container { padding: 10px; background-color: #73937E; height: 500px; width: calc(100vw - 60px); display: grid; grid-template-rows: repeat(8, 1fr); grid-template-columns: max-content 1fr 1fr 1fr; row-gap: 1rem; } .item { padding: 20px; } .content-main { grid-column: span 3; } #content { background-color: #73937E; grid-column: 1 / -1; display: grid; grid-template-columns: inherit; grid-template-columns: subgrid; column-gap: 1rem; }</style><div id="container"> <div id="content"> <div class="content-left item palette-5"> 標(biāo)題 </div> <div class="content-main item palette-4"> </div> </div> <div id="content"> <div class="content-left item palette-5"> 另一個標(biāo)題 </div> <div class="content-main item palette-4"> </div> </div></div></script></body></html>至于結(jié)果：subgrid，更多的用戶都可以看到布局的像素級完美版本！subgrid 之類的最新功能。如果發(fā)現(xiàn)譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改并 PR，也可獲得相應(yīng)獎勵積分。文章開頭的 本文永久鏈接 即為本文在 GitHub 上的 MarkDown 鏈接。
掘金翻譯計劃 是一個翻譯優(yōu)質(zhì)互聯(lián)網(wǎng)技術(shù)文章的社區(qū)，文章來源為 掘金 上的英文分享文章。內(nèi)容覆蓋 Android、iOS、前端、后端、區(qū)塊鏈、產(chǎn)品、設(shè)計、人工智能等領(lǐng)域，想要查看更多優(yōu)質(zhì)譯文請持續(xù)關(guān)注 掘金翻譯計劃、官方微博、本站專欄。
關(guān)鍵詞：方案,使用,任何,瀏覽
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
