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

Ответ 1

Это свойства с префиксом поставщика, предлагаемые соответствующими механизмами рендеринга (-webkit для Chrome, Safari; -moz для Firefox, -o для Opera, -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.

Литература:

• Модуль компоновки нескольких столбцов CSS.
• 'В защиту префиксов поставщиков (Meyerweb.com).
• Список префиксов поставщиков (Meyerweb.com).

Ответ 2

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

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

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

Хорошее объяснение префиксов поставщиков происходит от Peter-Paul Koch от QuirksMode:

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

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

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

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

ОБНОВЛЕНИЕ ЗА ГОД 2016

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

Как упоминалось в этом глоссарии о представлении Mozilla на Vendor Prefix на 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 - это приложение Node.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;
}