CSS Values & Units Level 5

CSS Values and Units Module Level 5 introduces new ways to specify values and units in CSS, building upon previous levels. It aims to provide more flexibility and precision for web authors when defining lengths, frequencies, angles & times.

Getting Started

CSS Values and Units Level 5 continues to expand the range of values and units available to CSS authors, allowing for more sophisticated and responsive designs. While specific features can vary as the specification evolves, it generally includes enhancements to mathematical functions and new ways to define lengths and other values.

Key areas of development often include:

• Trigonometric functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2() for use within calc().
• Step-value functions: Such as round(), mod(), and rem() for more control over calculated values.
• New viewport units: Potentially units that account for dynamic browser UI elements (e.g., dynamic viewports).
• Extended color functions: Further enhancements to color manipulation in CSS.

Example: Trigonometric Functions

Trigonometric functions can be used within calc() to create complex geometric effects or dynamic layouts.

    .element {
  /* Example: Rotate an element based on a custom property */
  --angle: 30deg;
  transform: rotate(calc(sin(var(--angle)) * 45deg)); /* Hypothetical use */
  
  /* Example: Position an item on a circle */
  --radius: 100px;
  --item-angle: 45deg;
  left: calc(var(--radius) * cos(var(--item-angle)));
  top: calc(var(--radius) * sin(var(--item-angle)));
}
  

Example: Step-Value Functions

The round() function can be used to snap values to a certain stepping interval.

    .container {
  --base-font-size: 15.5px;
  /* Round the font size to the nearest integer pixel value */
  font-size: calc(round(nearest, var(--base-font-size), 1px)); /* Will be 16px */
}

.item {
  /* Ensure width is always a multiple of 10px */
  width: calc(round(nearest, 33%, 10px)); 
}
  

As CSS Values and Units Level 5 is an evolving specification, browser support for individual features will vary. It's important to check resources like MDN or Can I use for the latest compatibility information.