目次
論理CSS:Emerging Default
Chromeの物議を醸すFugu API
WordPress:アクセシビリティのために斜体を削減します
CSSカスタムメディアクエリ:それでも進歩を待っています
ホームページ ウェブフロントエンド CSSチュートリアル プラットフォームニュース:デフォルトの論理CSS、FUGU API、カスタムメディアクエリ、およびWordPress対イタリックス

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

Mar 26, 2025 am 09:41 AM

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

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

論理CSS:Emerging Default

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

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

/* 後 */
主要 {
  マージンインライン: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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

Googleフォント変数フォント Googleフォント変数フォント Apr 09, 2025 am 10:42 AM

Google Fontsが新しいデザイン(ツイート)を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? Apr 05, 2025 pm 05:51 PM

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? Apr 05, 2025 pm 11:24 PM

要素の数が固定されていない場合、CSSを介して指定されたクラス名の最初の子要素を選択する方法。 HTML構造を処理するとき、あなたはしばしば異なる要素に遭遇します...

HTMLデータ属性ガイド HTMLデータ属性ガイド Apr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

SASSをより速くするための概念の証明 SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

See all articles