{}const=>[]async()letfn</>var
Development

HTML and CSS in 2025: 5 new features you might have missed

The world of CSS is not standing still — now you can use :has(), container queries and other new features. We explain in simple terms what's new and how to apply it in your projects.

К

Kodik

Author

2 min read

Do you think HTML and CSS have long been studied inside out? Not at all! In 2025, these "oldies" are surprising again: several cool features have appeared in browsers that make the layout easier, cleaner and more powerful 💥

This article contains 5 new products that you might have missed. Especially if you're just starting out. Let's go!

1. 🧱 :has() in CSS — finally!

Now CSS can "look back" — apply styles to the parent if it has a certain element inside. Previously, this could only be done through JS.

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

👉 Apply the .card frame if there is a picture inside. Hooray, the parent selector is now a reality!

🔥 100,000+ students already with us

Tired of reading theory?
Time to code!

Kodik — an app where you learn to code through practice. AI mentor, interactive lessons, real projects.

🤖 AI 24/7
🎓 Certificates
💰 Free
🚀 Start learning
Joined today

2. 🎛️ Container queries

Styles can now be adapted not to the screen size, but to the size of the container! This is a revolution for the component approach.

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

⚙️ Used in conjunction with the container-type property, and this is already supported in Chrome, Firefox, Safari.

3. 🎨 CSS :where() and :is() — selectors without pain

These are powerful utilities to write short and flexible selectors with low specificity:

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

🧠 It's convenient if you don't want to deal with overrides and importance.

4. 💾 Default loading="lazy" attribute

Now all <img> and <iframe> in most browsers lazy loading by default - only when they appear on the screen.

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

Previously, you had to write loading="lazy", now you can just forget it — and everything will work!

5. 🧪 Scoped styles in HTML

An experiment that is already available in Chrome and Safari: you can write styles directly in the component — and they will be applied only to him.

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

⚠️ It's still unstable, but the future is clearly behind it. Especially for those who write on Web Components.

🤓 Bonus: a couple more features to note

  • text-wrap: balance; — beautifully wraps headings in multiple lines

  • view-transition API — smooth transitions between pages

  • anchor positioning — new positioning of tooltips and pop-ups

In the attachment Code you can not just read, but try - right in the editor! We update HTML and CSS courses, add new features and give you up-to-date knowledge. And we also have cozy community in Telegram 👾

💬 Have you already tried :has() or container requests?

Write in the comments which CSS features impressed you in 2025!

🎯Stop procrastinating

Liked the article?
Time to practice!

In Kodik, you don't just read — you write code immediately. Theory + practice = real skills.

Instant practice
🧠AI explains code
🏆Certificate

No registration • No card