Bezpłatny Prefikser CSS Online
Dodaj prefiksy vendor do CSS automatycznie w przeglądarce.
Wejściowy CSS
CSS z prefiksami
Przykłady prefiksowania CSS
Prefiksy vendor zapewniają obsługę różnych przeglądarek. Przykład:
Flexbox i transformacje
Wejście (bez prefiksów):
Wyjście z prefiksami:
Użyj Przykład powyżej, aby załadować więcej przykładowych danych.
Czym jest Prefikser CSS?
Przeglądarki czasem implementują funkcje CSS z prefiksami vendor przed standaryzacją: -webkit- (Chrome, Safari), -moz- (Firefox), -ms- (starszy IE/Edge). Prefikser CSS automatycznie dodaje te prefiksy, żeby style działały we wszystkich przeglądarkach. Specyfikacje W3C CSS definiują język; Can I Use śledzi obsługę przeglądarek.
To narzędzie analizuje CSS i dodaje prefiksy vendor tam, gdzie są potrzebne. Działa całkowicie w przeglądarce. Nic nie jest wysyłane na serwer. Nowoczesne przeglądarki potrzebują mniej prefiksów niż wcześniej, ale niektóre właściwości (np. user-select, display: flex w starszym Safari) nadal z nich korzystają. Do formatowania użyj Formatera CSS. Do minifikacji użyj Minifikatora CSS.
Jak używać tego narzędzia
Wklej lub wczytaj CSS
Skopiuj CSS i wklej go do lewego edytora. Możesz też kliknąć Wczytaj, aby załadować plik .css. Przycisk Przykład ładuje przykładowe dane. Nieprawidłowy CSS wyświetli błąd.
Sprawdź wyjście z prefiksami
Prawy panel pokazuje CSS z dodanymi prefiksami vendor. Właściwości takie jak display: flex, user-select i transform otrzymują odpowiednie prefiksy dla starszych przeglądarek.
Kopiuj lub pobierz
Użyj Kopiuj lub Pobierz. Dla SCSS lub Less skompiluj najpierw za pomocą SCSS do CSS lub Less do CSS, a następnie dodaj prefiksy. Do walidacji użyj Walidatora CSS.
Kiedy prefiksowanie CSS pomaga
Gdy obsługujesz starsze przeglądarki (Safari, starszy Chrome, starszy IE) lub używasz nowszych funkcji CSS, które nie są jeszcze w pełni standaryzowane, prefiksowanie zapewnia kompatybilność. Narzędzia do budowania takie jak Autoprefixer czy PostCSS często obsługują to w produkcji, ale to narzędzie jest przydatne dla pojedynczych plików, szybkich sprawdzeń lub gdy krok budowania nie jest dostępny.
CSS dla e-maili, osadzone style lub CSS hostowany na CDN mogą wymagać ręcznego prefiksowania. Przepuszczenie arkusza stylów przez to narzędzie daje wyjście gotowe dla przeglądarek. Do konwersji na style inline (np. dla e-mail) użyj CSS do Inline po prefiksowaniu.
Często zadawane pytania
Czy nadal potrzebuję prefiksów w 2024?
Wiele właściwości ma teraz obsługę bez prefiksów. Dla starszego Safari, iOS lub starszych przeglądarek niektóre właściwości (np. -webkit-backdrop-filter) nadal wymagają prefiksów. Sprawdź Can I Use dla docelowych przeglądarek.
Czy moje dane są prywatne?
Tak. Prefiksowanie odbywa się całkowicie w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.
Dlaczego używać tego zamiast Autoprefixera?
Autoprefixer działa w potoku budowania. To narzędzie działa w przeglądarce – nie potrzeba Node.js ani kroku budowania. Używaj go do szybkich sprawdzeń, pojedynczych plików lub gdy nie możesz uruchomić kompilacji.
Czy obsługuje wszystkie właściwości?
Narzędzie dodaje prefiksy dla popularnych właściwości. Dla kompleksowego pokrycia użyj Autoprefixera w swojej kompilacji. W większości przypadków to narzędzie obejmuje najważniejsze.
Co z @keyframes?
Nazwy klatek kluczowych mogą wymagać prefiksów w niektórych kontekstach. Narzędzie obsługuje typowe przypadki. W przypadku złożonych animacji sprawdź w docelowych przeglądarkach.
Powiązane narzędzia
Specyfikacja CSS: W3C CSS. MDN CSS to punkt odniesienia. Can I Use śledzi obsługę przeglądarek. Autoprefixer do potoków budowania.