Co to są prefiksy dostawcy CSS lub przeglądarki?

Prefiksy dostawcy CSS, czasami znane również jako lub CSS prefiksy przeglądarki są sposobem dla twórców przeglądarek na dodanie obsługi add nowe funkcje CSS zanim te funkcje będą w pełni obsługiwane we wszystkich przeglądarkach. Można to zrobić podczas pewnego rodzaju testów i eksperymentów, podczas których producent przeglądarki dokładnie określa, w jaki sposób te nowe funkcje CSS zostaną zaimplementowane. Te przedrostki stały się bardzo popularne wraz z pojawieniem się CSS3 kilka lat temu.

Pochodzenie przedrostków dostawcy

Kiedy CCS3 został wprowadzony po raz pierwszy, wiele wzbudzonych właściwości zaczęło trafiać do różnych przeglądarek w różnym czasie. Na przykład przeglądarki oparte na Webkit (Safari i Chrome) jako pierwsze wprowadziły niektóre właściwości stylu animacji, takie jak transformacja i przejście. Używając prefiksu dostawcy nieruchomości, projektanci stron internetowych mogli wykorzystać te nowe funkcje w swojej pracy i wyświetlać je w przeglądarkach który obsługuje je od razu, zamiast czekać, aż każdy inny producent przeglądarek złapie go. w górę!

Wspólne przedrostki

Tak więc z perspektywy programisty front-endowego, prefiksy przeglądarki służą do dodawania nowych funkcji CSS do witryny, mając jednocześnie poczucie komfortu, wiedząc, że przeglądarki będą obsługiwać te style. Może to być szczególnie przydatne, gdy różni producenci przeglądarek implementują właściwości w nieco inny sposób lub przy użyciu innej składni.

Prefiksy CSS przeglądarki, których możesz użyć (z których każdy jest specyficzny dla innej przeglądarki) to:

• Android:

  -webkit-

• Chrom:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -SM-

• iOS:

  -webkit-

• Opera:

  -o-

• Safari:

  -webkit-

Dodawanie prefiksu

W większości przypadków, aby użyć zupełnie nowej właściwości stylu CSS, należy wziąć standardową właściwość CSS i dodać przedrostek dla każdej przeglądarki. Wersje z prefiksem zawsze będą na pierwszym miejscu (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 swojego dokumentu, użyj właściwości przejścia, jak pokazano poniżej:

-przejście na webkit: łatwość wszystkich 4s;
-moz-przejście: łatwość wszystkich 4s;
-przejście ms: łatwość wszystkich 4s;
-o-przejście: łatwość wszystkich 4s;
przejście: łatwość wszystkich 4s; 

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 przedrostkiem przeglądarki jest dokładnie taka sama jak standardowa. Na przykład, aby utworzyć gradient CSS, użyj właściwości linear-gradient. Firefox, Opera i nowoczesne wersje Chrome i Safari używają tej właściwości z odpowiednim prefiksem, podczas gdy wczesne wersje Chrome i Safari używają właściwości z prefiksem -webkit-gradient.

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

Powodem, dla którego zawsze kończysz swoją deklarację normalną, bezprefiksową wersją właściwości CSS, jest to, że gdy przeglądarka obsługuje regułę, użyje jej. Pamiętaj, jak odczytywany jest CSS. Późniejsze reguły mają pierwszeństwo przed wcześniejszymi, jeśli specyfika jest taka sama, więc przeglądarka odczytałaby wersję dostawcy a reguła i użyj tego, jeśli nie obsługuje normalnej, ale gdy już to zrobi, zastąpi wersję dostawcy rzeczywistym CSS reguła.

Prefiksy dostawców to nie hack

Kiedy prefiksy dostawców zostały wprowadzone po raz pierwszy, wielu profesjonalistów internetowych zastanawiało się, czy były to włamanie, czy cofnij się do mrocznych dni forkingu kodu witryny, aby obsługiwał różne przeglądarki (pamiętaj, że "Tę stronę najlepiej oglądać w IE" wiadomość). Prefiksy dostawców CSS nie są jednak hackami i nie powinieneś mieć żadnych zastrzeżeń do wykorzystania ich w swojej pracy.

Hakowanie CSS wykorzystuje luki w implementacji innego elementu lub właściwości w celu poprawnego działania innej właściwości. Na przykład hack modelu pudełkowego wykorzystywał luki w parsowaniu rodziny głosów lub w sposobie, w jaki przeglądarki analizują ukośniki odwrotne \. Ale te hacki zostały wykorzystane do rozwiązania problemu różnicy między tym, jak Internet Explorer 5.5 radził sobie z modelem pudełkowym, a tym, jak Netscape interpretować i nie mieć nic wspólnego z rodzinnym stylem głosu. Na szczęście te dwie przestarzałe przeglądarki to takie, którymi nie musimy się obecnie martwić.

Prefiks dostawcy nie jest hackiem, ponieważ pozwala specyfikacji ustalić zasady implementacji właściwości, jednocześnie pozwalając twórcom przeglądarek na implementację właściwości w inny sposób bez psucia wszystkiego jeszcze. Ponadto te przedrostki działają z właściwościami CSS, które ostatecznie będzie częścią specyfikacji. Po prostu dodajemy trochę kodu, aby wcześniej uzyskać dostęp do nieruchomości. To kolejny powód, dla którego kończysz regułę CSS normalną, bez prefiksu właściwością. W ten sposób możesz usunąć wersje z prefiksem po osiągnięciu pełnej obsługi przeglądarki.

Prefiksy dostawcy są denerwujące, ale tymczasowe

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

-moz-border-radius: 10px 5px;
-webkit-border-górny-lewy-promień: 10px;
-webkit-border-górny-prawy-promień: 5px;
-webkit-border-dolny-prawy-promień: 10px;
-webkit-border-dolny-lewy-promień: 5px;
promień obramowania: 10px 5px; 

Ale teraz, gdy przeglądarki w pełni obsługują tę funkcję, naprawdę potrzebujesz tylko standardowej wersji:

promień obramowania: 10px 5px; 

Chrome obsługuje właściwość CSS3 od wersji 5.0, Firefox dodał ją w wersji 4.0, Safari dodał ją w wersji 5.0, Opera w wersji 10.5, iOS w 4.0, a Android w 2.1. Nawet Internet Explorer 9 obsługuje to bez prefiksu (a IE 8 i starsze nie obsługują go z lub bez przedrostki).

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 tworzenie stron internetowych które są o wiele lat za najnowocześniejszymi metodami. Ostatecznie pisanie prefiksów przeglądarki jest znacznie łatwiejsze niż znajdowanie i wykorzystywanie błędów, które najprawdopodobniej zostaną naprawione w przyszłej wersji, co wymaga znalezienia innego błędu do wykorzystania i tak dalej.