プラットフォームニュース:デフォルトの論理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 サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











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

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

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

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

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

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

フロントエンド開発でWindowsのような実装方法...
