検索
ホームページウェブフロントエンドCSSチュートリアルデンバーで2022年にイベントから離れたいくつかのこと

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/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" 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 までご連絡ください。
CSSカウンター:自動番号の包括的なガイドCSSカウンター:自動番号の包括的なガイドMay 07, 2025 pm 03:45 PM

csScounterSareSareusedTomageautomaticinginginwebdesigns.1)それらは、コンテンツ、リスト、および積極的なものを使用することができます

スクロール駆動型のアニメーションを使用したモダンなスクロールシャドウスクロール駆動型のアニメーションを使用したモダンなスクロールシャドウMay 07, 2025 am 10:34 AM

特にモバイルデバイスでは、スクロールシャドウを使用することは、Chrisが以前にカバーした微妙なUXです。 Geoffは、アニメーションタイムラインプロパティを使用する新しいアプローチをカバーしました。これがさらに別の方法です。

画像マップを再検討します画像マップを再検討しますMay 07, 2025 am 09:40 AM

簡単に復習してみましょう。画像マップはHTML 3.2に戻ります。ここで、最初にサーバー側マップを使用してから、マップとエリア要素を使用して画像上でクリック可能な領域を定義したクライアント側マップをマップしました。

開発者:すべての開発者の調査開発者:すべての開発者の調査May 07, 2025 am 09:30 AM

State of Devsの調査は現在、参加に対して開かれており、以前の調査とは異なり、コードを除くすべてをカバーしています:キャリア、職場だけでなく、健康、趣味などもあります。 

CSSグリッドとは何ですか?CSSグリッドとは何ですか?Apr 30, 2025 pm 03:21 PM

CSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。

CSS Flexboxとは何ですか?CSS Flexboxとは何ですか?Apr 30, 2025 pm 03:20 PM

記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。

CSSを使用してWebサイトを応答するにはどうすればよいですか?CSSを使用してWebサイトを応答するにはどうすればよいですか?Apr 30, 2025 pm 03:19 PM

この記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています

CSSボックスサイズのプロパティは何をしますか?CSSボックスサイズのプロパティは何をしますか?Apr 30, 2025 pm 03:18 PM

この記事では、要素の寸法の計算方法を制御するCSSボックスサイズのプロパティについて説明します。コンテンツボックス、ボーダーボックス、パディングボックスなどの値と、レイアウト設計とフォームアライメントへの影響について説明します。

See all articles

ホット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 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター