Modern CSS approaches and functionality

CSS Variables (Custom Properties)

CSS variables make code management simpler and more flexible. They are used for reusing styles and quickly changing the design of different elements.

:root {
  --primary-color: #3498db;
  --padding: 10px;
}

button {
  background-color: var(--primary-color);
  padding: var(--padding);
}

CSS Grid and Flexbox

These two layout systems are the foundation of modern web design.

CSS Grid is perfect for creating complex layouts, while Flexbox is more suited for arranging inner elements.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Container Queries

Container Queries allow you to control the style of elements based not only on the screen size but also on the size of their parent container.

@container (min-width: 600px) {
  .box {
    background-color: lightblue;
  }
}

Scroll-Driven Animations

Scroll-driven animations take web interactivity to a new level.

@scroll-timeline my-timeline {
  scroll-offsets: 0% 100%;
}

.element {
  animation: fade-in 1s linear;
  animation-timeline: my-timeline;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Subgrid

Subgrid allows you to create layouts for inner elements that align with the dimensions of the parent grid.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.grid-item {
  display: subgrid;
}

Conclusion

Modern CSS approaches and functionalities open up new possibilities in web design. These tools not only speed up the process of creating websites but also enhance their efficiency and visual appeal. If you want to create modern, interactive, and functional websites, using these features is definitely worthwhile.