CSS3

CSS3 (Cascading Style Sheets Level 3) jest trzecim i najbardziej rozbudowanym poziomem specyfikacji języka arkuszy stylów używanego do opisywania wyglądu dokumentów HTML5 oraz XML. W przeciwieństwie do poprzedniej wersji CSS2, CSS3 jest podzielony na niezależne moduły, dzięki czemu poszczególne grupy właściwości mogą być rozwijane i wdrażane w różnym tempie.

Historia

Prace nad CSS3 rozpoczęły się w roku 2001 w ramach grupy roboczej W3C. Pierwsze publiczne wersje modułów pojawiły się pod koniec 2005 roku, a pełna implementacja w przeglądarkach konsumenckich nastąpiła pomiędzy 2008 a 2012 rokiem. Od tego czasu standard jest regularnie aktualizowany, a kolejne moduły (np. CSS Grid Layout) są dopuszczane do wersji rekomendowanych.

Podział na moduły

CSS3 składa się z licznych modułów, z których najważniejsze to:

Selektory – rozszerzone możliwości wyboru elementów, w tym selektory atrybutów i pseudo‑klasy.
Model pudełkowy – nowe właściwości określające marginesy, obramowania i wypełnienia elementów.
Media Queries – podstawa responsywnego projektowania stron.
Flexbox – jednowymiarowy system układów elastycznych.
CSS Grid Layout – dwuwymiarowy system siatek.
Animacje przejść (transitions) i animacje kluczowe (keyframe animations).
Web‑fonts – możliwości ładowania własnych czcionek przy użyciu @font-face.
Transformacje – obrót, skalowanie, pochylenie i perspektywa elementów.
Filtry graficzne – efekty typu rozmycie, kontrast, sepia.

Nowe właściwości i funkcje

Wśród najważniejszych dodatków wprowadzonych w CSS3 znajdują się:

border-radius – umożliwia tworzenie zaokrąglonych rogów.
box-shadow – definiuje cienie padające na elementy.
background-size i background-position – precyzyjne pozycjonowanie i skalowanie tła.
rgba() oraz hsla() – kolory z kanałem alfa (przezroczystość).
calc() – pozwala na dynamiczne obliczenia wartości CSS.
multiple backgrounds – możliwość przypisania kilku warstw tła jednocześnie.

Wsparcie przeglądarek

Współczesne przeglądarki (Chrome, Firefox, Safari, Edge, Opera) obsługują większość modułów CSS3. Początkowo wiele funkcji wymagało prefiksów producenta (-webkit-, -moz-, -ms-), jednak od wersji 2015 przeważna część specyfikacji jest dostępna bez prefiksów.

Zastosowania

CSS3 zrewolucjonizował projektowanie interfejsów webowych. Dzięki responsywnemu designowi, Flexbox i CSS Grid, twórcy mogą tworzyć układy dostosowujące się do różnych rozmiarów ekranu bez konieczności stosowania skomplikowanego kodu JavaScript. Animacje i przejścia podnoszą interaktywność, a web‑fonts pozwalają na precyzyjną kontrolę typografii.

Przykładowy kod


/* Przykład prostego układu z Flexboxem i media query */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.item {
  flex: 1 1 200px;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Responsywne dostosowanie dla ekranów < 600px */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Powiązane pojęcia

Więcej informacji znajdziesz w artykułach: