Что такое-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 ответов


это свойства с префиксом поставщика, предлагаемые соответствующими механизмами рендеринга (-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 чтобы проверить поддержку правила во всех основных браузерах.

вы также можете использовать пожалуйста.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;
}