CSS5 features : New features of CSS5

Enhanced Grid and Flexbox Features

CSS5 adds advanced layout options like nested grids and better alignment in Flexbox.

.grid-container {
  display: grid;
  grid-template-rows: auto auto;
}

This allows for more flexible and responsive layouts.

Custom Properties with Scoping

Scoped variables allow CSS custom properties to apply within specific components.

:root {
  --main-color: #4CAF50;
}

.component {
  color: var(--main-color);
}

This improves code maintainability and reusability.

CSS5 expands animation options with smoother keyframe handling and 3D effects.

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

This enables more creative and engaging user interfaces.

CSS5 introduces support for aspect ratio queries and dynamic conditions.

@media (aspect-ratio: 16/9) {
  .video-container {
    width: 100%;
  }
}

This allows for better adaptation to different screen sizes and orientations.

CSS5 introduces new color spaces like LCH and LAB for more accurate designs.

color: lch(50% 70 50);

This ensures consistent color rendering across different devices and viewing conditions.

03 January Tags : coding , css , frontend