The latest CSS updates have introduced several exciting features that enhance the capabilities and responsiveness of web design. Here are some key additions:
:has() Selector: This allows you to select elements that contain other elements matching a specified selector1.
Container Queries: These enable responsiveness within components based on their parent’s size, rather than the viewport2.
Subgrid: Part of the CSS Grid Layout, this feature allows a grid item to inherit the grid tracks of its parent1.
Accent Colour: This property lets you specify a color for UI elements like checkboxes and radio buttons1.
New Viewport Units: Additional units for responsive design that are relative to the user’s viewport1.
Overscroll Behaviour: Controls the browser’s overscroll behavior on a scrollable region1.
@when/@else: Conditional blocks in CSS, similar to media queries but for feature detection1.
Cascade Layers: A new way to define layers of the cascade to control which styles take precedence1.
These features aim to provide more flexibility and control to developers, making it easier to create responsive and dynamic web pages. Remember to check browser compatibility and use these features judiciously for the best cross-browser experience.
Here are some additional CSS features that have been introduced or are gaining traction:
CSS Grid 11: Enhancements to the CSS Grid layout system, providing more flexibility in creating complex designs1.
CSS Writing Mode: Support for different writing modes, useful for internationalization and design creativity1.
Scroll Snap Behavior: Allows for smoother scrolling experiences, particularly in image galleries or slideshows1.
New Color Palettes: Expanded color options for designers, enabling more vibrant and diverse color schemes1.
CSS Variables: Improved handling of CSS variables for more dynamic styling1.
Viewport Units: New units for responsive design, giving designers more control over how elements scale across different devices1.
Cascade Layers: Further developments in cascade layers, allowing for more structured and organized CSS architectures1.
These features aim to empower developers with more tools to create responsive, efficient, and visually appealing web designs. As always, it’s important to check for browser support and compatibility when using new CSS features. Happy coding!
Here are examples of some of the latest CSS features:
CSS :has() Selector:
CSS
/* Selects any <div> that contains a <p> element */
div:has(p) {
background: red;
}
.container {
container-type: inline-size;
}
@container (min-width: 600px) {
.card {
display: flex;
}
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
}
.subgrid {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
input[type="checkbox"] {
accent-color: red;
}
.element {
width: 10svw; /* 10% of the smaller viewport dimension */
height: 10lvh; /* 10% of the larger viewport dimension */
}
.scroll-container {
overscroll-behavior: contain;
}
@when screen and (max-width: 780px) {
.element {
color: red;
display: flex;
}
}
@else {
.element {
display: block;
}
}
@layer base-layer {
button {
background-color: red;
padding: 10px;
color: white;
}
}
.grid {
display: grid;
grid-template-columns: subgrid;
}
p {
writing-mode: vertical-rl;
}
These examples demonstrate how the new CSS features can be used to enhance layout design, styling, and responsiveness in modern web development. Keep in mind that browser support for these features may vary, so it’s always a good idea to check compatibility before using them in production.
Let’s go through each example and explain what they do:
CSS :has() Selector: This selector is used to style an element if it contains another element that matches a specific selector. In the example, any <div> that contains a <p> element will have a red background.
CSS Container Queries: These queries allow for style changes based on the size of a container rather than the viewport. The example shows a .container that changes the layout of .card elements to flex if the container’s width is at least 600px.
CSS Subgrid: Subgrid allows a grid item to use the grid tracks defined on its parent, creating a more consistent layout. In the example, .subgrid inherits the column and row sizes from its parent .grid.
CSS Accent Color: This property sets the accent color for form controls. The example sets the accent color of checkboxes to red.
New CSS Viewport Units: These units are relative to the viewport’s size. svw is relative to the smaller dimension of the viewport, and lvh is relative to the larger dimension. The example sets the width and height of an element using these new units.
CSS Overscroll Behavior: This property controls the browser’s behavior when reaching the boundary of a scrolling area. The example prevents the scroll container from displaying the default overscroll behavior.
CSS @when/@else Rules: These rules allow for conditional styling. The example applies different styles to .element based on the viewport width.
CSS Cascade Layers: Cascade layers provide a structured way to organize and manage the cascade. The example defines a base layer for button styles.
CSS Grid Level 2 (Subgrid): This is similar to the earlier subgrid example but focuses on inheriting the grid definition from the parent grid.
CSS Writing Mode: This property defines the direction in which text flows. The example sets the text in a paragraph to flow vertically from right to left.
These examples illustrate how the new CSS features can be applied to achieve various design and layout effects in web development. They provide greater control and flexibility to developers, enabling more sophisticated and responsive designs.
Tags
CSS Tutorial