2013-08-06 10 views
109
-webkit-column-count: 3; 
-webkit-column-gap: 10px; 
-webkit-column-fill: auto; 
-moz-column-count: 3; 
-moz-column-gap: 10px; 
-moz-column-fill: auto; 

Jestem początkujący w css i kiedy patrzyłem na jakiś kod css innego dnia, znalazłem te linie. W tutorialach uczyłem się css, nigdy nie widziałem czegoś takiego jak te linie. Czy ktoś mógłby mi wyjaśnić te linie lub podać mi źródło, w którym mógłbym nauczyć się realizować takie linie?CSS Czym są -moz- i -webkit-?

Z góry dziękuję!

+32

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. " –

+3

@ HernánEche lol – digglemister

+1

@ 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

Odpowiedz

117

Są to właściwości sprzedawca-prefiksem oferowane przez odpowiednie silniki renderujące (-webkit dla Chrome, Safari, Firefox, -moz-o dla Opery, -ms dla programu Internet Explorer). Zazwyczaj są one używane do implementacji nowych lub zastrzeżonych funkcji CSS przed ostatecznym wyjaśnieniem/definicją przez W3.

Umożliwia to ustawienie właściwości specyficznych dla poszczególnych przeglądarek/silników renderujących, aby można było bezpiecznie rozliczyć niespójności między implementacjami. Z czasem prefiksy zostaną usunięte (przynajmniej teoretycznie), ponieważ niepoprawiona, ostateczna wersja właściwości jest zaimplementowana w tej przeglądarce.

W tym celu zwykle uważa się za dobrą praktykę, aby najpierw określić wersję z prefiksem dostawcy, a następnie wersję nieprefiksowaną, aby nieprzedstawiona właściwość zastąpiła uprzednio ustawione właściwości właściwości dostawcy po jej wdrożeniu; na przykład:

.elementClass { 
    -moz-border-radius: 2em; 
    -ms-border-radius: 2em; 
    -o-border-radius: 2em; 
    -webkit-border-radius: 2em; 
    border-radius: 2em; 
} 

szczególności zająć się CSS w swoim pytaniu, linie cytujesz:

-webkit-column-count: 3; 
-webkit-column-gap: 10px; 
-webkit-column-fill: auto; 
-moz-column-count: 3; 
-moz-column-gap: 10px; 
-moz-column-fill: auto; 

Określ column-count, column-gap i column-fill właściwości dla przeglądarek WebKit i Firefox.

Odniesienia:

+0

+1. Pamiętaj jednak, że Google stwierdził, że Chrome nie będzie już mieć prefiksów dla nowych funkcji; jeśli funkcja jest eksperymentalna, będzie ukryta za flagą konfiguracji i domyślnie wyłączona, zamiast prefiksowana. Istniejące prefiksy pozostaną na miejscu w krótkim czasie i zostaną usunięte w normalnym procesie. – Spudley

+0

@Spudley: naprawdę? O rany, to wydaje się denerwujące: Wolałbym być mile zaskoczony nową techniką CSS, używając prefiksu, niż musieć otwarcie szukać nowych funkcji. Nawiasem mówiąc, o ile wiesz, czy jest to pojedyncza flaga, aby włączyć * wszystkie * funkcje eksperymentalne lub listę kontrolną, aby włączyć poszczególne funkcje jeden po drugim? –

+1

Google stara się, aby to, że jeśli funkcja jest eksperymentalna, nie powinna być używana w witrynach produkcyjnych; domyślne wyłączenie zniechęca, ponieważ użytkownicy końcowi nie będą go mieli włączeni, ale twórcy stron internetowych wciąż mogą z nim eksperymentować. A jeśli funkcja jest gotowa do produkcji, nie powinna potrzebować prefiksu. Taka jest teoria. Osobiście uważam, że jest to rozsądny sposób robienia rzeczy; cały pomysł na prefiks pozostawił nam bałagan w postaci duplikatu kodu: W3C przeciągnęło nogi na nowe standardy i nikt nie chciał czekać na ich sfinalizowanie przed użyciem nowych funkcji. – Spudley

33

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; 
}