2021は、CSS論理的特性のより広い採用に大きな変化を示しています！ 最近のChrome APIリリースは議論を引き起こし、SVGのアスペクト比コントロールは新しい柔軟性を提供し、WordPressはアクセス可能なタイポグラフィに優先順位を付け、CSSカスタムメディアクエリの開発は停止しています。詳細を掘り下げましょう。

論理CSS：新たなデフォルト

Mozillaの最初の実装から6年後、CSS論理プロパティは2021年に完全なブラウザのサポートに近づいています。Firefox、Chrome、および最新のSafariプレビューは、以下に概説するプロパティと値をすでにサポートしています。 論理CSSは、マージンインライン（ reft および right-right ）および inset （、、、、、、、、

、

/* BEFORE */
main {
  margin-left: auto;
  margin-right: auto;
}

/* AFTER */
main {
  margin-inline: auto;
}

、

、

、

/* Switch to RTL when translated */
.translated-rtl {
  direction: rtl;
}

、

）などの速記でスタイリングを簡素化します。 左）。

/* 前に */ 主要 { マージン左：自動; マージン右：自動; } /* 後 */ 主要 { マージンインライン：Auto; }

右から左への（RTL）レイアウトへの適応が非常に簡単になります。 シンプルなクラススイッチは、アラビア語、ペルシャ語、ウルドゥー語などのRTL言語に翻訳されたサイトに重要な遷移を処理します。

/ *翻訳時にrtlに切り替えます */ .translated-rtl { 方向：RTL; }
• David BushellのWebサイトはこのアプローチを例示し、Google Translateの翻訳rtl
クラスを活用しています。 Chromeで翻訳後のRTLとLTRのレイアウトを比較して、違いを確認します。
• Chromeの論争のあるFugu API
Chromeの最近の高度なハードウェア相互作用のための3つのAPIのリリース（WebHIDおよびWebシリアル（デスクトップ）およびWeb NFC（Android））は、Project Fuguの一部が論争を引き起こしました。 W3Cコミュニティグループ内で開発されましたが、まだWeb標準ではありません。
webhid api：

は、OSドライバーを欠いている珍しいヒューマンインターフェイスデバイスとのWebアプリの相互作用を有効にします（たとえば、Nintendo Wii Remote）。

WebシリアルAPI：は、エミュレートされたシリアル接続を介して、マイクロコントローラーや3Dプリンターなどの周辺機器とのバイバイバイバイト通信を促進します。

Web NFC API：

は、NFCタグに短距離ワイヤレス読み取り/ライティングを許可します。

AppleとMozilla Expressの予約、指紋、セキュリティ、その他の懸念を引用しています。 Mozillaの位置については、仕様の位置ページで詳しく説明しています。

svg柔軟性：

preserveaspectratio = none

デフォルトでは、SVGはアスペクト比を維持しながらスケールします。

preserveaspectratio = "none" を設定して、svgを伸ばして容器を埋め、画像を歪めます。これは、特定の空間を埋める必要がある境界線や対角線の線など、応答性のあるページ上のシンプルで装飾的な要素に役立ちます。

WordPress：アクセシビリティのためにイタリック体を減らす

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}

斜体は強調を強化しますが、特にディスレクシアの読者にとって、拡張使用はアクセシビリティの課題を提示します。 WordPress 5.7は、読みやすさを向上させるために、説明から斜体、ヘルプテキスト、および管理インターフェイス内のその他の領域を削除することにより、これに対処します。 このアップデートは、カスタムWebフォントをシステムフォントに置き換えます。

。

CSSカスタムメディアクエリ：まだ進行状況を待っています

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}

@Custom-media ルールは、ほぼ7年前に提案されていますが、未開発のままです。 この機能により、再利用可能なメディアクエリを定義し、コードの重複を減らし、読みやすさを向上させることができます。

@custom-media - narrow-window（max-width：30em）; @media（-narrow-window）{ / *狭いウィンドウスタイル */ }

ブラウザーのサポートは不確かですが、公式のPostCSSプラグインは即時の実装の利点を提供します。 メディアクエリの著者定義環境変数の概念も調査されていますが、進行中の作業のままです。

@media（max-width：env（ - lard-window））{ / *狭いウィンドウスタイル */ }