2024 年の 5 つの最新 CSS 機能とそれぞれのコード例を次に示します。

1. :has() セレクター:
   • これにより、子に基づいて親要素のスタイルを設定できるようになります。

親 div に .active の子が含まれている場合、親 div のスタイルを設定します

div:has(.active) {
       background-color: lightgreen;
   }

1. コンテナクエリ:
   • これらにより、コンテナのサイズに基づいたレスポンシブ デザインが可能になります。

コンテナのサイズに基づいてカードのレイアウトを変更します

   @container (min-width: 500px) {
       .card {
           display: flex;
           flex-direction: row;
       }
   }

   @container (max-width: 499px) {
       .card {
           display: block;
       }
   }

1. ネストセレクター:
   • CSS は、よりクリーンなコードのためのネスト ルールをサポートするようになりました。

カード内のボタンのネストされたスタイル

   .card {
       background-color: white;
       padding: 20px;

       .button {
           background-color: blue;
           color: white;
           padding: 10px;
       }
   }

1. text-wrap プロパティ: このプロパティは、テキストを行間で均等に分散するのに役立ちます。

テキストの回り込みを使用して段落内のテキストのバランスを整える

   p {
       text-wrap: balance;
       width: 300px; / Set a width for the effect /
   }

1. :focus-visible 疑似クラス:
   • これにより、キーボード ナビゲーションを介して要素に焦点を当てたスタイルが設定され、アクセシビリティが向上します。

キーボードでフォーカスしたときに入力フィールドを強調表示する

   input:focus-visible {
       outline: 2px solid blue;
       background-color: lightyellow;
   }

これらの例は、CSS に各機能を実装して、Web デザインの応答性とアクセシビリティを強化する方法を示しています。