Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Modern CSS Features - przyszłość stylow ania egipskich hieroglifów
Witaj w przyszłości CSS! Podobnie jak starożytni Egipcjanie byli pionierami w architekturze, tak my jesteśmy świadkami rewolucji w CSS. Poznaj nowoczesne funkcje CSS z lat 2020-2024, które zmieniają sposób, w jaki stylujemy strony internetowe!
aspect-ratio - idealne proporcje
aspect-ratioPrzed aspect-ratio (stary sposób)
1/* ❌ Stary hack z padding-bottom */
2.video-container {
3 position: relative;
4 padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 = 56.25% */
5 height: 0;
6}
7
8.video-container iframe {
9 position: absolute;
10 top: 0;
11 left: 0;
12 width: 100%;
13 height: 100%;
14}Z aspect-ratio (nowy sposób)
1/* ✅ Nowoczesny sposób - prosty i czytelny */
2.video-container {
3 aspect-ratio: 16 / 9;
4 width: 100%;
5}
6
7.video-container iframe {
8 width: 100%;
9 height: 100%;
10}Analogia egipska: To jak idealne proporcje Wielkiej Piramidy (4:3) - zachowane niezależnie od skali!
Praktyczne przykłady aspect-ratio
1. Video responsive
1.video-wrapper {
2 aspect-ratio: 16 / 9;
3 width: 100%;
4 max-width: 800px;
5 margin: 0 auto;
6}
7
8.video-wrapper iframe {
9 width: 100%;
10 height: 100%;
11 border: none;
12}2. Image cards
1.card-image {
2 aspect-ratio: 4 / 3;
3 width: 100%;
4 object-fit: cover;
5 border-radius: 8px;
6}3. Square avatars
1.avatar {
2 aspect-ratio: 1; /* 1:1 = kwadrat */
3 width: 100px;
4 border-radius: 50%;
5 object-fit: cover;
6}4. Golden ratio
1.golden-box {
2 aspect-ratio: 1.618; /* Złoty podział */
3 width: 100%;
4 background: goldenrod;
5}5. Instagram post
1.instagram-post {
2 aspect-ratio: 1 / 1; /* Kwadrat Instagram */
3 width: 100%;
4 max-width: 600px;
5}6. Mobile screens
1.phone-mockup {
2 aspect-ratio: 9 / 19.5; /* Proporcje iPhone */
3 width: 375px;
4 border: 10px solid black;
5 border-radius: 30px;
6}gap dla Flexbox i Grid
gap1/* Grid - od zawsze */
2.grid {
3 display: grid;
4 grid-template-columns: repeat(3, 1fr);
5 gap: 20px; /* Row i column gap */
6}
7
8/* Flexbox - od 2021! */
9.flex-container {
10 display: flex;
11 gap: 20px; /* Odstęp między items */
12}Praktyczne przykłady gap
1/* Navigation z gap */
2.nav {
3 display: flex;
4 gap: 1.5rem;
5 align-items: center;
6}
7
8/* Button group */
9.button-group {
10 display: flex;
11 gap: 0.5rem;
12}
13
14/* Form fields */
15.form {
16 display: flex;
17 flex-direction: column;
18 gap: 1rem;
19}
20
21/* Card grid */
22.cards {
23 display: grid;
24 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
25 gap: 2rem 1rem; /* 2rem row, 1rem column */
26}:is() i :where() - grupowanie selektorów
Nowe pseudo-classes pozwalają na eleganckie grupowanie!
:is() - z wagą specificity
1/* Zamiast: */
2h1 a,
3h2 a,
4h3 a,
5h4 a,
6h5 a,
7h6 a {
8 color: goldenrod;
9}
10
11/* Użyj :is() */
12:is(h1, h2, h3, h4, h5, h6) a {
13 color: goldenrod;
14}Specificity
: Bierze najwyższą specificity z listy!:is()
1/* Specificity = ID (100) */
2:is(#id, .class, div) {
3 color: red;
4}:where() - bez wagi specificity
1/* Specificity = 0! */
2:where(h1, h2, h3) {
3 margin-top: 0;
4}
5
6/* Łatwo nadpisać */
7h2 {
8 margin-top: 1rem; /* To wygra, bo :where() ma 0 specificity */
9}Praktyczne przykłady
1/* Reset dla headings */
2:where(h1, h2, h3, h4, h5, h6) {
3 margin: 0;
4 font-weight: 600;
5}
6
7/* Link states */
8:is(a:hover, a:focus) {
9 text-decoration: underline;
10 color: goldenrod;
11}
12
13/* Form inputs */
14:is(input, textarea, select):focus {
15 outline: 2px solid #3498db;
16 outline-offset: 2px;
17}
18
19/* Lists */
20:where(ul, ol):where(:not([class])) {
21 padding-left: 1.5em;
22}:has() - parent selector! 🎉
:has() to rewolucja - pozwala stylować rodzica na podstawie dzieci!
1/* Styluj article, który MA obrazek */
2article:has(img) {
3 display: grid;
4 grid-template-columns: 1fr 2fr;
5}
6
7/* Styluj card, który MA button */
8.card:has(.button) {
9 padding-bottom: 4rem;
10}
11
12/* Styluj form, który MA error */
13form:has(.error) {
14 border: 2px solid red;
15}Praktyczne przykłady :has()
1. Layout adaptation
1/* Card z obrazkiem - inny layout */
2.card:has(img) {
3 display: flex;
4 flex-direction: row;
5}
6
7/* Card bez obrazka - normalny layout */
8.card:not(:has(img)) {
9 text-align: center;
10}2. Form validation
1/* Form field z errorem */
2.form-field:has(input:invalid) {
3 border-color: red;
4}
5
6.form-field:has(input:valid) {
7 border-color: green;
8}
9
10/* Label gdy input ma fokus */
11.form-field:has(input:focus) label {
12 color: #3498db;
13 font-weight: bold;
14}3. Checkbox styling
1/* Styluj label gdy checkbox zaznaczony */
2.checkbox-wrapper:has(input:checked) label {
3 font-weight: bold;
4 color: green;
5}
6
7.checkbox-wrapper:has(input:checked) {
8 background: #e8f5e9;
9}4. Navigation highlighting
1/* Highlight section w navigation */
2nav:has(~ main #section-1) .nav-link[href="#section-1"] {
3 color: goldenrod;
4 font-weight: bold;
5}5. Empty state
1/* Styluj container gdy pusty */
2.list:not(:has(li)) {
3 display: flex;
4 align-items: center;
5 justify-content: center;
6}
7
8.list:not(:has(li))::before {
9 content: "Brak elementów";
10 color: #999;
11}subgrid - zagnieżdżone siatki
subgrid1.parent-grid {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr);
4 gap: 20px;
5}
6
7.child-grid {
8 display: grid;
9 /* Użyj kolumn z rodzica! */
10 grid-template-columns: subgrid;
11 grid-column: span 2;
12}Praktyczny przykład
1<div class="product-grid">
2 <article class="product">
3 <h3>Produkt 1</h3>
4 <div class="product-details">
5 <span class="price">$99</span>
6 <button>Kup</button>
7 </div>
8 </article>
9</div>1.product-grid {
2 display: grid;
3 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4 gap: 2rem;
5}
6
7.product {
8 display: grid;
9 /* Wyrównaj wszystkie .product-details w tej samej linii */
10 grid-template-rows: auto 1fr auto;
11}
12
13.product-details {
14 display: grid;
15 grid-template-columns: subgrid;
16 grid-column: 1 / -1;
17 align-items: center;
18}@layer - Cascade Layers
@layer1/* Zdefiniuj kolejność layers */
2@layer reset, base, components, utilities;
3
4/* Layer reset - najniższy priorytet */
5@layer reset {
6 * {
7 margin: 0;
8 padding: 0;
9 }
10}
11
12/* Layer base */
13@layer base {
14 body {
15 font-family: Arial, sans-serif;
16 }
17}
18
19/* Layer components */
20@layer components {
21 .button {
22 background: #3498db;
23 color: white;
24 }
25}
26
27/* Layer utilities - najwyższy priorytet */
28@layer utilities {
29 .text-center {
30 text-align: center;
31 }
32}@container - Container Queries
Container Queries pozwalają stylować na podstawie rozmiaru kontenera, nie viewport!
1.card-container {
2 container-type: inline-size;
3 container-name: card;
4}
5
6.card {
7 padding: 1rem;
8}
9
10/* Gdy kontener > 400px */
11@container card (min-width: 400px) {
12 .card {
13 display: flex;
14 gap: 1rem;
15 }
16
17 .card img {
18 width: 150px;
19 }
20}
21
22/* Gdy kontener > 600px */
23@container card (min-width: 600px) {
24 .card {
25 padding: 2rem;
26 }
27}color-mix() - mieszanie kolorów
1.element {
2 /* Zmieszaj 50% blue z 50% red */
3 background: color-mix(in srgb, blue 50%, red);
4
5 /* Rozjaśnij kolor */
6 background: color-mix(in srgb, #3498db, white 20%);
7
8 /* Przyciemnij kolor */
9 background: color-mix(in srgb, #3498db, black 20%);
10}accent-color - kolorowanie form controls
1/* Zmień kolor checkboxów, radio, range */
2input[type="checkbox"],
3input[type="radio"],
4input[type="range"] {
5 accent-color: goldenrod;
6}
7
8/* Globalnie */
9:root {
10 accent-color: #3498db;
11}Inne nowoczesne właściwości
overflow: clip
1.element {
2 /* Jak overflow: hidden, ale nie tworzy scroll context */
3 overflow: clip;
4}inset - skrót dla top/right/bottom/left
1/* Zamiast: */
2.element {
3 top: 0;
4 right: 0;
5 bottom: 0;
6 left: 0;
7}
8
9/* Użyj inset */
10.element {
11 inset: 0;
12}
13
14/* Lub per-side */
15.element {
16 inset: 10px 20px; /* top/bottom left/right */
17}object-view-box - crop obrazków
1img {
2 object-view-box: inset(10% 20% 10% 20%);
3 /* Przycina obrazek z wszystkich stron */
4}content-visibility - performance
1.long-section {
2 /* Nie renderuj poza viewport - OGROMNY boost performance! */
3 content-visibility: auto;
4 contain-intrinsic-size: 0 500px;
5}Wsparcie przeglądarek (2024)
| Feature | Chrome | Firefox | Safari | Edge | |---------|--------|---------|--------|------| | aspect-ratio | 88+ (2020) | 89+ (2021) | 15+ (2021) | 88+ | | gap w Flexbox | 84+ (2020) | 63+ (2018) | 14.1+ (2021) | 84+ | | :is() | 88+ | 78+ | 14+ | 88+ | | :where() | 88+ | 78+ | 14+ | 88+ | | :has() | 105+ (2022) | 121+ (2023) | 15.4+ (2022) | 105+ | | subgrid | 117+ (2023) | 71+ (2019) | 16+ (2022) | 117+ | | @container | 106+ (2022) | 110+ (2023) | 16+ (2022) | 106+ | | @layer | 99+ (2022) | 97+ (2022) | 15.4+ (2022) | 99+ |
Podsumowanie
Najważniejsze nowoczesne features:
- aspect-ratio - idealne proporcje bez hacków
- gap - odstępy w Flexbox i Grid
- :is()/:where() - eleganckie grupowanie
- :has() - parent selector! 🎉
- subgrid - zagnieżdżone siatki
- @layer - kontrola cascade
- @container - responsive na poziomie komponentu
Dlaczego używać:
- ✅ Czystszy kod
- ✅ Mniej hacków
- ✅ Lepsza wydajność
- ✅ Łatwiejsze utrzymanie
Pamiętaj: Modern CSS to jak odkrycie nowych hieroglifów - nowe możliwości, prostsze rozwiązania, potężniejsze narzędzia!