10 CSS Tricks You Need to Know in 2026
CSS has evolved into a powerful language capable of creating complex effects without JavaScript. Here are 10 CSS tricks you should know in 2026.
1. Container Queries
Container queries let components respond to their container size instead of the viewport. Use container-type: inline-size on the parent, then @container (min-width: 400px) for child styles. Perfect for reusable components that appear in different contexts.
2. The :has() Selector
The :has() selector styles a parent based on its children. Example: .card:has(img) applies styles only to cards containing images. It is a parent selector CSS developers have wanted for decades. Supported in all modern browsers since 2024.
3. Scroll-Driven Animations
Create scroll-based animations without JavaScript. Use animation-timeline: scroll() to link animations to scroll position. Combine with view-timeline for reveal-on-scroll effects. Supported in Chrome and Firefox.
4. CSS Nesting
CSS nesting lets you write nested selectors like Sass, but natively. Example: .card { .title { font-weight: bold; } }. Use & for parent references. Supported in all modern browsers. This reduces repetition and improves readability.
5. Subgrid
Subgrid lets nested grids inherit column and row tracks from the parent grid. Use grid-template-columns: subgrid on a grid item that is also a grid container. Perfect for aligning content across different sections of a card layout.
6. color-mix()
The color-mix() function blends two colors in a specified color space. Example: background: color-mix(in srgb, red 50%, blue). Useful for creating dynamic themes and hover effects without preprocessors.
7. Anchor Positioning
Position elements relative to other elements without JavaScript. Use anchor-name and position-anchor to attach tooltips, popovers, and menus to their triggers. Replaces most use cases for JavaScript-based positioning.
8. View Transitions
The View Transitions API creates smooth page transitions with CSS. Use @view-transition and ::view-transition-* pseudo-elements. Provides smooth navigation between pages or states with minimal code.
9. @layer Cascade Control
Use @layer to control cascade order explicitly. Define layers like @layer reset, base, components, utilities. Lower-layer styles are overridden by higher-layer styles regardless of specificity. Solves specificity conflicts in large projects.
10. Advanced Custom Properties
Custom properties now support @property for type checking. Register properties with @property --my-color { syntax: '