2025年のHTMLとCSS：見逃したかもしれない5つの新機能

HTMLとCSSはもう長い間、隅々まで研究されていると思いますか？いいえ、そうではありません！2025年、これらの「古い人」は再び驚かせます。レイアウトをより簡単に、よりクリーンに、より強力にするいくつかのクールな機能がブラウザに追加されました💥

この記事では、見逃したかもしれない5つの新製品をご紹介します。特に、あなたがまだ始めたばかりの場合は。さあ、始めましょう！

1. 🧱 :has() CSSで、ついに！

CSSは、親要素に特定の要素が含まれている場合に、親要素にスタイルを適用できるようになりました。以前は、これはJSを介してのみ実行できました。

.card:has(img) {
  border: 1px solid green;
}

👉 内部に画像がある場合は、フレーム .card を適用します。やった、親セレクターが現実になりました！

2. 🎛️ コンテナクエリ

スタイルは、画面サイズではなく、サイズに合わせて調整できるようになりました コンテナこれは、コンポーネントアプローチの革命です。

@container (min-width: 400px) {
  .card-title {
    font-size: 2rem;
  }
}

⚙️ container-typeプロパティと一緒に使用され、これはすでにChrome、Firefox、Safariでサポートされています。

3. 🎨 CSS :where() と :is() — 痛みのないセレクター

これらは、特異性の低い短くて柔軟なセレクターを書くための強力なユーティリティです。

:where(header, main, footer) {
  margin: 0 auto;
}

🧠 便利です。オーバーライドや重要性に悩まされることはありません。

4. 💾 デフォルトの属性 loading="lazy"

現在、ほとんどのブラウザですべての <img> と <iframe> デフォルトでは遅く読み込まれます — 画面に表示されたときのみ。

<img src="photo.jpg" alt="Photo">

以前はloading="lazy"を書く必要がありましたが、今は忘れるだけで、すべてが機能します！

5. 🧪 HTMLのスコープスタイル

ChromeとSafariで利用可能な実験的な機能：コンポーネント内で直接スタイルを記述でき、適用されます 彼だけに.

<style scoped>
  h2 {
    color: tomato;
  }
</style>

⚠️ まだ不安定ですが、将来は明らかにこれです。特にWebコンポーネントで書く人にとっては。

🤓 ボーナス：その他の機能

• text-wrap: balance; — 見出しを複数行に美しく折り返します

• view-transition API —ページ間のスムーズな移動

• anchor positioning — ヒントとポップアップの新しい位置

アプリで コディック 読むだけでなく、 試す — 直接エディターで！HTMLとCSSのコースを更新し、新しい機能を追加して、最新の知識を提供します。さらに、 テレグラムの居心地の良いコミュニティ 👾

💬 :has() またはコンテナクエリを試したことがありますか？

2025年にどのCSSトリックに感銘を受けたか、コメント欄に書いてください！