<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          利好前端開發(fā)!Chrome / Edge / Firefox /Safari 決定合力解決 Web 兼...

          共 2558字,需瀏覽 6分鐘

           ·

          2022-03-22 10:10

          來源:OSC開源社區(qū)

          瀏覽器制造商 Apple、Google、Microsoft 和 Mozilla ,以及軟件公司 Bocoup 和 Igalia 正在合力制定一項(xiàng)名為?Interop 2022?的 Web 兼容性規(guī)范,以使 Web 技術(shù)和代碼在不同的設(shè)備和瀏覽器中有統(tǒng)一的渲染效果(利好前端開發(fā))。

          這是有史以來第一次,所有市場(chǎng)上主要的瀏覽器供應(yīng)商和利益相關(guān)者齊心協(xié)力地解決瀏覽器兼容性問題。此前,互相為競爭關(guān)系的瀏覽器廠商常常在 Web 技術(shù)的兼容性上出現(xiàn)分歧,尤其是 IE 還活著的時(shí)候,前端一個(gè)頁面三套代碼的情況十分常見。過去幾年,隨著監(jiān)管機(jī)構(gòu)在競爭問題上向蘋果和谷歌施壓,這些頂級(jí)瀏覽器制造商之間才開始頻繁合作,而不是專注于搞自家瀏覽器的專屬功能。2019 年谷歌和微軟合作發(fā)起過一個(gè)名為 Compat 2021 的 Web 兼容性標(biāo)準(zhǔn),該標(biāo)準(zhǔn)促進(jìn)了 CSS grid ?和 CSS flexbox ?這兩個(gè)技術(shù)的發(fā)展,Mozilla 參與了該計(jì)劃的討論,但蘋果和其 WebKit 團(tuán)隊(duì)并未參與此計(jì)劃 。新的 Interop 2022 規(guī)范整體偏向于 15 個(gè)領(lǐng)域,其中 10 個(gè)領(lǐng)域是綜合去年 CSS 2021 現(xiàn)狀調(diào)查和 GitHub 投票得出的結(jié)論,大多數(shù)前端開發(fā)人員認(rèn)為這些領(lǐng)域在跨瀏覽器存在兼容性問題會(huì)特別難處理:
          • Cascade Layers(級(jí)聯(lián)層)

          有了這個(gè)標(biāo)準(zhǔn),網(wǎng)站可以創(chuàng)建一個(gè)“框架”層和一個(gè)“自定義”層,然后將所有第三方框架的 CSS 樣式分配到框架層,在自定義層中編寫自定義樣式,而且自定義層的所有 CSS 樣式,優(yōu)先級(jí)都可以比框架層要高(無視選擇器)。8e0dea53da48249c8407f93f157b238a.webp
          • Color Spaces and Functions(色彩空間/函數(shù))

          早期,Web 開發(fā)使用 sRGB 顏色空間,通常以十六進(jìn)制、rgb()rgba()hsl()?格式表達(dá)色彩。但隨著顯示技術(shù)的發(fā)展,sRBG 不夠用了,因此 Interop 2022 包括對(duì)三種擴(kuò)展顏色空間(LAB、LCH、P3)的支持測(cè)試,以及兩種通過函數(shù)在 CSS 中編寫顏色的方法:color-mix?和?color-contrastcolor-mix(): 取兩種顏色,并返回在指定顏色空間中按指定量混合它們的結(jié)果。color-contrast():從顏色列表中選擇與指定單色具有最高對(duì)比度的顏色。
          • ?Containment(CSS?contain?屬性)

          contain?屬性用于識(shí)別和測(cè)量特定容器的大小,然后根據(jù)該容器的大小應(yīng)用不同的樣式。有點(diǎn)像媒體查詢 @media,但不是測(cè)量視窗大小,而是測(cè)量容納內(nèi)容的盒子的大小。
          • Dialog Element(對(duì)話框元素)

          該?Dialog元素可以創(chuàng)建覆蓋型的窗口,也就是對(duì)話框,比如?::backdrop?偽元素可以為一個(gè)模態(tài)框下方的背景設(shè)置樣式。可在此博客了解對(duì)話框元素?。
          • Form Fixes(表單修復(fù))

          關(guān)于表單的一些操作性,包括?appearance?屬性、、禁用表單控件
          上的事件,以及輸入元素、表單提交和表單驗(yàn)證的錯(cuò)誤處理等。
          • Scrolling (滾動(dòng)控件)

          這條是關(guān)于頁面滾動(dòng)的兼容性,Scroll snap 提供了控制界面滾動(dòng)方式和內(nèi)容顯示方式的工具。CSS 中的?scroll-behavior?屬性設(shè)置當(dāng)滾動(dòng)由導(dǎo)航或 CSSOM 滾動(dòng) API 觸發(fā)時(shí),滾動(dòng)框會(huì)出現(xiàn)什么行為。overscroll-behaviorCSS 屬性決定了瀏覽器在到達(dá)滾動(dòng)區(qū)域的邊界時(shí)會(huì)做什么。
          • Subgrid(子網(wǎng)格)

          Subgrid 可輕松將網(wǎng)格容器的后代元素放置在該網(wǎng)格上,在跨復(fù)雜布局排列項(xiàng)目時(shí)無需考慮 DOM 結(jié)構(gòu)。比如下面三個(gè)卡片組件的頁眉和頁腳都對(duì)齊了,即使每張卡片都有獨(dú)立的網(wǎng)格(grid),這是因?yàn)槊繌埧ㄆ际强缭礁妇W(wǎng)格的三行項(xiàng)目,然后使用子網(wǎng)格 Subgrid 將這些行繼承到每個(gè)卡片中。be6d11b3562b1074cb4be36ab2ae7110.webp
          • Typography and Encodings(字體設(shè)計(jì)和編碼)

          排版和編碼包含一系列影響 Web 排版的測(cè)試,包括 font-variant-alternates, font-variant-position, ic 單元和 CJK(中日韓)文本編碼。字體功能是優(yōu)化排版的強(qiáng)大屬性,但前提是跨瀏覽器兼容。
          • Viewport Units(視窗單位)

          新的視窗單位考慮包含標(biāo)題欄的布局,引入了最大、最小和動(dòng)態(tài)視窗單位,比如 ?100svh?指 ?100% 最小可能視窗高度,100lvh?指 100% 最大可能視窗高度,100dvh?指 100% 動(dòng)態(tài)視窗高度——該值將隨著用戶滾動(dòng)而改變。9dbb4c7b03ac6b1a142079bd437e4d38.webp同理,svw、?lvw、 和?dvw?用于寬度單位。
          • Web Compat(Web ?兼容)

          瀏覽器中的特定錯(cuò)誤可能不導(dǎo)致某些網(wǎng)站無法按預(yù)期渲染,或者一個(gè)瀏覽器可能與 Web 標(biāo)準(zhǔn)不同,從而導(dǎo)致網(wǎng)站或 Web 應(yīng)用程序用戶的體驗(yàn),Interop 2022 旨在通過 Web 兼容性測(cè)量來捕獲和解決這些問題。以上是 10 個(gè)新的 Web 兼容性規(guī)范,此外還有 5 個(gè)從 Compat 2021 繼承下來的規(guī)范標(biāo)準(zhǔn):
          • Aspect Ratio(屏幕縱橫比)

          • Flexbox(彈性盒模型)

          • Grid(網(wǎng)格)

          • Sticky Positioning(粘滯定位)

          • Transforms(變換盒模型)

          這部分規(guī)范已經(jīng)非常常用,在此不展開介紹 。從根本上講,Interop 2022 是一個(gè)不斷發(fā)展的指標(biāo),用于評(píng)估各大瀏覽器對(duì)上述 Web 標(biāo)準(zhǔn)的兼容程度。Interop 2022 儀表板?有一個(gè)評(píng)分系統(tǒng),評(píng)估各大瀏覽器的整體兼容程度:82feef3a91043c8e94a971da78627419.webp這玩意全年不斷更新,還會(huì)實(shí)時(shí)顯示各大瀏覽器的工程師修復(fù)錯(cuò)誤、實(shí)現(xiàn)新功能和改進(jìn)測(cè)試的進(jìn)展,以及在每個(gè)標(biāo)準(zhǔn)的工程進(jìn)度:6e57a0902bb7ead901158bb933dc6be2.webp題外話而 Apple 網(wǎng)絡(luò)開發(fā)布道者 Jen Simmons 在 Interop 2022 的博客中說:“Apple 非常關(guān)心 Web 的健康,以及 Web 標(biāo)準(zhǔn)的可互操作(兼容性)實(shí)現(xiàn)?!边@似乎跟大多數(shù)前端人員的實(shí)際想法有些出入...

          前端開發(fā)的春天要來了么?你覺得呢?

          祝 您:2022 年暴富!萬事如意!

          點(diǎn)贊和在看就是最大的支持,eda27593e06c771331bba6ce869c7b05.webp比心??eda27593e06c771331bba6ce869c7b05.webp

          瀏覽 65
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  久久恋精品五月天婷婷视频 | 成人免费看片 无需下载 | 国产AV片 色哟哟 | 五月天在线无码 | 天天操天天摸天天撸 |