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.

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

    .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.