Co to są -moz- i -webkit-?
właściwości CSS zaczynające się -webkit-, -moz-, -ms- lub -o- nazywane są przedrostki sprzedawca.
Dlaczego różne przeglądarki dodają różne prefiksy dla tego samego efektu?
dobre wyjaśnienie przedrostków dostawców pochodzi od Peter-Paul Koch z QuirksMode:
Początkowo punkt przedrostków dostawców było umożliwienie twórcy przeglądarek zacząć wspieranie eksperymentalnych deklaracje CSS.
Załóżmy, że grupa robocza W3C omawia deklarację siatki (która, nawiasem mówiąc, , nie byłaby takim złym pomysłem).Powiedzmy też, że niektórzy ludzie tworzą projekt specyfikacji, ale inni nie zgadzają się z niektórymi szczegółami z . Jak wiemy, proces ten może trwać wieki.
Załóżmy ponadto, że Microsoft jako eksperyment decyduje się na wdrożenie proponowanej siatki. W tym momencie firma Microsoft nie może uzyskać pewności, że specyfikacja nie ulegnie zmianie. Dlatego zamiast dodawać siatkę do swojego CSS, zamiast tego dodaje ona -ms-grid.
Rodzaj prefiksu dostawcy brzmi: "jest to interpretacja Microsoft trwającej oferty". Tak więc, jeśli ostateczna definicja siatki jest inna niż , Microsoft może dodać nową siatkę właściwości CSS bez łamania stron zależnych od -ms-grid.
UPDATE od roku 2016
W tym poście 3 lat, ważne jest, aby wspomnieć, że teraz większość sprzedawców rozumieją, że te prefiks są tylko tworzenie un-niezbędnego duplikat kod i że sytuacja, w której musisz określić 3 różne reguły css, aby uzyskać jeden efekt działający we wszystkich przeglądarkach, jest niepożądana.
Jak wspomniano w this słowniczek o widzenia Mozilli na Vendor Prefix na May 3, 2016,
Producenci przeglądarek są teraz próbuje pozbyć dostawcy prefiksu dla eksperymentalnych funkcji. Zauważyli, że twórcy stron internetowych używali ich na stronach internetowych produkcji , zanieczyszczając przestrzeń globalną i czyniąc ją trudniejszą dla słabszych.
Na przykład, kilka lat temu, aby ustawić zaokrąglony narożnik na polu 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, że przeglądarki mają przyjść w pełni obsługiwać tę funkcję, to naprawdę tylko potrzebują standardową wersję:
border-radius: 10px 5px;
Znalezienie właściwych zasad dla wszystkich przeglądarek
Jako, że nie ma standardu dla wspólnych reguł css, które działają we wszystkich przeglądarkach, można użyć narzędzi takich jak caniuse.com, aby sprawdzić obsługę reguły we wszystkich głównych przeglądarkach. Można również użyć . Pleeease to aplikacja Node.js, która z łatwością przetwarza Twój CSS. Upraszcza korzystanie z preprocesorów i łączy je z najlepszymi procesorami. Pomaga tworzyć czyste arkusze stylów, obsługuje starsze przeglądarki i zapewnia lepszą konserwację.
Wejście:
a {
column-count: 3;
column-gap: 10px;
column-fill: auto;
}
wyjściowa:
a {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
}
są wpadka w programowaniu, które zachęca do powtarzania kodu i uczynić źródło okropne: „Jesteśmy zbyt wiele przeglądarek , cztery lub pięć !, więc nie możemy dojść do porozumienia, jesteś tylko milionem programistów, więc proszę powtarzaj te wiersze i zamknij się, na chwilę, gdy nie chcemy zepsuć naszego kodu, jeśli nie wspominając o czarownica/sprawa. " –
@ HernánEche lol – digglemister
@ HernánEche doskonale podsumowałeś jedną z horrendalnych twarzy głupich wojen z przeglądarkami. Zadajesz to pytanie tylko z powodu Twojego komentarza. Dziękuję Ci! – Rodrigo