Что такое-moz - и-webkit-?


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

Я новичок в CSS, и когда я смотрел на какой-то код CSS на днях, я нашел эти строки. В учебниках, которые я использовал для изучения CSS, я никогда не видел ничего подобного этим строкам. Может ли кто-нибудь объяснить мне эти строки или дать мне источник, где я мог бы научиться реализовывать такие строки?

2 123

2 ответа:

это свойства с префиксом поставщика, предлагаемые соответствующими движками рендеринга (-webkit для Chrome, Safari;-moz для Firefox, -o для оперы, -ms для Internet Explorer). Обычно они используются для реализации новых или проприетарных функций CSS до окончательного уточнения/определения W3.

это позволяет задавать свойства, специфичные для каждого отдельного браузера / механизма рендеринга, чтобы обеспечить безопасный учет несоответствий между реализациями для. Префиксы со временем будут удалены (по крайней мере, теоретически), поскольку в этом браузере реализована нефиксированная, окончательная версия свойства.

С этой целью обычно считается хорошей практикой сначала указать версию с префиксом поставщика, а затем версию без префикса, чтобы свойство без префикса переопределяло параметры свойства с префиксом поставщика после его реализации; например:

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

в частности, для решения CSS в вопрос, строки, которые вы цитируете:

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

указать column-count,column-gap и column-fill свойства для браузеров Webkit и Firefox.

ссылки:

что такое-moz - и-webkit-?

свойства CSS, начиная с -webkit-,-moz-,-ms- или -o- называются префиксы поставщиков.


почему разные браузеры добавляют разные префиксы для одного и того же эффекта?

хорошее объяснение префиксов поставщиков происходит от Петропавловского Коха QuirksMode:

первоначально, пункт префиксов поставщика должен был позволить разработчики браузеров чтобы начать поддерживать экспериментальные объявления CSS.

допустим, рабочая группа W3C обсуждает объявление сетки (которое, кстати, не было бы такой уж плохой идеей). Кроме того, говорят, что некоторые люди создают проект спецификации, но другие не согласны с некоторые детали. Как мы знаем, этот процесс может занять годы.

более того, скажем, что Microsoft в качестве эксперимента решает реализуем предложенную сетку. При этом момент времени Майкрософт не может убедитесь, что спецификация не изменится. Поэтому, вместо того, чтобы из добавления сетки в свой CSS, он добавляет -ms-grid.

префикс поставщика говорит: "это интерпретация Microsoft текущего предложения."Таким образом, если окончательное определение сетки по-другому, Microsoft может добавить новую сетку свойств CSS, не нарушая страницы, которые зависят от-ms-grid.


обновление ПО СОСТОЯНИЮ НА 2016 ГОД

как этот пост 3 года, важно отметить, что теперь большинство поставщиков понимают, что эти префиксы просто создают ненужный дубликат кода и что ситуация, когда вам нужно указать 3 разных правила CSS, чтобы получить один эффект, работающий во всех браузерах, является нежелательной.

как говорится в этой глоссарий о представлении Mozilla на Vendor Prefix on May 3, 2016,

производители браузеров теперь пытаются избавиться от префикса поставщика для экспериментальных особенности. Они заметили, что веб-разработчики используют их на производство веб-сайтов, загрязняющих мировое пространство и делающих его больше трудно для аутсайдеров хорошо выступить.

например, несколько лет назад, чтобы установить закругленный угол на коробке надо было написать:

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

но теперь, когда браузеры пришли к полной поддержке этой функции, вам действительно нужно только стандартная версия:

border-radius: 10px 5px;

поиск правильных правил для всех браузеров

поскольку до сих пор нет стандарта для общих правил CSS, которые работают во всех браузерах, вы можете использовать такие инструменты, как caniuse.com проверить поддержку правила во всех основных браузерах.

вы также можете использовать pleeease.io/play. Pleeease-это узел.JS приложение, которое легко обрабатывает ваш CSS. Это упрощает использование препроцессоры и объединяет их с лучшими постпроцессорами. Это помогает создавать чистые таблицы стилей, поддерживать старые браузеры и предлагает лучшую ремонтопригодность.

вход:

a {
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
}

выход:

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