2025年にフロントエンドを変える5つのCSSトリック

CSSは驚きを与え続けています。今では、JavaScriptの行なしでポップアップ、アニメーション、レスポンシブフォームを作成できます。以下は、2025年に採用すべき最もクールなCSS機能のセレクションです。

💬 1. Popover API：JSなしのポップアップ要素

モーダルウィンドウ、ヒント、ドロップダウンリストを作成できるようになりました HTMLとCSSのみ!

<!-- Кнопка-триггер -->
<button popovertarget="myPopover">Подписаться</button>

<!-- Всплывающее окно -->
<div id="myPopover" popover>
  Спасибо за подписку! ❤️
</div>

ボタンをクリックするとポップアップが表示されます。Escキーを押すか、ウィンドウの外側をクリックすると閉じることができます。

スムーズなアニメーションを追加するには：

#myPopover {
  transform: translateY(-2rem);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

✨ 2. @starting-style — 要素のスムーズな表示

通常、要素が表示されると、CSSはすぐに最終スタイルを適用します。アニメーションはシャープになります。新しい@starting-styleを使用すると、 初期状態その後、最終的なものにスムーズに移行します。

#myPopover {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

@starting-style {
  #myPopover:open {
    transform: translateY(-2rem);
    opacity: 0;
  }
}

📌 要素は少し上から始まり、透明になり、次にスムーズに下に移動して表示されます。

📏 3. キーワードを使用したサイズアニメーション

CSSは今、できるようになりました 間のスムーズなアニメーション height: 0 と height: auto、およびmin-content、max-content、fit-content。

これを行うには、次のキーワードの使用を許可する必要があります。

:root {
  interpolate-size: allow-keywords;
}

例：

<details>
  <summary>Показать</summary>
  <div class="content">Скрытое содержимое.</div>
</details>

以前は、このようなアニメーションは全くありませんでした。今ではスムーズに開きます。

📝 4. フィールドサイズを使用したアダプティブ入力とテキストエリア

ついにCSSを習得しました 入力、テキストエリア、選択のサイズをコンテンツに合わせて自動的に調整するを追加するだけです。

input, textarea, select {
  field-sizing: content;
  max-width: 100%; /* ограничение по ширине */
}

例：

<textarea placeholder="Write as much as you want..."></textarea>
<input type="text" placeholder="Name">
<select>
  <option>Коротко</option>
  <option>Очень длинный вариант</option>
</select>

このフォームはきちんと表示され、JSなしでユーザーに適応します。 💡

🌗 5.ダークテーマとライトテーマのlight-dark ()関数

@media (prefers-color-scheme)を囲む必要はもうありません。今すぐすべてを実行できます 1行に light-dark()機能付き：

:root {
  color-scheme: light dark;
  --text-color: light-dark(#000000, #ffffff);
  --bg-color: light-dark(#ffffff, #000000);
}

💡色はユーザーのシステムテーマに自動的に調整されます。

CSS 2025は、JavaScriptを1行も使わずに、年々より多くの美しいものを作ることができることを示しています。新機能を試すと、コードがよりシンプルになるだけでなく、よりモダンになります✨