Jakie są prefiksy dostawców lub przeglądarek CSS?

Przedrostki dostawcy CSS, czasem określane również jako przedrostki przeglądarki CSS, umożliwiają producentom przeglądarek dodawanie obsługi nowych funkcji CSS, zanim te funkcje będą w pełni obsługiwane we wszystkich przeglądarkach. Można to zrobić podczas okresu testowania i eksperymentowania, w którym producent przeglądarki dokładnie określa, w jaki sposób zostaną zaimplementowane nowe funkcje CSS. Przedrostki te stały się bardzo popularne dzięki powstaniu CSS3 kilka lat temu.

Kiedy po raz pierwszy wprowadzono CCS3, wiele podekscytowanych właściwości zaczęło uderzać w różne przeglądarki w różnym czasie. Na przykład przeglądarki internetowe z przeglądarką Webkit (Safari i Chrome) były pierwszymi, które wprowadziły niektóre z właściwości stylu animacji, takich jak transformacja i przejście. Korzystając z właściwości fabrycznych z prefiksem, projektanci stron internetowych mogli korzystać z tych nowych funkcji w swojej pracy i wyświetlać je w przeglądarkach, które od razu ich obsługiwały, zamiast czekać na każdego innego producenta przeglądarki, aby nadrobić zaległości!

Tak więc, z perspektywy twórcy stron WWW, przedrostki przeglądarki są używane do dodawania nowych funkcji CSS do witryny, jednocześnie mając komfort wiedząc, że przeglądarki będą obsługiwały te style. Może to być szczególnie pomocne, gdy różni producenci przeglądarek wdrażają właściwości w nieco inny sposób lub przy użyciu innej składni.

Przedrostki przeglądarki CSS, których możesz użyć (każda z nich jest specyficzna dla innej przeglądarki) to:

Android:
-webkit-
Chrom:
-webkit-
Firefox:
-moz-
Internet Explorer:
-ms-
iOS:
-webkit-
Opera:
-o-
Safari:
-webkit-

W większości przypadków, aby użyć zupełnie nowej właściwości stylu CSS, należy przyjąć standardową właściwość CSS i dodać prefiks dla każdej przeglądarki. Prefiksowane wersje zawsze będą pierwsze (w dowolnej kolejności), podczas gdy normalna właściwość CSS będzie ostatnia. Na przykład, jeśli chcesz dodać przejście CSS3 do dokumentu, użyjesz

przejście

właściwość jak pokazano poniżej:

-webkit- przejście: wszystkie 4s ułatwiają; -moz- przejście: wszystkie 4s ułatwiają; -ms- przejście: wszystkie 4s ułatwiają; -o- przejście: wszystkie 4s ułatwiają;przejście: wszystkie 4s ułatwiają;

Uwaga: Pamiętaj, że niektóre przeglądarki mają inną składnię dla niektórych właściwości niż inne, więc nie zakładaj, że wersja właściwości z prefiksem przeglądarki jest dokładnie taka sama jak standardowa właściwość. Na przykład, aby utworzyć gradient CSS, należy użyć

gradient liniowy
własność. Firefox, Opera i współczesne wersje przeglądarki Chrome i Safari używają tej właściwości z odpowiednim prefiksem, podczas gdy wczesne wersje Chrome i Safari używają prefiksowanej właściwości

-webkit-gradient
. Ponadto Firefox używa wartości innych niż standardowe.

Powodem, dla którego zawsze kończysz swoją deklarację zwykłą, nieprefixowaną wersją właściwości CSS, jest to, że gdy przeglądarka obsługuje regułę, będzie ją używać. Zapamiętaj, jak odczytuje CSS. Późniejsze reguły mają pierwszeństwo przed wcześniejszymi, jeśli specyfikacja jest taka sama, więc przeglądarka odczytałaby wersję reguły dostawcy i użyła go, jeśli nie obsługuje standardowej, ale gdy już to zrobi, zastąpi wersję dostawcy faktyczna reguła CSS.

Prefiksy dostawców nie są hackowaniem

Kiedy po raz pierwszy wprowadzono przedrostki dostawców, wielu profesjonalistów zajmujących się internetem zastanawiało się, czy nie są hackowaniem lub przejściem z powrotem w mroczne dni tworzenia kodu strony w celu obsługi różnych przeglądarek (pamiętajcie o tych " Ta strona jest najlepiej widoczna w IE "komunikaty). Prefiksy dostawców CSS nie są jednak hackami i nie powinieneś mieć zastrzeżeń do używania ich w swojej pracy.

Hack CSS wykorzystuje luki w implementacji innego elementu lub własności w celu uzyskania poprawnego działania innej właściwości. Na przykład, włamanie do modelu pudełkowego wykorzystało luki w analizie pliku

rodzina głosowa
lub w jaki sposób przeglądarki analizują ukośniki odwrotne (

). Ale te hacki zostały użyte do rozwiązania problemu różnicy między tym, jak Internet Explorer 5.5 obsługiwał model pudełkowy i jak Netscape je interpretował, i nie ma nic wspólnego ze stylem rodziny głosowej. Na szczęście te dwie przestarzałe przeglądarki to te, z którymi sami nie mamy żadnych zmartwień.

Prefiks dostawcy nie jest hackerem, ponieważ pozwala specyfikacji określić reguły dotyczące implementacji właściwości, a jednocześnie umożliwia twórcom przeglądarek zaimplementowanie właściwości w inny sposób bez niszczenia wszystkiego innego. Co więcej, te prefiksy działają z właściwościami CSS, które ostatecznie będzie częścią specyfikacji . Po prostu dodajemy kod, aby wcześnie uzyskać dostęp do właściwości. Jest to kolejny powód, dla którego kończysz regułę CSS normalną, nieprefiksowaną właściwością. W ten sposób możesz usunąć prefiksowane wersje po uzyskaniu pełnej obsługi przeglądarki.

Chcesz wiedzieć, jaka jest obsługa przeglądarki dla określonej funkcji? Witryna CanIUse.com jest wspaniałym źródłem do zbierania tych informacji i informowania, które przeglądarki oraz wersje tych przeglądarek obsługują obecnie funkcję.

Prefiksy dostawców są denerwujące, ale tymczasowe

Tak, może to być denerwujące i powtarzalne, ponieważ trzeba napisać właściwości 2-5 razy, aby działało we wszystkich przeglądarkach, ale jest to sytuacja tymczasowa. Na przykład, zaledwie kilka lat temu, aby ustawić zaokrąglony narożnik na pudełku, trzeba było napisać:

-moz-border-radius: 10px 5px;-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 5px;border-radius: 10px 5px;
Ale teraz, gdy przeglądarki już w pełni obsługują tę funkcję, naprawdę potrzebujesz tylko wersji standardowej:

border-radius: 10px 5px;
Chrome obsługuje właściwość CSS3 od wersji 5.0, Firefox dodał ją w wersji 4.0, Safari dodała ją w wersji 5.0, Opera w wersji 10.5, iOS w wersji 4.0 i Androida w wersji 2.1. Nawet Internet Explorer 9 obsługuje go bez prefiksu (a IE 8 i niższy nie obsługuje go z prefiksem lub bez prefiksów).

Pamiętaj, że przeglądarki zawsze będą się zmieniać i wymagane będzie kreatywne podejście do obsługi starszych przeglądarek, chyba że planujesz budować strony internetowe, które są latami za najnowocześniejszymi metodami. Na koniec pisanie prefiksów przeglądarki jest znacznie łatwiejsze niż wyszukiwanie i wykorzystywanie błędów, które najprawdopodobniej zostaną naprawione w przyszłej wersji, wymagając znalezienia innego błędu do wykorzystania i tak dalej.