建站
咨詢
售后
建站咨詢
新聞中心
作為前端開發(fā)者，我們主要關(guān)注的重點(diǎn)在于 Web 方面。
在過去的一年，Safari? 的瀏覽器內(nèi)核 WebKit? 發(fā)布了超過 162? 項(xiàng)新功能和改進(jìn)點(diǎn)，包括新的 dialog? 元素、懶加載、:has()? 偽類、Web Locks API、File System Access API?、對(duì) WebAssembly 的多項(xiàng)改進(jìn)等等。
在本次大會(huì)中，蘋果公司宣布了 Safari 16 beta? 版本的發(fā)行，我們一起來看看 Safari 16 beta 版本帶來了哪些新的能力。
Web Inspector Extensions
Safari 16? 帶來了對(duì) Web Inspector Extensions? （類似于 Chrome? 的 Devtools Extension?）的支持。如果你的團(tuán)隊(duì)使用 React、Angular、Vue? 或 Ember? 這些強(qiáng)大的框架，或者可能是流行的測(cè)試套件或其他開發(fā)者服務(wù)?，F(xiàn)在有了 Safari Web Inspector Extensions，你就可以安裝來自這些框架和服務(wù)的開發(fā)工具擴(kuò)展，從而為你的開發(fā)提效。
和 Chrome? 開發(fā)工具擴(kuò)展的 JavaScript API? 也基本一樣。你可以輕松的把現(xiàn)有的 Chrome Extension? 移植到 Safari? 上，你只需要在 App Store 就可以搜到這些擴(kuò)展。
當(dāng)然，流行的第三方框架和服務(wù)的擴(kuò)展并不是 Web Inspector Extensions? 唯一令人興奮的用途。通常，對(duì)開發(fā)者工具的小幅增強(qiáng)就可以對(duì)工作流程產(chǎn)生巨大影響。要了解構(gòu)建 Safari Web? 擴(kuò)展的基礎(chǔ)知識(shí)、如何將現(xiàn)有擴(kuò)展轉(zhuǎn)換為與 Safari? 一起使用，以及如何在 App Store 打包發(fā)布，可以看看這個(gè)視頻講解 https://developer.apple.com/videos/play/tech-talks/110148/。
Web Inspector Extensions? 也帶來了對(duì) Safari Web Extensions? 的其他改進(jìn)，包括能夠同步跨 iOS、iPadOS? 和 macOS 啟用的擴(kuò)展。
容器查詢
在響應(yīng)式布局布局中，經(jīng)常使用媒體查詢（Media Queries）檢測(cè)視窗的寬高，實(shí)現(xiàn)自元素樣式的自動(dòng)調(diào)整。但是在一些頁面設(shè)計(jì)中，元素的容器尺寸發(fā)生變化時(shí)，元素的樣式也需要隨之變化。很顯然，媒體查詢無法支持這種場(chǎng)景。
CSS? 容器查詢就是來解決這個(gè)問題的，它一直是 Web? 開發(fā)者夢(mèng)寐以求的功能，簡單來說: 容器查詢?cè)试S開發(fā)者根據(jù)容器元素的大小來設(shè)置元素的樣式。它類似于 @media 查詢，不同之處在于它根據(jù)容器的大小而不是視口的大小進(jìn)行判斷。
Safari 16 支持了一些新的容器查詢單位：
- cqw 查詢?nèi)萜鲗挾鹊?1%
- cqh 查詢?nèi)萜鞲叨鹊?1%
- cqi 查詢?nèi)萜?inline 尺寸的 1%
- cqb 查詢?nèi)萜?block 尺寸的 1%
- cqmin cqi 或者 cqb 的最小值
- cqmax cqi 或者 cqb 的最大值
- macOS 的 Web 推送
macOS Ventura? 上的 Safari 16? 即將推出 Web Push?。你可以遠(yuǎn)程向你的網(wǎng)站和 Web? 應(yīng)用程序的用戶發(fā)送通知?！讣词?nbsp;?Safari 沒有運(yùn)行，也可以發(fā)送這些通知」。
它使用與其他瀏覽器相同的 Web? 標(biāo)準(zhǔn)：Push API? 和 Notifications API? 以及 Service Worker。
用戶可以通過用戶手勢(shì)（例如單擊按鈕）來選擇接收通知。然后，系統(tǒng)會(huì)提示他們授予你的網(wǎng)站或應(yīng)用發(fā)送通知的權(quán)限。用戶能夠在通知中心查看和管理通知，并在通知設(shè)置中自定義樣式并關(guān)閉每個(gè)網(wǎng)站的通知。
Safari? 中的 Web Push? 會(huì)使用和 Apple? 推送相同的通知服務(wù)，該服務(wù)支持所有 Mac? 和 iOS 設(shè)備上的本地推送。
另外， 蘋果還計(jì)劃在 2023? 年實(shí)現(xiàn)適用于 iOS? 和 iPadOS? 的 Web Push。
子網(wǎng)格
CSS Grid 布局? 在 2017? 年 3? 月發(fā)布，它徹底改變了 Web? 布局設(shè)計(jì)的可能性。然而，Subgrid? 將 Grid? 帶到了另一個(gè)層次，它使得跨復(fù)雜布局排列項(xiàng)目成為可能，而不受 HTML 結(jié)構(gòu)的限制。
故名思議，除了操縱同級(jí)別的網(wǎng)格，它擁有操縱子網(wǎng)格的能力，它可以實(shí)現(xiàn)比 Grid 更復(fù)雜的布局，比如下面的例子：
.grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(4, minmax(100px, auto));
gap: 20px;
}
.item {
display: grid;
grid-column: 2 / 7;
grid-row: 2 / 4;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
row-gap: 0;
}
.subitem {
grid-column: 3 / 6;
grid-row: 1 / 3;
}另外， Safari? 的 Grid Inspector 讓你可以讓你非常方便的開發(fā)和調(diào)試子網(wǎng)格布局。
Flexbox Inspector
繼去年的 Grid Inspector? 推出之后，Safari 16? 添加了 Flexbox Inspector。
Flexbox Inspector? 可以為你提供更好的 Flexbox 布局可視化，可以幫助你更好的從視覺上區(qū)分空閑空間和間隙。
可訪問性改進(jìn)
Safari 16? 重新構(gòu)建了 WebKit? 在 macOS? 上的可訪問性支持，提高了性能和響應(yīng)能力。這一改進(jìn)允許 WebKit? 在比以前更短的時(shí)間內(nèi)為來自客戶端(如 VoiceOver? )的更多可訪問性請(qǐng)求提供服務(wù)。在一些復(fù)雜的網(wǎng)頁上，大量的無障礙請(qǐng)求耗時(shí)減少了 25%。
該版本還通過確保元素在可訪問性樹中正確表示，極大地改進(jìn)了對(duì)具有 display:contents 的元素的可訪問性支持。
動(dòng)畫改進(jìn)
CSS Offset Path? 為 Web? 開發(fā)者提供了一種沿任意形狀的自定義路徑設(shè)置動(dòng)畫的方法。offset-path? 屬性可讓你定義要沿其設(shè)置動(dòng)畫的幾何路徑。offset-anchor、offset-distance、offset-position、offset-rotate 屬性為你提供了額外的能力來細(xì)化被動(dòng)畫對(duì)象的精確運(yùn)動(dòng)。
#motion-demo {
offset-path: path('M20,20 C20,100 200,0 200,100');
animation: move 3000ms infinite alternate ease-in-out;
width: 40px;
height: 40px;
background: cyan;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}使用 Safari 16?，你現(xiàn)在可以為 CSS Grid 設(shè)置動(dòng)畫。這意味著你可以對(duì)行或列的大小進(jìn)行動(dòng)畫更改，這又為 Web 動(dòng)畫的實(shí)現(xiàn)開辟了一種新的可能性。
Shared Worker
Safari 16? 新增了一種新型的 Worker? —— Shared Worker?。與 Service Worker? 一樣，Shared Worker? 支持在后臺(tái)運(yùn)行 JavaScript，但其生命周期略有不同。
只要用戶對(duì)你的域打開任何 tab?，你的 Shared Worker? 就會(huì)運(yùn)行，并且對(duì)同一域打開的所有選項(xiàng)卡都可以共享同一個(gè) Shared Worker?。比如你讓一個(gè) WebSocket? 連接打開到代表多個(gè)選項(xiàng)卡進(jìn)行通信的服務(wù)器，就可以使用 Shared Worker 實(shí)現(xiàn)了。
其他
- 支持通過CSS overscroll-behavior 屬性控制當(dāng)瀏覽器滾動(dòng)條到達(dá)邊界時(shí)的行為；
- HTML input? 元素支持了
- CSP內(nèi)容安全策略? 支持了新的指令：worker-src。
分享文章：WWDC2022：哪些是前端開發(fā)者要關(guān)注的信息？
文章地址：http://www.5511xx.com/article/cdddsjp.html
