Lädt...


🔧 New CSS can make your life easier


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

The purpose of this guide is to introduce you to a collection of innovative and powerful features recently introduced in CSS. While this article provides an overview of their syntax and practical use cases, there's far more depth to explore with each feature. Use this as a starting point to dive deeper into these cutting-edge advancements.

1. Container Queries (Size)

What Are Size-Based Container Queries?

Size-based container queries allow you to apply styles to child elements based on the dimensions of their parent container, rather than relying on the entire viewport’s size, as with traditional media queries.

<div class="container">
  <div class="child"></div>
</div>

.container {
  container: layout / inline-size;
}

@container layout (min-inline-size: 300px) {
  .child {
    display: flex;
    gap: 1rem;
  }
}

Why Does This Matter?

Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.

Browser Support:

• Full Support: Modern browsers.

• Enhancements: Yes, if non-critical styles depend on it.

2. Container Queries (Style)

What Are Style-Based Container Queries?

This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.

.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

Why Does This Matter?

This brings the concept of “CSS mixins” to life. Just as Sass mixins enhance maintainability, style-based container queries extend CSS’s native capabilities, considering the cascade and allowing for greater flexibility.

Browser Support:

• Supported: Chrome and derivatives.

• Coming Soon: Safari.

• Not Supported: Firefox.

• Enhancements: Limited.

• Polyfill: Not available.

3. Container Units

What Are Container Units?

Container units are responsive measurement units (e.g., cqw, cqh, cqmin, cqmax) that calculate dimensions based on the container’s size instead of the viewport. These work similarly to vw (1% of viewport width) but are scoped to a container.

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

Why Does This Matter?

If inner elements need to scale proportionally to their parent container, container units provide a clean, CSS-only solution. A common use case is scaling typography or spacing inside cards or modular components.

Browser Support:

• Full Support: Modern browsers.

• Enhancements: Yes, with fallbacks.

• Polyfill: Available.

4. :has() Pseudo-Selector

What Is the :has() Selector?

The :has() pseudo-class allows you to style parent elements based on the presence of specific child elements within them.

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

Why Does This Matter?

The :has() selector effectively works as a “parent selector” in CSS, making it possible to style parents based on their children. For example, you can use :has() to highlight a parent form field only when an error message is present.

Browser Support:

• Supported: All major browsers.

• Polyfill: JavaScript only.

*5. View Transitions
*

What Are View Transitions?

This feature introduces two types of animations:

  1. Single-page transitions (require JavaScript).

  2. Multi-page transitions (CSS-only).

if (!document.startViewTransition) {
  updateDOM();
} else {
  document.startViewTransition(() => updateDOM());
}

*Why Does This Matter?
*

Transitions enhance the user experience by animating elements during state changes, making interactions feel smoother. They use “tweening,” where animations interpolate between starting and ending states without manually defining each step.

Browser Support:

• Supported: Chrome and derivatives.

• Not Supported: Safari, Firefox.

• Enhancements: Yes, with fallback animations.

6. Nesting

What Is Nesting?

CSS nesting allows you to write child selectors inside their parent rules, making the code cleaner and more maintainable.

.card {
  padding: 1rem;

  > h2:first-child {
    margin-block-start: 0;
  }

  footer {
    border-block-start: 1px solid black;
  }
}

Why Does This Matter?

Nesting reduces redundancy in CSS, grouping related styles together. However, overusing it may lead to overly specific selectors and reduced reusability.

Browser Support:

• Full Support: Modern browsers.

7. Scroll-Driven Animations

What Are Scroll-Driven Animations?

These animations are tied to scrolling and can be implemented using CSS without relying on JavaScript.

.progress {
  animation-timeline: scroll();
}

Why Does This Matter?

From progress indicators to parallax effects, scroll-driven animations improve interactivity and reduce reliance on JavaScript for performance-critical tasks.

Browser Support:

• Supported: Chrome.

• Coming Soon: Firefox.

8. Subgrid

What Is Subgrid?

The subgrid value allows child grid items to align with the rows or columns of their parent grid without duplicating grid definitions.

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
}

Why Does This Matter?

Subgrid ensures consistent alignment across nested grid structures, making complex layouts easier to maintain.

Browser Support:

• Full Support: All modern browsers.

Final Thoughts

CSS continues to evolve at an exciting pace. With features like container queries, view transitions, and subgrid, the language becomes more robust and intuitive for modern web development. Keep an eye on future developments, including relative color syntax, scoped CSS, and new HTML elements like , which promise even greater design possibilities.

...

🔧 New CSS can make your life easier


📈 38.71 Punkte
🔧 Programmierung

🔧 Top 5 CSS Generators to Make Developer Life Easier!


📈 29.77 Punkte
🔧 Programmierung

📰 6 Cortana Settings That Can Make Your Life Easier


📈 29.36 Punkte
📰 IT Security Nachrichten

📰 Top AI Tools That Can Make Your Life Easier (2023)


📈 29.36 Punkte
🔧 AI Nachrichten

📰 7 Android accessibility features that can make your life easier


📈 29.36 Punkte
📰 IT Nachrichten

🔧 AI Tools That Can Make Your Life as a Web Developer SO Much Easier 😊!


📈 29.36 Punkte
🔧 Programmierung

🔧 AI Tools That Can Make Your Life as a DevSecOps Engineer a Lot Easier


📈 29.36 Punkte
🔧 Programmierung

📰 Google Chrome adds three new AI features to make your internet browsing life easier


📈 27.93 Punkte
📰 IT Nachrichten

🔧 Introduction of CSS, What is CSS, Why we use CSS and How CSS describe the HTML elements


📈 27.77 Punkte
🔧 Programmierung

📰 EasySSH - The SSH Connection Manager To Make Your Life Easier


📈 25.52 Punkte
📰 IT Security Nachrichten

🐧 What are your Linux Bash aliases to make life way easier?


📈 25.52 Punkte
🐧 Linux Tipps

🪟 Make your life easier with two TP-Link smart plugs for just $23


📈 25.52 Punkte
🪟 Windows Tipps

📰 One Very Simple Windows 10 Trick to Make Your Life Easier


📈 25.52 Punkte
📰 IT Security Nachrichten

🔧 5 GitHub Repositories That Will Make Your Life Easier


📈 25.52 Punkte
🔧 Programmierung

🪟 How to create a Python script on a Windows 11 PC to make your life easier with these quick tips


📈 25.52 Punkte
🪟 Windows Tipps

📰 ChatGPT productivity hacks: Five ways to use chatbots to make your life easier


📈 25.52 Punkte
📰 IT Nachrichten

🔧 Jakarta NoSQL 1.0.0-b5: How To Make Your Life Easier Around Enterprise Java and NoSQL Databases


📈 25.52 Punkte
🔧 Programmierung

🎥 Hopping on the deinfluencing trend to bring forward tips that’ll make your life easier. 📄 #Shorts


📈 25.52 Punkte
🎥 Video | Youtube

🔧 Top 10 Amazing AI Tools That Will Make Your Life Easier


📈 25.52 Punkte
🔧 Programmierung

🍏 Will These Third-Party Apps Really Make Your Life Easier?


📈 25.52 Punkte
🍏 iOS / Mac OS

🔧 10 VSCode Shortcuts That Will Make Your Life Easier As A Programmer


📈 25.52 Punkte
🔧 Programmierung

📰 Matplotlib: Make Your Plotting Life Easier with rcParams


📈 25.52 Punkte
🔧 AI Nachrichten

🔧 Typescrypt: Make your life easier with decorators


📈 25.52 Punkte
🔧 Programmierung

🔧 5 Tips and Tricks To Make Your Life With Next.js 14 Easier


📈 25.52 Punkte
🔧 Programmierung

🔧 Make your life easier with Set Compositions


📈 25.52 Punkte
🔧 Programmierung

🔧 7 Awesome Multi-Tenant Features in Headless CMS That'll Make Your Life Easier


📈 25.52 Punkte
🔧 Programmierung

🔧 7 Awesome Multi-Tenant Features in Headless CMS That'll Make Your Life Easier


📈 25.52 Punkte
🔧 Programmierung

🔧 21st Century HTML5 Tags That Make Your Life Easier


📈 25.52 Punkte
🔧 Programmierung

🔧 5 Awesome Docker Tools To Make Your Life Easier


📈 25.52 Punkte
🔧 Programmierung

🔧 🫣 These 20+ Swift Resources Will Make Your Life a Lot Easier


📈 25.52 Punkte
🔧 Programmierung

🔧 Postpone and Prosper: Make your life easier with deferring SQL constraints.


📈 25.52 Punkte
🔧 Programmierung

🔧 9 AI Tools for Coding That Will Make Your Life Easier


📈 25.52 Punkte
🔧 Programmierung

🔧 9 AI Tools for Coding That Will Make Your Life Easier


📈 25.52 Punkte
🔧 Programmierung

matomo