Słyszałeś kiedyś o seniorze, który napisał 47 linijek JavaScriptu, aby wyśrodkować div? To nie jest żart. CSS zmieniła się drastycznie w ostatnich latach. Większość tutoriali uczy starych metod z 2019 roku, ale to, co Ci teraz pokażę, sprawia, że tamte podejścia wyglądają jak malarstwo jaskiniowe. Czas na Update!

Selektor :has() — rodzic wie, co robią dzieci

:has() to zmiana paradygmatu w CSS. Przez wiele lat CSS nie mógł stylować rodzica na podstawie tego, jakie ma dzieci. Teraz to możliwe, i to zmienia wszystko.

/* Stylizuj samochód, jeśli ma czerwone koła */
.car:has(.wheel.red) {
  border: 3px solid red;
}

/* Stylizuj nagłówek, jeśli zawiera tag <em> */
h1:has(em) {
  color: #ff6b6b;
}

To selektor, którym JavaScript nie powinien się zajmować. Szybko, elegancko, a przede wszystkim — semantycznie poprawnie. Kompatybilność jest już bardzo dobra w nowoczesnych przeglądarkach.

CSS Grid i Flexbox — gdy kombinujesz je razem

Wiele osób używa Grid LUB Flexbox. Profesjonaliści wiedzą, że połączenie ich daje supermoce. Grid do układu strony, Flexbox do wyrównania elementów wewnątrz.

/* Grid dla struktury, Flexbox dla zawartości */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
💡 Wskazówka

:has() na dzień dzisiejszych to jeden z najważniejszych selectorów do nauki. Zastępuje kod, który wymagał JavaScript — zaoszczędzisz część wagi JS bundle'a.

Container Queries — responsywność bez media queries

Media queries bazują na szerokości okna przeglądarki. Ale co, jeśli komponent potrzebuje być responsywny względem własnego kontenera? Tu wkraczają Container Queries.

/* Zdefiniuj kontener */
.card-wrapper {
  container-type: inline-size;
}

/* Style na podstawie rozmiaru kontenera */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

To zmienia sposób, w jaki myślisz o responsywności. Komponent jest niezależny od rozmiaru okna — fantastyczne dla projektów komponentowych i design systems.

Podsumowanie

CSS w 2026 roku to nie to, co pamiętasz z 2019. :has(), Container Queries, zaawansowany Grid i Flexbox — to nie są już futurystyczne feature'y, to standardy.

Jeśli jeszcze nie używasz tych technik, doskonały czas, aby je przyswoić. Zmniejszysz zależność od JavaScriptu, napiszesz czystszy kod i będziesz szybszy. To nie są sztuczki — to przyszłość web developmentu.