プラットフォームニュース：デフォルトの論理CSS、FUGU API、カスタムメディアクエリ、およびWordPress対イタリックス

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

論理CSS：Emerging Default

Mozillaの最初の実装の6年後、CSS論理プロパティは2021年に完全なブラウザのサポートに近づいています。Firefox、Chrome、および最新のSafariプレビューは、以下に概説するプロパティと値をすでにサポートしています。論理CSSは、 margin-inline （ margin-leftとmargin-right組み合わせ）やinset物（ top 、 right 、 bottom 、 left ）などの速記でスタイリングを簡素化します。

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

/* 後 */
主要 {
  マージンインライン：Auto;
}

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

 / *翻訳時にRTLに切り替えます */
.translated-rtl {
  方向：RTL;
}

David BushellのWebサイトはこのアプローチを例示し、Google Translateのtranslated-rtlクラスを活用しています。 Chromeでの翻訳後のRTLレイアウトとLTRレイアウトを比較して、違いを確認します。

Chromeの物議を醸すFugu API

プロジェクトFUGUの一部であるWebHIDおよびWebシリアル（デスクトップ）とWeb NFC（Android）の高度なハードウェア相互作用のための3つのAPIの最近のリリースが論争を引き起こしました。 W3Cコミュニティグループ内で開発されましたが、まだWeb標準ではありません。

• WebHID API： OSドライバーを欠く珍しいヒューマンインターフェイスデバイスとのWebアプリの相互作用を有効にします（例えば、任天堂Wiiリモート）。
• WebシリアルAPI：エミュレートされたシリアル接続を介して、マイクロコントローラーや3Dプリンターなどの周辺機器とのバイトごとの通信を促進します。
• Web NFC API： NFCタグへの短距離ワイヤレス読み取り/ライティングを許可します。

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

SVG柔軟性： preserveAspectRatio=none

デフォルトでは、SVGはアスペクト比を維持しながらスケールします。 preserveAspectRatio="none"の設定SVGを伸ばして容器を埋め、潜在的に画像を歪めます。これは、特定のスペースを埋める必要がある境界線や対角線の線など、応答性のあるページ上のシンプルで装飾的な要素に役立ちます。

WordPress：アクセシビリティのために斜体を削減します

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

CSSカスタムメディアクエリ：それでも進歩を待っています

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

 @custom-media -narrow-window（max-width：30em）;

@media（-narrow-window）{
  / *狭いウィンドウスタイル */
}

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

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

以上がプラットフォームニュース：デフォルトの論理CSS、FUGU API、カスタムメディアクエリ、およびWordPress対イタリックスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。