目次
以前のプレゼンテーションの拡張バージョンであるChrisの講演は、コンテナの相対ユニット
ホームページ ウェブフロントエンド CSSチュートリアル デンバーで2022年にイベントから離れたいくつかのこと

デンバーで2022年にイベントから離れたいくつかのこと

Mar 10, 2025 am 09:52 AM

Some Things I Took Away From An Event Apart 2022 in Denver

デンバーでの2022年のアパートは昨日締めくくりましたが、数日を逃したにもかかわらず、私は最終日のセッションに参加しました。本当にやりがいのある経験です! それは数年ぶりの私の最初の会議であり、対面の相互作用は信じられないほど爽やかでした。

イベントからの私のメモが続き、スピーカーが主催します。 注:私の手書きのメモは、包括的な概要ではなく、ハイライトに焦点を当てている手書きのメモがほとんどありません。

Chris Coyier:モダンなWebは実際にはかなり良い

です

以前のプレゼンテーションの拡張バージョンであるChrisの講演は、コンテナの相対ユニット

に掘り下げられました。 これらを

と組み合わせると、値はビューポートではなくコンテナに関連しているため、より正確な応答性を提供します。 これにより、流体のタイポグラフィ用にViewport幅(VH)ユニットを使用して改善されます。 たとえば、ではなく、 clamp()

インラインサイズ

(cqi)ユニット:

を使用することを検討してください
<code>font-size: clamp(1rem, 1rem + 2vw, 2rem);</code>
ログイン後にコピー

ここで、はコンテナのインラインサイズの1%に等しくなります。 (詳細については、ドラフトの仕様を参照してください)。

Chrisは、エッジコンピューティングのパフォーマンスの利点も強調しました
<code>font-size: clamp(1rem, 1rem + 1cqi, 2rem);</code>
ログイン後にコピー
。 このテーマに関する以前の記事を読んでも、私はこの概念をより深く理解しました。 グローバルに分散したCDNは、ユーザーへの地理的に近接しているため、資産を効率的に提供しています。 これは、画像を超えて静的HTML、CSS、およびJavaScriptファイルにまで拡張されます。これは、Jamstackアプローチの中核です。 ただし、動的なデータフェッチを統合し、事前に構築し、静的にオンデマンドで提供し、エッジから信じられないほどの速度で配信できます。

tolu adegbite:WebアクセシビリティのためのARIAのマスター1cqi

Tolu Adegbiteのプレゼンテーションは例外的でした! Wai-ariaの彼女の包括的な報道 - roles、状態、ラベル付け、説明 - は非常に貴重でした。 重要なポイントの1つは、インラインSVGのアクセシビリティを改善することでした。 SVGはマークアップであるため、常に画像として認識されているわけではありません。 支援技術が正しく解釈されるようにするには、適切な役割とラベルを使用してください。

間違っています:

正しい:

Miriam Suzanne:CSSの特異性をカスケード層

で飼育します
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Some Things I Took Away From An Event Apart 2022 in Denver "><svg viewbox="0 0 100 100"></svg>
ログイン後にコピー
ミリアム・スザンヌの講演は、カスケード層の仕様(および彼女に付随するCSS-Tricksガイド)に焦点を当てています。 重要なシフトは、特異性を管理することです。 概念は、

、順序付け、その中のスタイルの執筆スタイルを決定することですが、それは簡単ですが、レイヤーがセレクターの優先順位を変更する方法に適応する必要があります。 単純なクラスセレクターは、レイヤーの順序に応じて、IDセレクターをオーバーライドする可能性があります。

カスケード層は、:is():where():has()などのセレクターと並んで、強力な特異性制御を提供します。 ミリアムはまた、カスケード層が!importantの過剰使用にどのように対処するかを強調し、層の優先順位付けと継承の保護を可能にしました。

Dave Rupert:アクセシビリティバックログを征服しますデイブ・ルパートは、大規模なアクセシビリティ監査のバックログに取り組む経験を共有しました。 概念の問題を整理することにより、彼は複数のページにわたって繰り返しの問題を特定し、ワークロードを大幅に削減しました。 彼のアプローチは、自動化されたツールだけに依存するのではなく、個々の問題に優先順位を付け、コンテキストを理解することを強調しました。 この再編成により、異なる障害のあるユーザーへの影響についての彼の理解が改善され、共感と優先順位付けが促進されました。 残念ながら、廊下の会話のためにHui Jing Chenの最終セッションの一部を逃しましたが、利用可能な場合は録音を見る予定です。

以上がデンバーで2022年にイベントから離れたいくつかのことの詳細内容です。詳細については、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)

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

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

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

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

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

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

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

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

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

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

SVGでタータンパターンを生成する静的サイトを作成する方法 SVGでタータンパターンを生成する静的サイトを作成する方法 Apr 09, 2025 am 11:29 AM

タータンは、スコットランド、特にファッショナブルなキルトに通常関連する模様のある布です。 Tartanify.comでは、5,000を超えるTartanを集めました

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

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

See all articles