平台新聞：默認為邏輯CSS，FUGU API，自定義媒體查詢和WordPress與斜體

2021標誌著向更廣泛採用CSS邏輯屬性的重大轉變！最近的Chrome API發行引發了爭論，SVG的長寬比控制提供了新的靈活性，WordPress優先列出了可訪問的排版，並且CSS自定義媒體查詢的開發仍然停滯不前。讓我們深入研究細節。

邏輯CSS：新興默認值

Mozilla最初實施六年後，CSS邏輯屬性在2021年接近全瀏覽器支持。 Firefox，Chrome和最新的Safari Preview已經支持以下概述的屬性和值。邏輯CSS通過速記簡化了諸如margin-inline （結合margin-left和margin-right ）和inset （對於top ， right ， bottom和left ）等速記。

 /* 前 */
主要的 {
  左翼：自動；
  邊緣權利：自動；
}

/* 後 */
主要的 {
  保證金 - 內線：自動；
}

適應左右（RTL）佈局變得非常容易。一個簡單的類開關處理過渡，對於翻譯為Arabic，Persian和Urdu等RTL語言的站點至關重要。

 / *翻譯時切換到RTL */
.translated-rtl {
  方向：rtl;
}

David Bushell的網站舉例說明了這種方法，利用Google Translate的translated-rtl類。比較其在Chrome中翻譯後的RTL和LTR佈局以查看差異。

Chrome有爭議的Fugu API

Chrome最近發布的三個用於高級硬件交互的API - WebHID和Web Serial（Desktop）和Web NFC（Android） - Project Fugu的一部分，引起了爭議。儘管在W3C社區組中開發，但它們尚未進行網絡標準。

• WebHID API：啟用Web應用程序與缺少OS驅動程序的罕見人類界面設備（例如Nintendo Wii Remote）的互動。
• Web串行API：通過仿真串行連接促進與微控制器和3D打印機等外圍設備的字節通信。
• Web NFC API：允許短程無線讀取/寫入NFC標籤。

Apple和Mozilla以指紋識別，安全性和其他擔憂為由表示保留。 Mozilla的位置在其規格位置頁面上詳細介紹。

SVG靈活性： preserveAspectRatio=none

默認情況下，SVG在保持縱橫比的同時進行縮放。設置preserveAspectRatio="none"拉伸SVG以填充其容器，可能會扭曲圖像。這對於響應迅速的頁面上的簡單，裝飾元素（例如邊界或需要填充特定空間的對角線）可能很有用。

WordPress：降低斜體以供可訪問性

儘管斜體提高了重點，但擴展使用帶來了可及性挑戰，特別是對於讀者的閱讀障礙。 WordPress 5.7通過從描述，幫助文本和管理界面中的其他領域中刪除斜體來解決此問題，以提高可讀性。該更新還用系統字體替換自定義的Web字體。

CSS自定義媒體查詢：仍在等待進度

@custom-media規則提出了將近七年前的建議，但仍未開發。此功能將允許定義可重複使用的媒體查詢，減少代碼重複並增強可讀性。

 @Custom-Media-Narrow-Window（最大寬度：30em）;

@Media（-narrow-window）{
  / *狹窄的窗戶樣式 */
}

儘管瀏覽器支持尚不確定，但官方的PostCSS插件可立即實施福利。還探索了媒體查詢中作者定義的環境變量的概念，但仍在進行中。

 @Media（max-width：env（ - 狹窄窗口））{
  / *狹窄的窗戶樣式 */
}

以上是平台新聞：默認為邏輯CSS，FUGU API，自定義媒體查詢和WordPress與斜體的詳細內容。更多資訊請關注PHP中文網其他相關文章！