Modern CSS
Features & Techniques
The future of styling is here
CSS Grid Layout
<pre><code class="css" data-trim data-line-numbers> .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; /* Named grid areas */ grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; } </code></pre>Container Queries
<pre><code class="css" data-trim data-line-numbers> .card-container { container-type: inline-size; container-name: card; } @container card (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } } </code></pre>Native CSS Nesting
No preprocessor needed!
↓
Nesting Example
<pre><code class="css" data-trim data-line-numbers> .card { padding: 1rem; background: white; & .title { font-size: 1.5rem; font-weight: bold; &:hover { color: blue; } } &.featured { border: 2px solid gold; } } </code></pre>CSS Custom Properties
<pre><code class="css" data-trim data-line-numbers> :root { --primary-color: #007bff; --spacing-unit: 1rem; --border-radius: 8px; } .button { background: var(--primary-color); padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit); border-radius: var(--border-radius); &:hover { --primary-color: #0056b3; } } </code></pre>Logical Properties
<pre><code class="css" data-trim data-line-numbers> /* Instead of: */ .old { margin-left: 1rem; padding-right: 2rem; } /* Use: */ .modern { margin-inline-start: 1rem; padding-inline-end: 2rem; /* Works with all directions */ border-block-start: 2px solid; inline-size: 100%; /* width */ block-size: 50vh; /* height */ } </code></pre>Cascade Layers
<pre><code class="css" data-trim data-line-numbers> /* Define layer order */ @layer reset, base, components, utilities; /* Add styles to layers */ @layer reset { * { margin: 0; padding: 0; } } @layer components { .button { /* button styles */ } } @layer utilities { .m-4 { margin: 1rem; } } </code></pre>Modern Selectors
<pre><code class="css" data-trim data-line-numbers> /* :has() - Parent selector */ .card:has(img) { display: grid; } /* :is() and :where() */ :is(h1, h2, h3):has(+ p) { margin-bottom: 0.5rem; } /* :not() with complex selectors */ .item:not(:hover, :focus) { opacity: 0.7; } </code></pre>Modern Color Functions
<pre><code class="css" data-trim data-line-numbers> :root { --brand: oklch(70% 0.25 150); /* Color mixing */ --tint: color-mix(in oklch, var(--brand), white 20%); /* Relative colors */ --darker: oklch(from var(--brand) calc(l - 0.2) c h); /* Wide gamut colors */ --vivid: color(display-p3 1 0 0); } </code></pre>Scroll-driven Animations
<pre><code class="css" data-trim data-line-numbers> @keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .element { animation: fade-in linear both; animation-timeline: view(); animation-range: entry 25% cover 50%; } </code></pre>The Future is Bright
- CSS is more powerful than ever
- Less need for JavaScript
- Better performance
- More maintainable code
Keep exploring and learning!