Referred to as CSS4

As of now, there isn’t an official CSS4 specification. Instead, the CSS Working Group at the World Wide Web Consortium (W3C) decided to split CSS development into different modules, each progressing at its own pace. This means new features are being added incrementally and independently of a monolithic version number like “CSS4”. However, there are many new and emerging features in modern CSS that are often informally referred to as “CSS4”.

Here are some of the latest features and improvements being developed and standardized:

1. CSS Grid Layout

• Subgrid: Allows a grid item to use the grid tracks of its parent grid container.
  .container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.sub-container {
display: grid;
grid-template-columns: subgrid;
}

2. CSS Variables (Custom Properties)

• Improved Usage and Functions: Continued enhancement of custom properties for more dynamic styling.
  :root {
--main-color: #3498db;
--padding: calc(10px + 1vw);
}
.element {
color: var(--main-color);
padding: var(--padding);
}

3. Advanced Selectors

• :is() and :where(): Simplify complex selectors with better specificity handling.
  :is(h1, h2, h3) {
color: blue;
}
:where(.class1, .class2) {
color: green;
}
  
• :has(): Select elements based on their descendants.
  .container:has(.child) {
border: 2px solid red;
}

4. Container Queries

• Container Queries: Apply styles based on the size of a container rather than the viewport.
  @container (min-width: 500px) {
.item {
font-size: 2rem;
}
}

5. Enhanced Media Queries

• Dynamic Range Media Queries: Adapts based on the user’s device capabilities.
  (dynamic-range: high) {
.image {
filter: contrast(150%);
}
}

6. New Pseudo-Classes

• :focus-within: Style an element if it or any of its descendants have focus.
  .form:focus-within {
border-color: blue;
}
  
• :focus-visible: Style an element when it gains focus, but only if it is visible.
  .button:focus-visible {
outline: 2px solid orange;
}

7. Improved Layout and Spacing

• Gap for Flexbox: Adds spacing between flex items.
  .flex-container {
display: flex; gap: 10px;
}
  
• Logical Properties: Provides better internationalization support for margin, padding, borders, and more.
  .box {
margin-block-start: 10px;
padding-inline-end: 15px;
}

8. Scroll-Linked Animations

• Scroll Snap: Controls the scroll position based on user actions.cssCopy code.container { scroll-snap-type: x mandatory; } .item { scroll-snap-align: start; }

9. Color Functions

• New Color Functions: CSS introduces functions like color-mix() for advanced color manipulations.
  .mixed-color {
background-color: color-mix(in srgb, red 50%, blue);
}

10. Enhanced Typography

• Font Variants: More control over font variations and properties.
  .text {
font-variant-caps: small-caps;
font-variant-numeric: oldstyle-nums;
}

11. Aspect Ratio

• Aspect Ratio: Ensures elements maintain a specified aspect ratio.
  .video {
aspect-ratio: 16 / 9;
}

12. Environment Variables

• Environment Variables: Allows CSS to access environment settings (like safe area insets on iOS).
  .safe-area {
padding: env(safe-area-inset-top);
}

13. New Units

• Viewport Units: lvh, svh, dvh, lvw, svw, dvw for large, small, and dynamic viewport sizes.
  .full-screen {
height: 100lvh; /* Large Viewport Height */
}

14. Grid Template Areas with Subgrid

• Subgrid for Grid Template Areas: Allows child elements to inherit the grid definitions of their parent.
  .grid-container {
display: grid;
grid-template-areas: "header header" "main sidebar" "footer footer";
}
.subgrid {
grid-template-areas: subgrid;
}

15. Accent-Color

• Accent-Color: Allows setting the accent color for form controls.
  .button {
accent-color: rebeccapurple;
}

Conclusion

CSS development continues to evolve rapidly with new features being added incrementally through different modules. While there isn’t a formal CSS4 specification, these new and emerging features significantly enhance the flexibility, efficiency, and capabilities of modern web design. Understanding and utilizing these features allows developers to create more dynamic, responsive, and visually appealing websites.