🎨
Houdini
CSS Houdini API
Low-level CSS APIs for custom properties with type checking and animations.
@property --gradient-angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.element {
background: linear-gradient(
var(--gradient-angle),
blue, purple
);
animation: rotate 3s linear infinite;
}
@keyframes rotate {
to { --gradient-angle: 360deg; }
}
⚡
Modern
Cascade Layers
Control specificity and manage CSS architecture with @layer.
@layer reset, base, components, utilities;
@layer reset {
* { margin: 0; padding: 0; }
}
@layer components {
.btn { /* component styles */ }
}
@layer utilities {
.mt-4 { margin-top: 1rem; }
}
🔧
Responsive
Fluid Everything
Use clamp() for truly responsive designs without media queries.
:root {
--space-fluid: clamp(
1rem,
2vw + 0.5rem,
3rem
);
--text-fluid: clamp(
1rem,
1vw + 0.75rem,
1.5rem
);
}
.element {
padding: var(--space-fluid);
font-size: var(--text-fluid);
}
🎯
Advanced
Container Queries
Style based on parent container size, not viewport.
.container {
container-type: inline-size;
container-name: sidebar;
}
@container sidebar (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
🚀
Performance
GPU Acceleration
Optimize rendering with will-change and transform.
/* Promote to GPU layer */
.smooth {
will-change: transform;
transform: translateZ(0);
}
/* Animate only transform & opacity */
.fast-animation {
transition:
transform 300ms,
opacity 300ms;
}
/* Avoid animating these */
/* ❌ height, width, box-shadow */
🎭
Effects
Advanced Filters
Backdrop filters and blend modes for sophisticated effects.
.glass {
background: hsla(0, 0%, 100%, 0.1);
backdrop-filter:
blur(20px)
saturate(180%);
border: 1px solid hsla(0, 0%, 100%, 0.2);
}
.overlay {
mix-blend-mode: overlay;
isolation: isolate;
}