Wejście CSS

CSS z prefiksami

Czym jest CSS Prefixer?

Dostawcy przeglądarek dodają eksperymentalne funkcje CSS używając prefiksów takich jak -webkit-, -moz-, -ms- i -o-. Bez tych prefiksów nowoczesny CSS nie działa w starszych przeglądarkach. Ten CSS prefixer automatycznie dodaje wszystkie niezbędne prefiksy dostawców, aby Twój CSS (kaskadowe arkusze stylów) działał w różnych przeglądarkach i wersjach.

Według MDN Web Docs, prefiksy dostawców są kluczowe dla kompatybilności między przeglądarkami. Nasze narzędzie korzysta z bazy danych Can I Use, aby określić które właściwości wymagają prefiksów, zapewniając że style działają w Chrome, Firefox, Safari, Edge i starszych wersjach.

Wszystko działa lokalnie w przeglądarce. Bez przesyłania, bez serwerów – wklej CSS i natychmiast uzyskaj dane wyjściowe z prefiksami.

Jak używać CSS Prefixera

Wykonaj te kroki, aby dodać prefiksy dostawców do CSS. Każdy krok korzysta z rzeczywistych przycisków i paneli na tej stronie.

Wklej, prześlij lub załaduj przykład

Wklej CSS do lewego panelu Wejście CSS lub kliknij Prześlij, aby załadować plik .css. Kliknij Przykład, aby zobaczyć przykładowe style z właściwościami wymagającymi prefiksów. Przykład:

.subscriber-card {
  display: flex;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

Wyświetl dane wyjściowe z prefiksami

Prawy panel CSS z prefiksami pokazuje dane wyjściowe z prefiksami -webkit-, -moz-, -ms- i -o- tam gdzie są potrzebne. Właściwości takie jak flex, transform i transition otrzymują wszystkie niezbędne wersje z prefiksami.

Kopiuj lub pobierz

Kliknij Kopiuj, aby skopiować do schowka, lub Pobierz, aby zapisać jako .css. Użyj Wyczyść, aby zacząć od nowa. Całe przetwarzanie odbywa się w przeglądarce.

Kiedy tego używać

Kompatybilność między przeglądarkami

Budujesz stronę, która musi działać w starszych przeglądarkach? Dodaj prefiksy dostawców, aby nowoczesne funkcje CSS jak Flexbox i Grid działały wszędzie. Niezbędne dla projektów korporacyjnych z obsługą starszych przeglądarek.

Szybkie prototypowanie

Testujesz animacje CSS lub transformacje w różnych przeglądarkach? Najpierw dodaj prefiksy do kodu, aby uniknąć problemów specyficznych dla przeglądarki. Oszczędza czas gdy szybko iterujesz nad projektami.

Projekty legacy

Utrzymujesz starsze projekty, które nadal obsługują IE11 lub starsze wersje Chrome? Dodaj prefiksy do nowych funkcji CSS przed wdrożeniem. Zapobiega uszkodzeniu istniejącej obsługi przeglądarki.

Nauka CSS

Chcesz zrozumieć które właściwości CSS potrzebują prefiksów dostawców? Użyj tego narzędzia, aby zobaczyć które funkcje wymagają prefiksowania. Edukacyjne dla deweloperów uczących się kompatybilności przeglądarek.

Często zadawane pytania

Czym są prefiksy dostawców?

Prefiksy dostawców to specyficzne dla przeglądarki prefiksy właściwości CSS takie jak -webkit-, -moz-, -ms- i -o-. Przeglądarki używają ich do implementowania eksperymentalnych lub niestandardowych funkcji CSS zanim staną się oficjalnymi standardami.

Czy nadal potrzebuję prefiksów w nowoczesnych przeglądarkach?

W przypadku najnowszych funkcji tak. Chociaż nowoczesne przeglądarki obsługują większość standardowego CSS, niektóre nowsze właściwości i starsze wersje przeglądarek nadal wymagają prefiksów. Sprawdź Can I Use dla konkretnego wsparcia właściwości.

Które właściwości wymagają prefiksowania?

Popularne to transform, transition, animation, właściwości flex, border-radius (starsze przeglądarki), box-shadow i wiele innych. Nasze narzędzie automatycznie wykrywa je na podstawie standardów MDN.

Jaka jest kolejność właściwości z prefiksami?

Właściwości z prefiksami powinny pojawiać się przed właściwością standardową. Nasze narzędzie stosuje tę konwencję: najpierw prefiksy dostawców (-webkit-, -moz-, -ms-, -o-), następnie na końcu standardowa właściwość bez prefiksu.

Czy to powiększy mój plik CSS?

Tak, dodanie prefiksów dostawców zwiększa rozmiar pliku. Jednak kompromisem jest kompatybilność przeglądarki. W produkcji używaj tego z minifikacją i rozważ użycie Autoprefixera w procesie budowania.

Czy moje dane CSS są bezpieczne?

Absolutnie. Całe przetwarzanie odbywa się w przeglądarce przy użyciu JavaScript. Twój CSS nigdy nie opuszcza komputera – bez przesyłania na serwer, bez przechowywania danych, całkowicie prywatne.

Powiązane narzędzia CSS

Prefiksowanie to tylko jedna część programowania CSS. Oto inne narzędzia, które mogą pomóc: