Avanzadocss
CSS Moderno
Conoce las funcionalidades modernas de CSS: container queries, has(), nesting y nuevas funciones.
Funciones CSS modernas
CSS ha evolucionado enormemente. Funciones como
clamp(), min(), max() y la pseudo-clase :has() eliminan la necesidad de JavaScript para muchos patrones.css
1/* clamp() para tipografia fluida */
2h1 { font-size: clamp(1.5rem, 3vw + 1rem, 3rem); }
3
4/* min() y max() para layouts */
5.container { width: min(90%, 1200px); }
6
7/* :has() - selector de padre */
8.card:has(img) {
9 padding: 0;
10}
11
12/* Nesting nativo en CSS */
13.card {
14 background: white;
15 border-radius: 8px;
16
17 & .title {
18 font-weight: bold;
19 }
20
21 &:hover {
22 box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
23 }
24}