Wsparcie CSS3 w przeglądarkach: tabela prefiksów

# Wsparcie właściwości CSS3 w nowoczesnych przeglądarkach: tabela kompatybilności

Właściwości CSS3 są częściowo zaimplementowane w aktualnych wersjach przeglądarek, mimo braku pełnego standardu W3C. Deweloperzy muszą uwzględniać prefiksy i minimalne wersje, aby zapewnić kompatybilność między przeglądarkami. Poniższa tabela szczegółowo opisuje status implementacji kluczowych właściwości, w tym wymagania dotyczące prefiksów (-ms-, -moz-, -webkit-, -o-) i wersji przeglądarek. Dzięki temu można precyzyjnie planować użycie funkcji w projektach.

Oznaczenia w tabeli:

• Ikonki pokazują wsparcie w IE, Firefox, Chrome, Safari, Opera.
• Cyfry wskazują minimalną wersję przeglądarki.
• Warianty z prefiksami są oznaczone osobno.

(Tutaj umieszczona jest ściągawka-tabela wsparcia CSS3 w formie obrazu do szybkiego podglądu.)

Szczegóły wsparcia w przeglądarkach

Internet Explorer wspiera właściwości z prefiksem -ms- od wersji 9 wzwyż, np. border-radius, box-shadow. Firefox używa prefiksu -moz- do wersji 16, po czym wiele właściwości przechodzi na standardowe nazwy. Chrome i Safari opierają się na -webkit-, z wsparciem od wersji 4–5, stopniowo rezygnując z prefiksów na rzecz finalnych specyfikacji.

Opera stosuje -o- i rzadziej -xv-, od wersji 10.5. Pełna tabela obejmuje właściwości:

• Animacje i transformacje: transition, animation, transform.
• Obramowania i cienie: border-radius, box-shadow.
• Tło i gradienty: background-clip, linear-gradient.
• Czcionki i tekst: @font-face, text-shadow.
• Układ: flexbox (display: flex), multi-column.

| Właściwość | IE (wersja) | Firefox (wersja) | Chrome (wersja) | Safari (wersja) | Opera (wersja) |

|----------------|-------------|------------------|-----------------|-----------------|---------------|

| border-radius | 9 (-ms-) | 4 (-moz-) | 4 (-webkit-) | 5 (-webkit-) | 10.5 (-o-) |

| box-shadow | 9 (-ms-) | 4 (-moz-) | 10 (-webkit-) | 5.1 (-webkit-) | 10.5 (-o-) |

| transition | 10 | 16 | 26 | 6.1 | 12.5 |

Ta tabela opiera się na danych z 2012 roku, ale zasady prefiksów pozostają aktualne dla projektów legacy.

Strategie pracy z prefiksami

• Automatyzacja: Używaj Autoprefixer w narzędziach budowania (Webpack, Gulp), aby dodawać prefiksy na podstawie danych z CanIuse.
• Polyfills: Dla słabego wsparcia stosuj biblioteki JS jak Modernizr do wykrywania i fallbacków.
• Postprocesing: Narzędzia typu PostCSS generują prefiksy vendorowe dynamicznie.
• Testowanie: Sprawdzaj w emulatorach i na rzeczywistych urządzeniach, skupiając się na mobilnych Safari/Chrome.
• Graceful degradation: Zapewnij podstawowe renderowanie bez CSS3 dla starych wersji IE.

Przykład kodu z prefiksami dla transformacji:

.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

Aktualizacje i zasoby

Dane ewoluowały: dziś większość właściwości jest wspierana bez prefiksów w Chrome 111+, Firefox 115+, Safari 17+. Dla bieżących informacji sprawdzaj bazy kompatybilności. Tabela jest przydatna do audytu starego kodu lub migracji na nowoczesne standardy.

Co ważne

• Prefiksy niezbędne dla legacy: -webkit- w 80% przypadków dla mobilnych przeglądarek do 2020.
• Minimalne wersje: Chrome 4+, Firefox 4+, IE 9+ pokrywają 95% użytkowników w momencie publikacji.
• Automatyzacja ułatwia: Autoprefixer oszczędza ręczne dodawanie.
• Testowanie kluczowe: Różnice w renderingu cieni i gradientów między silnikami.
• Przyszłość bez prefiksów: Standaryzacja W3C przyspiesza rezygnację z rozszerzeń vendorowych.

— Editorial Team