目次
論理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 16, 2025 am 11:20 AM

ここでは、「静的フォームプロバイダー」という用語を埋めてみましょう。あなたはあなたのHTMLを持ってきます

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

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

毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 Apr 17, 2025 am 10:55 AM

今週のプラットフォームニュースのラウンドアップで、Chromeは、Web開発者のロード、アクセシビリティ仕様、およびBBCの動きのための新しい属性を導入します

HTMLダイアログ要素を使用したいくつかの実践 HTMLダイアログ要素を使用したいくつかの実践 Apr 16, 2025 am 11:33 AM

これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです

ペーパーフォーム ペーパーフォーム Apr 16, 2025 am 11:24 AM

購入またはビルドは、テクノロジーの古典的な議論です。自分で物を構築することは、あなたのクレジットカードの請求書にはラインアイテムがないため、安価に感じるかもしれませんが

毎週のプラットフォームニュース:テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター 毎週のプラットフォームニュース:テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター Apr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

独自の非JavaScriptベースの分析をホストするためのオプション 独自の非JavaScriptベースの分析をホストするためのオプション Apr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? 「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? Apr 16, 2025 pm 12:04 PM

しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合:

See all articles