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

css webkit

159385 просмотра

2 ответа

-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, я никогда не видел ничего подобного этим строкам. Может кто-нибудь объяснить мне эти строки или дать мне источник, где я мог бы научиться реализовывать подобные строки?

Автор: idude Источник Размещён: 12.11.2019 09:11

Ответы (2)


158 плюса

Решение

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

Рекомендации:

Автор: David Thomas Размещён: 06.08.2013 02:33

50 плюса

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

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


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

Хорошее объяснение префиксов поставщиков приходит от Питера-Пола Коха из 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;
}
Автор: Raman Sahasi Размещён: 29.07.2016 05:34
Вопросы из категории :
32x32