An In-Depth Look at New CSS Features in 2022-2023

1. Container Queries

Container Queries enable styling elements based on their container’s dimensions, not just the viewport size, which is especially useful for adaptive design.

Example:

.container { container-type: inline-size; }
.card { container-name: container; background: lightblue; }
@container (min-width: 500px){ .card { background: pink; } }

In this example, .card changes its background to pink if the .container width exceeds 500 pixels.

2. `:focus-visible` Pseudo-Class

:focus-visible improves accessibility by adding focus indicators only when necessary, like for keyboard users.

Example:

button:focus-visible { outline: 2px solid blue; }

Here, the outline appears around the button only during keyboard navigation.

3. `:has()` Selector

The :has() selector allows for styling an element based on the presence of other elements inside it.

Example:

div:has(> p.highlight) { background-color: yellow; }

Here, div gets a yellow background if it contains a child p with the class highlight.

4. Subgrid

Subgrid allows grid items to inherit grid layout from their parent grid.

Example:

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

Inner elements .item inherit the grid structure from their parent .grid.

5. Accent-Color

The accent-color property simplifies styling form control elements.

Example:

input[type="checkbox"] { accent-color: blue; }

This changes the checkbox color to blue.

6. Individual Transform Properties

These properties (scale, translate, rotate) simplify applying and modifying CSS transformations.

Example:

div { rotate: 45deg; scale: 1.5; }

Here, the div is rotated by 45 degrees and scaled up by 1.5 times.

7. Wide-Gamut Color Spaces

These color spaces allow for the use of more saturated and vivid colors.

Example:

div { background-color: color(display-p3 1 0 0); }

This code sets a bright red color for div in the display-p3 color space.

8. New Viewport Units

New units (svh, svw, lvh, lvw, dvh, dvw) provide more precise sizing of elements relative to the viewport size.

Example:

.large-element { height: 50lvh; /* Height for large viewports */ } 
.small-element { width: 80svw; /* Width for small viewports */ }
.large-element has a height of 50% of large viewports, and .small-element has a width of 80% of small viewports.

9. Text-Wrap Balance

Text-wrap balance improves text distribution in headings and titles.

Example:

h1 { text-wrap: balance; }

This evenly distributes the text in h1 headings, enhancing readability.

10. Initial-Letter

The initial-letter property allows for custom styling of the first letter in a paragraph.

Example:

p::first-letter { initial-letter: 3 2; }

This sets the first letter of a paragraph p to be the size of three lines and raised by two lines.

These innovations in CSS significantly expand the capabilities of web developers, making websites more adaptive, accessible, and visually appealing.