4 で知っておくべき最新の CSS スタイル

TL;DR: このブログでは、コード例を使用して、Web 開発に最適な 5 つの CSS スタイルと機能 (コンテナー クエリ、サブグリッド、疑似クラス、論理プロパティ、ラボ カラー スペース) を検討します。応答性が向上し、レイアウトが簡素化され、デザインの一貫性が向上します。

カスケード スタイル シート (CSS) は、Web ページのスタイルを設定するために使用されるよく知られたスタイル言語です。 CSS を使用すると、スペースを追加して HTML 要素をカスタマイズできます。色、フォント サイズ、フォント スタイルを定義します。などなど。 CSS は、開発者のエクスペリエンスを向上させる新機能により、過去数年間で大幅に改善されました。

そこで、この記事では、次のプロジェクトで使用できる 5 つの革新的な CSS 機能について説明します。

1. コンテナクエリ

CSS コンテナ クエリでは、応答性に対する新しいアプローチが導入されました。以前は、メディア クエリを使用して、さまざまな画面サイズに適応する UI を作成していました。しかし、それは思ったほど簡単ではありませんでした。メンテナンス、パフォーマンス、柔軟性、スタイルの重複に問題がありました。

コンテナ クエリは、開発者が親コンテナのサイズに応じて要素をカスタマイズできるようにすることで、これらの問題を解決します。このメソッドはビューポートのサイズに依存しないため、HTML コンポーネントが完全にモジュール化され、自己完結型になります。

次に、コンテナ クエリがどのように機能するかを示す簡単な例を示します。

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
@container (min-width: 500px) {
  .profile-card {
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 20px;
  }

  .profile-card header,
  .profile-card .bio {
    grid-column: 2;
  }

  .profile-card .profile-image {
    grid-row: 1 / 3;
    grid-column: 1;
  }
}

このコンテナ クエリは、プロファイル カードの幅が 500 ピクセル以上に達したときに、プロファイル カードのレイアウトを調整します。カードを積み上げレイアウト (画像が上にある) から、画像が左側に表示され、テキスト コンテンツが右側に配置される 2 列レイアウトに変更します。

次の画像を参照してください。

積み上げレイアウト

2 列レイアウト

コンテナ クエリは、コンポーネントがビューポート全体ではなく直接の環境に基づいて適応する必要がある設計システムで非常に役立ちます。ただし、コンテナー クエリは依然としてブラウザーの完全なサポートを欠いています。ユーザーがサポートされていないブラウザまたは古いバージョンを使用している場合、スタイルの問題が発生する可能性があります。

ソース: CSS コンテナ クエリ

注: CSS コンテナ クエリの動作デモをご覧ください。

2. サブグリッド

サブグリッドは、CSS グリッド レイアウト モデルへの魅力的な追加機能であり、親グリッド コンテナーのグリッド構造を子グリッド アイテムに継承できるようになります。簡単に言うと、サブグリッドを使用すると、親グリッドの行または列に従って子要素を配置できます。この方法を使用すると、ネストされたグリッドのオーバーライドを使用せずに、複雑なネストされたグリッドを簡単に作成できます。

次のコード例では、レイアウトはリスト内のサブグリッド アプローチを使用します。

.product-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.product-card {
  display: grid;
  grid-template-rows: subgrid; /* Allows the nested grid to align directly with the parent grid */
}

この例では、プロダクト ラッパー は、コンテナーの幅に基づいて列数を制御する柔軟なグリッド レイアウトを作成します。次に、各 product-card は、product-wrapper によって定義されたグリッドに直接行を配置します。

サブグリッドは、製品カードにさまざまな量のコンテンツが含まれる可能性があるものの、均一な外観を維持する必要がある電子商取引サイトで特に役立ちます。

次の画像を参照してください。

親グリッド

サブグリッド CSS を使用して作成された子グリッド

注: CSS サブグリッドの動作デモを確認してください。

3. 疑似クラス

:hover、:focus、:first-child などの 疑似クラスは、HTML 要素の状態ではなく状態に基づいて HTML 要素を選択するオプションです。ドキュメント内の階層または順序。これらのセレクターを使用すると、開発者は JavaScript を使用せずに、よりインタラクティブで応答性の高い UI を作成できます。

次のコード例は、いくつかの疑似クラスの動作を示しています。

// HTML
...
.hover-section:hover {
  background-color: rgb(82, 11, 145); /* Changes the background color on hover */
  color: white;
}
.input-section input[type="text"]:focus {
  border-color: orange; /* Highlights the input field when focused */
  background-color: lightyellow;
}
.list-section li:first-child {
  color: green; /* Styles the first item in a list */
}
.list-section li:last-child {
  color: red; /* Styles the last item in a list */
}

この CSS コード例は、要素にホバーしたりフォーカスしたりするなど、ユーザーのアクションに基づいてスタイルを変更することでユーザー インタラクションを強化する方法と、コンテナの特定の子のスタイルを設定する方法を示します。

これらの疑似クラスは、フォーム、ナビゲーション メニュー、およびユーザー インタラクションをガイドするための視覚的な手がかりを必要とするインタラクティブ コンテンツを開発する場合に非常に役立ちます。

次の画像を参照してください。

CSS Pseudo-Class Demo

Note: Check out this working demo for pseudo-classes.

4. Logical properties

CSS logical properties allow developers to manage layout and spacing in a direction-agnostic way. In other words, with CSS logical properties, you can use different writing modes, such as left-to-right (LTR) and right-to-left (RTL), without changing the structural code.

Here’s an example that uses logical properties for layout adjustments.

.lab-gradient-generator {
  margin-inline-start: 2rem; /* Responsive margin that adjusts based on text direction */
}
.lab-gradient-display {
  background: linear-gradient(
    to right, 
    lab(var(--l-start) var(--a-start) var(--b-start)), 
    lab(var(--l-end) var(--a-end) var(--b-end))
  ); /* Creates a gradient using LAB colors */
}

In this code example, margin-inline-start uses logical properties to ensure margins are always on the content starting side, adapting automatically to different writing systems. The background property with a LAB color gradient illustrates the use of logical properties in defining visually consistent color transitions.

Logical properties are particularly useful in global apps that require support for multiple languages, keeping the layouts the same regardless of directionality.

Refer to the following image.

Logical properties demo

Note: Refer to the working demo of how CSS logical properties can be used with internationalization.

5. Lab Color Space

Lab color space allows you to specify colors to align more closely with human vision. This method provides a broader and more precise range of colors, facilitating greater consistency across different displays.

Here’s a code example showcasing the usage of lab color space in CSS.

.color-strip:nth-child(1) {
  --l: 90%;
  --a: -80;
  --b: 80;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(2) {
  --l: 75%;
  --a: -40;
  --b: 40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(3) {
  --l: 60%;
  --a: 0;
  --b: 0;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(4) {
  --l: 45%;
  --a: 40;
  --b: -40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(5) {
  --l: 30%;
  --a: 80;
  --b: -80;
  background-color: lab(var(--l) var(--a) var(--b));
}

This code example sets up a series of divs (color-strip), each with a unique background color defined in the lab color space. It shows how lab colors produce a variety of hues and shades that are consistent across various displays.

Lab colors are invaluable in digital design, particularly in industries where color accuracy is critical, like digital art, online commerce, and brand design.

Refer to the following image.

Exploring LAB Colors

Note: For more details, refer to the lab color space demo.

Conclusion

Thanks for reading! These CSS features offer unique advantages and new possibilities to improve the functionality and the user experience of your app. They also improve the developer experience, since these features simplify complex tasks for them.

So, make sure to try these examples yourself and implement them in your next web app to make it a modern one.

Related blogs

• React Styling: Essential Tips and Tricks for Designers
• Top 7 Ways to Write CSS in Your React or Next.js App
• Responsive Web Design Evolved: Introducing CSS Container Queries
• CSS Flex: What Every Developer Should Know

以上が4 で知っておくべき最新の CSS スタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。