ウェブサイトの外観と感覚をコントロールする言語は、常に強力ですが、少し困難です. プログラマーは何年も間もなく、すべての複製と、すべてのデザインを適応させたいという欲求と、すべてのスタイル紛争を回避することに苦労してきました. 三つの新しい機能は、CSSをよりクリーンで、より薄く、より近代的なツールに変革しています: Nesting, Container Queries, and Scoped Styles. CSS これらは微妙な変化ではなく、私たちがスタイルする方法に革命を起こし、CSSはより直感的でモジュール化し、予測可能になります。 過去に、CSSは、開発者が要素をスタイリングするときに自分自身を繰り返すようにしました。ネストリングは、スタイルが自然なコンテンツ構造に従うことを許可することによって、これを解決します。 これは、 CSS が作成している HTML 構造に似ているため、スタイルを読み取り、フォローしやすくなります。 Container Queries コンテナが欲しい ウェブ開発者は、ブラウザウィンドウのサイズに基づいてデザインを調整するメディアクエリを何年も使用してきました. That is simply wonderful in some cases, but not when an element — a card, button, or sidebar, for example — is used in multiple places on a page. たとえば、エレメント — カード、ボタン、またはサイドバー — は、ページ上の複数の場所で使用されます。 コンテナ クエリは、コンテナの画面全体ではなく、コンポーネントのスペースの大きさに応じてコンポーネント自体のサイズを変更することにより問題を解決します。サイド バーで小さく見えるカードを思い浮かべますが、主要なコンテンツ領域で完璧に成長することができます - 追加のトリックや複雑なワークアウンドなしで この機能は、コンポーネントを最大限に再利用し、場所に関係なく適応できるようにします。 SCOPE STYLE CSSの最悪の頭痛の1つは、スタイルがページを「漏らす」ことがあります。一つのコンポーネントに意図されたスタイルは、不意に別のコンポーネントを変え、怒りのあるバグを生み出す可能性があります。 この隔離は、CSSを予測可能で安全なものにします。これは、多くの再利用可能なパーツからウェブサイトが構築されている現代の開発において特に重要です。 Why Do These Features Matter? なぜ、これらの特徴が重要なのか。 これらの3つの機能は、CSSの根本的な変更を含む。 
 
 
 
 Nesting はコードを清潔にし、読みやすいようにします。 コンテナ クエリは、あらゆる状況で設計を柔軟にすることができます。 Scoped Styles は、コンポーネントが干渉されないようにします。 これら3つは、CSSを現代のウェブサイトの構築の性質と調和させるために共同で働く:モジュラー、再利用性、ユーザー中心性。 The Road Ahead 進む道のり これらの機能のサポートは、すべてのブラウザではまだありませんが、急速に増加しています。これらの機能を試す開発者は、CSSの将来が来るときの曲線に先立つでしょう。 Conclusion 結論 CSS は現代の Web 開発の要件を満たすために変化しています。ネスティング、コンテナ クエリ、スケール スタイルはスタイリングを簡素化し、よりスマートで信頼できるようにします。 
 
 このストーリーは、HackerNoonのBusiness Blogging Programの下でSanya Kapoorによってリリースされたものです。 このストーリーは、HackerNoonのBusiness Blogging Programの下でSanya Kapoorによってリリースされたものです。

The is an opinion piece based on the author’s POV and does not necessarily reflect the views of HackerNoon.

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

The Future of Web Styling: CSS Nesting, Container Queries & Scoped Styles について

About Author

コメント

ラベル

この記事は

Related Stories

ワークフローを10倍に向上させる方法: 必須アプリ17選

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

暗号通貨の成長: 効果的なユーザーペルソナの作成

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

ワークフローを10倍に向上させる方法: 必須アプリ17選

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

暗号通貨の成長: 効果的なユーザーペルソナの作成

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps