Содержание
Как я могу знать, когда использовать-webkit -,- moz,- ms -,- o-и т. д.?
Как я могу узнать , когда использовать префикс -webkit- , -moz- , -ms-, -o- в свойствах css? Я вижу много «inconsistency» в некоторых атрибутах, в некоторых свойствах программист ставит только -moz- , в других он ставит все 4. Есть ли для этого причина?
css
Поделиться
Источник
Unknown
13 апреля 2017 в 16:09
5 ответов
- Определение того, какой префикс webkit/moz/etc.
Я работаю на CSS английское сокращение Cups для PHP что сделано, кроме одного: Я бы хотел, чтобы он обнаружил браузер пользователя и определил, нужен ли ему border-radius, -webkit-border-radius, -moz-border-radius и т. д. Так что мне не придется использовать очень длинные и раздражающие группы….
- CSS3 без префикса webkit и moz
Есть ли плагин или что-то в этом роде, что позволит мне написать CSS вот так: transition:all 300ms; box-shadow:0 3px 2px #222; backface-visibility:hidden; и т.д.. а для версий браузеров, требующих -webkit- , -moz- , -ms- , -o- и т. д., они добавляются там, где это необходимо, автоматически при…
12
Знать, какие префиксы использовать, зависит от того, какие браузеры вы хотите поддерживать. Хорошее место, чтобы узнать, какие версии браузера требуют префикса, — это caniuse.com .
Это изменение связано с тем, какие браузеры решили поддерживать другие разработчики. Если вы видите больше префиксов, то разработчики (владелец сайта) сайта приняли решение о более высоком/глубоком уровне поддержки старых браузеров. Меньшее количество префиксов будет поддерживать меньшее количество браузеров. А почему? Может быть много причин, некоторые из которых связаны с целевой аудиторией и требованиями к функциям (Web APIs).
Вы можете пойти по ручному пути, но многие разработчики будут использовать такие инструменты, как Autoprefixer или препроцессор CSS, например SASS или LESS . Эти инструменты дают вам различные способы определения того, какие префиксы использовать.
С чем-то вроде AutoPrefixer есть возможность перечислить, какие браузеры вы хотите поддерживать, и он выясняет, какие префиксы и т. Д. Необходимы для поддержки этих браузеров на основе версии без префиксов.
С помощью препроцессора CSS, такого как SASS или LESS , вы можете создать миксин (в основном функцию), который добавит определенные вами префиксы.
Поделиться
hungerstar
13 апреля 2017 в 16:15
7
Я применяю простое эмпирическое правило: никогда не ставьте префикс поставщика (вместо этого позвольте пользователю обновить свой браузер и избегайте правил non-official/non-yet-finalized CSS).
См . http://shouldiprefix.com/ , если вы все еще хотите знать, какие префиксы являются «required» (или «стоит беспокоиться»).
Наконец, препроцессоры CSS могут справиться с этим, но часто бесполезно добавлять их в стек разработки и выпуска (за исключением случаев, когда вы используете другие материалы, которые содержат префиксы поставщиков, или если вам приходится иметь дело со старыми браузерами, как в интрасетях компаний).
Поделиться
Xenos
13 апреля 2017 в 16:15
3
потрясающий вопрос.
Многие программисты используют CanIUse , чтобы определить, поддерживается ли конкретное свойство CSS во всех браузерах, которые они хотели бы поддерживать. Если он не полностью поддерживается во всех браузерах, которые они хотят поддерживать, программист должен использовать префикс поставщика (т. е.-webkit -).
Пример Сценария
Скажем, программист хотел использовать свойство Transform ( CanIUse#Transform ). См. Как Android Браузер 4.4 & 4.4.4 имеет желтые предупреждения в правом верхнем углу? Наведите на них курсор и обратите внимание, что на нем написано «Поддерживается с -webkit»? Это именно так. когда вы добавите префикс-webkit — поставщика.
Я не согласен с тем, что вы должны добавить их все (хотя на самом деле это ничего не повредит). Если вы просто проведете небольшое исследование, прежде чем использовать новые свойства CSS, у вас будет более чистый CSS/SASS/LESS/etc, поддерживающий все браузеры, которые вы хотите. 😛
Я действительно думаю, что есть потрясающие инструменты, чтобы сделать это автоматически. Ксенос упомянул несколько.
Удачи вам в ваших начинаниях.
Поделиться
Kyle Boss
13 апреля 2017 в 16:25
- Когда использовать префиксы-moz, -webkit,- o в CSS вместо простых свойств?
Мы создаем WordPress темы, и я хочу знать, что необходимо использовать все свойства браузеров вместо ONE? Например, мы написали это для свойства transition: -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; -webkit-transition: all 350ms ease-in-out; transition: all…
- Разница между -webkit ,-khtml ,-moz, — o свойством в css?
в чем разница между -webkit-box-shadow , -khtml-box-shadow , -moz-box-shadow , -o-box-shadow в CSS? Мой CSS это такой: button:hover { -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px; -khtml-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px; -moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px; -o-box-shadow:…
2
Эти различные свойства называются «префиксами поставщиков»:
-moz- = используется для Mozilla Firefox
-ms- = используется для Microsoft Internet Explorer
-o- = используется для Opera
-webkit- = используется для браузеров Google Chrome и Apple Safari.
Это всегда хороший подход, чтобы использовать все префиксы поставщиков для css, которые вы применяете, чтобы обратиться к совместимости браузера с веб-страницей, которую вы разрабатываете.
Однако препроцессоры css, такие как LESS, могут справиться с этой задачей, если вам посчастливится их использовать. Я лично использую LESS для обработки всех этих префиксов поставщиков, и это действительно просто. Если бы я не использовал препроцессоры, я бы все равно рассмотрел возможность написания префикса поставщика css вместе с именем свойства по умолчанию.
Всегда лучше заранее позаботиться о проблемах совместимости, чем столкнуться с некоторыми из них и исправить их позже.
Попробуйте использовать инструменты префиксации поставщиков, такие как:
https://github.com/less/less-plugin-autoprefix
Поделиться
r0u9hn3ck
13 апреля 2017 в 16:34
0
Если вы хотите убедиться, что это будет работать в каждом браузере, вам нужно добавить их все, некоторые веб-сайты не поддерживают старые браузеры, поэтому нет необходимости заботиться о браузерах, которые вы решили не поддерживать 🙂
Поделиться
loki
13 апреля 2017 в 16:18
Похожие вопросы:
Где я должен использовать префиксы поставщиков CSS
Мой вопрос касается префиксов поставщиков CSS: -webkit, -moz, -ms, — o и т. д. Как я узнаю, какие свойства я должен добавить к каким css?
Я пытаюсь преобразовать команду webkit данным МЗ и СР
Я пытаюсь найти альтернативу команде webkit: -webkit-text-fill-color Поскольку это еще не поддерживается в moz o и ms, кто-нибудь знает другую команду, которая может это сделать, или какой-то Хак…
Как добавить префиксы-moz & — o в код, содержащий только теги -webkit
Скажем, у меня есть такая страница: http:/ / www.webkit.org / blog-files/3d-transforms/morphing-cubes.html Я сохраняю страницу &, запускаю файл html в свой localhost. Он отлично работает в…
Определение того, какой префикс webkit/moz/etc.
Я работаю на CSS английское сокращение Cups для PHP что сделано, кроме одного: Я бы хотел, чтобы он обнаружил браузер пользователя и определил, нужен ли ему border-radius, -webkit-border-radius,…
CSS3 без префикса webkit и moz
Есть ли плагин или что-то в этом роде, что позволит мне написать CSS вот так: transition:all 300ms; box-shadow:0 3px 2px #222; backface-visibility:hidden; и т.д.. а для версий браузеров, требующих…
Когда использовать префиксы-moz, -webkit,- o в CSS вместо простых свойств?
Мы создаем WordPress темы, и я хочу знать, что необходимо использовать все свойства браузеров вместо ONE? Например, мы написали это для свойства transition: -moz-transition: all 350ms ease-in-out;…
Разница между -webkit ,-khtml ,-moz, — o свойством в css?
в чем разница между -webkit-box-shadow , -khtml-box-shadow , -moz-box-shadow , -o-box-shadow в CSS? Мой CSS это такой: button:hover { -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;…
-moz-transform не ведет себя так же, как-webkit-transform
У меня есть круговые элементы, которые я заполняю четвертью круга, чтобы показать прогрессию. В Safari, IE и Хроме они выглядят великолепно и заполняют круг, как и положено: Однако, когда я открываю…
Когда мне нужно использовать префиксы поставщиков?
Когда я должен использовать префиксы -webkit , -moz , -o и т. д.?
Как эффективно установить свойства CSS для всех браузеров (-webkit, -moz, -o, — ms) с помощью angular?
Мне нужно установить свойство CSS с помощью функции angular. Вот мой код: <div ng-style={ ‘transform’: getRotation(i) }></div> Однако я хотел бы добавить совместимость с браузером,…
CSS — Префиксы браузеров — ИТ Шеф
В этой статье мы рассмотрим, что такое префиксы браузеров, причины их появления и как их использовать в CSS.
Что такое префиксы
Веб-разработчик начинающий изучать теоретические основы CSS и использующий данные знания на практике может столкнуться с проблемами при рассмотрении реальных примеров. Это может вызвать у него непонимание происходящего и отбить дальнейшее желание изучать данную технологию.
Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit-, -moz-, -ms- и др.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:
-webkit-: браузеры Chrome, Safari, Opera;-moz-: браузер Mozilla Firefox;-ms-: браузер Internet Explorer.
Таким образом, если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать, т.к. для них данный префикс неизвестен.
Причины появления префиксов
Причин для появления префиксов было достаточно много:
- Для включения в браузер экспериментальных свойств CSS, которые стандартом ещё не утверждены. Таким образом, производители браузеров производят тестирование и вносят предложения перед утверждением свойств CSS в стандарте.
- Для решения проблем с кроссбраузерностью.
- Для создания собственных свойств, которые не входят в стандарт CSS, но возможно появятся в нём через некоторое время.
Когда экспериментальное свойство утверждено в стандарте и прошло тестирование в браузере, у него обычно убирается префикс.
Как использовать префиксы
Рассмотрим в качестве примере следующий код:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.
При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.
Например: применение свойства CSS ко всем элементам веб-страницы в браузере Google Chrome версии 40.
На рисунке выше видно, что оригинальное свойство box-sizing уже внедрено в этот браузер, и из-за того, что оно располагается последним, браузер использует именного его, а не вышеприведенное свойство -webkit-box-sizing.
Как проверить поддержку определенного свойства в браузере
Сайт, на котором можно проверить реализовано ли данное свойство или нет в конкретном браузере можно по ссылке приведённой ниже. Кроме этого на сайте показывается количество пользователей в процентах, которые пользуется этой версией браузера.
Сайт «Can I Use…»
Например: проверим, как реализовано свойство transform в браузерах.
На сайте «CanIUse» браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:
- Красный прямоугольник — браузер, в котором данное свойство не реализовано;
- Зелёный прямоугольник с дефисом, расположенным в правом верхнем углу – браузер, в котором данное свойство используется через префикс;
- Светло-зелёный прямоугольник – браузер, в котором данное свойство реализовано частично;
- Зелёный прямоугольник – браузер, в котором данное свойство реализовано в соответствии со стандартом.
Как добавить префиксы-moz & — o в код, содержащий только теги -webkit
Скажем, у меня есть такая страница: http:/ / www.webkit.org / blog-files/3d-transforms/morphing-cubes.html
Я сохраняю страницу &, запускаю файл html в свой localhost. Он отлично работает в chrome, так как css использует префикс -webkit. Теперь я хочу проверить, работает ли is и на firefox & opera. Поэтому я должен добавить префикс-moz &-o в тот же код css, который имеет -webkit.
Есть ли какой-либо другой метод, кроме добавления префиксов-moz &-o в коде?
Один из методов-это написание скрипта для чтения файла & и добавления тегов. А другие?
Примечание: меня не волнует, поддерживаются ли в настоящее время преобразования css3, используемые -webkit,- moz или-o или нет. Все, что мне нужно, — это как дублировать строки -webkit, добавляя к ним префиксы поставщиков-moz &-o.
css
vendor-prefix
Поделиться
Источник
gopi1410
03 сентября 2012 в 09:55
2 ответа
- CSS 3 — переходные префиксы-какие из них использовать?
У меня есть вопрос относительно префиксов поставщиков CSS для перехода. Этот источник утверждает, что вам нужно использовать все обычные префиксы, чтобы это работало во всех браузерах (-o -,- webkit -,- moz -,- ms-). Эта страница показывает только префиксы -webkit- и -moz- и утверждает, что IE…
- Есть ли смысл использовать префиксы конкретного поставщика, отличные от «-webkit-» для «transition»?
В курсе, который я беру, я нашел следующее (отрывок): p.box{ -webkit-transition: border-radius 1s; -moz-transition: border-radius 1s; -o-transition: border-radius 1s; -ms-transition: border-radius 1s; transition: border-radius 1s; } p.rounded{ border-radius:50px; } Однако, согласно этой таблице ,…
Поделиться
sandeep
03 сентября 2012 в 09:58
Поделиться
Rohit Kumar
09 июня 2015 в 04:10
Похожие вопросы:
Как я могу знать, когда использовать-webkit -,- moz,- ms -,- o-и т. д.?
Как я могу узнать , когда использовать префикс -webkit- , -moz- , -ms- , -o- в свойствах css? Я вижу много inconsistency в некоторых атрибутах, в некоторых свойствах программист ставит только -moz-…
Что такое правильное название для -webkit- / -moz-префиксы в CSS?
Я уже давно использую префиксы-webkit — и-moz — и не знаю, как правильно называть эти префиксы. Не мог бы кто-нибудь, пожалуйста, успокоить мой разум и сказать мне, каково правильное имя?
Какие префиксы необходимы для анимации?
Я задал себе вопрос. Когда я создаю анимацию с префиксом-webkit (или другим префиксом), мне нужно написать свойства только с этим префиксом или добавить все префиксы. напр. @-webkit-keyframes bounce…
CSS 3 — переходные префиксы-какие из них использовать?
У меня есть вопрос относительно префиксов поставщиков CSS для перехода. Этот источник утверждает, что вам нужно использовать все обычные префиксы, чтобы это работало во всех браузерах (-o -,- webkit…
Есть ли смысл использовать префиксы конкретного поставщика, отличные от «-webkit-» для «transition»?
В курсе, который я беру, я нашел следующее (отрывок): p.box{ -webkit-transition: border-radius 1s; -moz-transition: border-radius 1s; -o-transition: border-radius 1s; -ms-transition: border-radius…
Compass filter out-префикс поставщика moz
Использование Yeoman с generator-angular-fullstack для моего проекта. Поддержка SCSS превосходна, однако все префиксы my -moz фильтруются из результата css. Я просмотрел документы compass ,…
Когда использовать префиксы-moz, -webkit,- o в CSS вместо простых свойств?
Мы создаем WordPress темы, и я хочу знать, что необходимо использовать все свойства браузеров вместо ONE? Например, мы написали это для свойства transition: -moz-transition: all 350ms ease-in-out;…
Разница между -webkit ,-khtml ,-moz, — o свойством в css?
в чем разница между -webkit-box-shadow , -khtml-box-shadow , -moz-box-shadow , -o-box-shadow в CSS? Мой CSS это такой: button:hover { -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;…
Когда мне нужно использовать префиксы поставщиков?
Когда я должен использовать префиксы -webkit , -moz , -o и т. д.?
после компиляции sass с использованием laravel mix отображается только webkit
Я использовал следующий код scss для mixin, но после компиляции префиксы moz-и — o-vendor не отображаются в скомпилированном файле css. @mixin transition($move) { -webkit-transition: $move;…
CSS Что такое -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, я никогда не видел ничего подобного этим строкам. Может ли кто-нибудь объяснить эти строки мне или дать мне источник, где я мог бы научиться реализовывать такие строки?
Спасибо заранее!
Ответ 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.
Литература:
Ответ 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;
}
moz-transition — свойство css :: руководство cssdot.ru
Свойство -moz-transition — универсальное свойство для задание эффекта анимированного перехода при изменении css-свойств элемента. Данное свойство представляет сокращенную запись для одновременного задания всех свойства перехода — свойство, к изменению которого будет применен плавный переход -moz-transition-property, длительность перехода -moz-transition-duration, способ расчета промежуточных значений -moz-transition-timing-function и задержку перед началом перехода -moz-transition-delay.
Анимированный переход будет совершаться при изменении тех свойств элемента, которые указанны в -moz-transition-property, например, при помощи javascript. Не для всех свойств возможно задание анимированного перерода при изменении значения (например, труда себе представить, как должен выглядить анимированный переход при изменении свойства display) Список CSS свойств, к которым возможно применять эффект анимированного перехода, представлен далее:
background-color | цвет |
background-image | только градиенты |
background-position | проценты, размер |
border-bottom-color | цвет |
border-bottom-width | расстояние |
border-color | цвет |
border-left-color | цвет |
border-left-width | расстояние |
border-right-color | цвет |
border-right-width | расстояние |
border-spacing | расстояние |
border-top-color | цвет |
border-top-width | расстояние |
border-width | расстояние |
bottom | расстояние, проценты |
color | цвет |
crop | rectangle |
font-size | расстояние, проценты |
font-weight | число |
| <grid-*> | various |
height | расстояние, проценты |
left | расстояние, проценты |
letter-spacing | расстояние |
line-height | число, расстояние, проценты |
margin-bottom | расстояние |
margin-left | расстояние |
margin-right | расстояние |
margin-top | расстояние |
max-height | расстояние, проценты |
max-width | расстояние, проценты |
min-height | расстояние, проценты |
min-width | расстояние, проценты |
opacity | число |
outline-color | цвет |
outline-offset | число |
outline-width | расстояние |
padding-bottom | расстояние |
padding-left | расстояние |
padding-right | расстояние |
padding-top | расстояние |
right | расстояние, проценты |
text-indent | расстояние, проценты |
text-shadow | shadow |
top | расстояние, проценты |
vertical-align | keywords, расстояние, проценты |
visibility | visibility |
width | расстояние, проценты |
word-spacing | расстояние, проценты |
z-index | число |
zoom | число |
Пример
Свойство -moz-transition относится к спецификации CSS, применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка Gecko (браузер Firefox), и не совместимо с другими браузерами.
Смотри также:
- transition — свойства анимационного перехода
- transition-property — имя css-свойства, к которому будет применен анимационный переход.
- transition-duration — длительность анимационного перехода
- transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- transition-delay — задержка перед выполнением анимационного перехода
- -moz-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -moz-transition-duration — длительность анимационного перехода
- -moz-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -moz-transition-delay — задержка перед выполнением анимационного перехода
- -webkit-transition — свойства анимационного перехода
- -webkit-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -webkit-transition-duration — длительность анимационного перехода
- -webkit-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -webkit-transition-delay — задержка перед выполнением анимационного перехода
- -o-transition — свойства анимационного перехода
- -o-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -o-transition-duration — длительность анимационного перехода
- -o-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -o-transition-delay — задержка перед выполнением анимационного перехода
Краткое описание
свойства анимационного перехода
Синтаксис:
[<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*
Применяется к:
все элементы, и псевдоэлементы :before и :after
Наследование:
не наследуется
Тип носителя:
визуальный
Объектная модель документа (DOM):
[элемент].style[‘-moz-transition’]
Кроссбраузерная совместимость
Internet Explorer
не поддерживается
Firefox
Chrome
не поддерживается
Safari
не поддерживается
Opera
не поддерживается
Зачем нужны вендорные префиксы | Vaden Pro
У каждого браузера есть свои встроенные, экспериментальные или нестандартные свойства и для того, что бы они корректно работали используют вендорные префиксы. В названии не зря использовано слово префиксы потому что, как и в грамматике, они являются приставкой, только в данном случае к свойству CSS.
Вендорные префиксы представляют собой надпись, которая начитается с «-» или с «_» и для каждого браузера имеет смысл специального маркера, написанного перед CSS свойством.
Использование данного префикса гарантирует работу именно этого стиля в определённом браузере, а также то, что он не перекроется аналогичными стилями, предназначенными для других браузеров.
Как их отличать?
Каждый движок, на котором написан браузер, имеет свой вендорный префикс.
Рассмотрим самые популярные браузеры и их префиксы. Те которые написанны на движке WebKit, а именно Safari выше третьей версии и GoogleChrome, считывают префикс -webkit-, а Safari до третьей версии -khtml-, так как имеет в своей основе движок KHTML. Для Opera можно использовать следующие префиксы: -o-, -op-, -xv-. Firefox воспримет свойства имеющие приставку -moz-, а браузеры корпорации Microsoft те, перед которыми написано -ms-.
Как это выглядит на практике?
Рассмотрим на примере для свойства transition-duration:
-webkit-transition-duration:0.76s; -moz-transition-duration:0.76s; -o-transition-duration:0.76s; -ms-transition-duration:0.76s; transition-duration:0.76s;
Как мы можем видеть, первыми пишутся элементы стиля с вендорными префиксами, для каждого браузера. Стоит обратить внимание, что стиль соответствующий требованиям спецификации пишется последним. Благодаря этой записи, к примеру, Firefox из написанного выше примера воспримет только вторую строчку, а остальные проигнорирует.
Для чего это нужно?
Большинство производителей называют несколько причин, когда нужно использовать вендорные префиксы. Основные, из которых:
- Свойство, которое было написано только для конкретного браузера и не содержится в стандартном списке css.
- Свойство ещё разрабатывается или по каким-то причинам не имеет рекомендаций к использованию
- Css задаёт только часть возможностей стиля.
Разработчики компании Microsoft, помимо выше перечисленных причин, при помощи своего вендорного префикса -ms-, прячут от валидатора те конструкции, которые его не пройдут.
При верстке не возникает ни какого желания прописывать свойство заново и добавлять ему вендорный префикс, однако эта необходимость вызвана тем, что CSS и его спецификация не всегда содержит необходимые нам свойства. Кроме того, есть не маленький шанс, что описание свойства в дальнейшем измениться и использование префиксов будет не нужным.
Дополнительные возможности
Благодаря появлению вендорных префиксов большинство компаний производящих свои браузеры стали внедрять собственные свойства CSS.
Уже сейчас для верстки своих проектов можно исключить некоторые скрипты, заменив их стилями CSS.
Так, к примеру, вышеуказанный стиль позволяет плавно изменять цвет, при наведении не используя JavaScript. Однако если попробовать обойтись без префиксов, то данный стиль в некоторых браузерах может работать не корректно или не работать вообще.
Подводя итоги
Вендорные префиксы – приставки к стилям css, имеющие смысловую нагрузку только для тех браузеров, к которым они относятся. Они дают возможность браузеру воспринимать не стандартные свойства, а также не воспринимать те стили, которые предназначены для других пользовательских клиентов.
Стоит отметить, что свойства, имеющие данный префикс, не пройдут валидации. Однако при правильном использовании они придают большей гибкости CSS, по этой причине большинство веб-студий ими не пренебрегают.
Оценок: 22 (средняя 4.1 из 5)
- 21948 просмотров
Понравилась статья? Расскажите о ней друзьям:
Курсы по CSS (в открытом доступе)
Уровень сложности:
Средний
Еще интересное
Решено: префиксы поставщиков (-moz, -webkit) окончательно устарели, … — Сообщество поддержки Adobe
pziecina написал
Просто жаль, что Dw, когда он как бы реализовал решение для префикса поставщика, вынуждает пользователей использовать sass / less, и что я просил отдельное решение для более 6 лет, безуспешно.
Каким вы видите эту работающую Паулу?
Я сейчас немного зациклен на этой функции автоприставки от производителя.Я не могу протестировать автопрефиксатор в скобках, так как он перестал работать давным-давно, и я не могу вспомнить, как это работало. Когда я пытаюсь установить плагин снова, он говорит, что есть проблема, поэтому я сдался и больше не использую скобки, но я был заинтересован, чтобы увидеть, как работают автопрефиксы этих плагинов, поэтому я установил автопрефиксатор в Atom, его дерьмо . Я имею в виду, что он автоматически устанавливает префиксы css, но вы должны выбрать css (предположим, что вы знаете, что должно быть префиксом), откройте палитру команд и выберите автопрефиксатор для каждого блока кода css, который вы хотите автопрефикс, что?
Разумеется, чтобы эта автоприставка была полезной, она должна выполняться при сохранении файла css, верно? Вам нужно, чтобы автопрефиксатор решил, какие префиксы нужно добавить, а какие t-префиксы, если они есть, можно удалить.
Для других программ, которые я сейчас использую, требуется сложная сеть для установки noodle.js или voodle.js, pig или grunt, как бы она ни называлась, вы получаете картину, а затем погружаетесь в терминал, чтобы создать дополнительные ‘нежелательные ‘папки в папке проекта с файлом js, который нужно запустить для компиляции css ….. гммм WTF?
Это просто безумие только для того, чтобы добавить несколько префиксов поставщиков в ваш файл css. Проще использовать файл sass / less и заставить Prepos скомпилировать его, верно. Его менее сложная настройка, кажется, создает меньше файлов, так что же дает? В DW по умолчанию встроен sass / less.
Либо эти плагины автопрефикса должны запускаться при сохранении файла css, либо они бесполезны. Я не хочу запускать файлы js или постоянно выбирать блоки текста и открывать палитру команд для его компиляции.
Используете ли вы что-нибудь, что работает иначе?
Хмммммм.
Префиксы поставщиков CSS
Префиксы поставщиков — это один из способов, с помощью которого браузеры предоставляют нам разработчикам CSS доступ к новым функциям, которые еще не считаются стабильными.
Прежде чем продолжить, запомните, что популярность этого подхода снижается в пользу использования экспериментальных флагов , которые должны быть явно включены в браузере пользователя.
Почему? Поскольку разработчики вместо того, чтобы рассматривать префиксы поставщиков как способ предварительного просмотра функций, они отправляли их в производство, что считается вредным для Рабочей группы CSS.
В основном потому, что как только вы добавляете флаг и разработчики начинают использовать его в производственной среде, браузеры оказываются в плохом положении, если понимают, что что-то должно измениться.С флагами вы не сможете отправить функцию, если не сможете подтолкнуть всех посетителей включить этот флаг в их браузерах (шутка, не пытайтесь).
Тем не менее, давайте посмотрим, что такое префиксы поставщиков.
Я особенно запомнил их для работы с переходами CSS в прошлом. Вместо того, чтобы просто использовать свойство перехода , вам нужно было сделать это:
.myClass {
-webkit-transition: все единицы линейны;
-moz-переход: все 1с линейные;
-ms-transition: все единицы линейны;
-o-переход: все единицы линейны;
переход: все единицы линейные;
}
Теперь вы просто используете
.мои занятия {
переход: все единицы линейные;
}
, так как свойство теперь хорошо поддерживается всеми современными браузерами.
Используемые префиксы:
-
-webkit-(Chrome, Safari, iOS Safari / iOS WebView, Android) -
-moz-(Firefox) -
-ms-(Edge, Internet Explorer) -
-o-(Opera, Opera Mini)
Поскольку Opera и Edge основаны на Chromium, -o- и -ms- , вероятно, скоро выйдут из моды.Но, как мы уже говорили, вендорные приставки в целом тоже выходят из моды.
Писать префиксы сложно, в основном из-за неопределенности. Вам действительно нужен префикс для одного свойства? Некоторые онлайн-ресурсы тоже устарели, что усложняет задачу.
Такие проекты, как Autoprefixer, могут полностью автоматизировать процесс без необходимости выяснять, нужен ли префикс больше, или функция теперь стабильна, и префикс должен быть удален. Он использует данные с caniuse.com, очень хорошего справочного сайта по всем вопросам, связанным с поддержкой браузеров.
Если вы используете React или Vue, такие проекты, как create-react-app и Vue CLI, два распространенных способа начать сборку приложения, используйте autoprefixer из коробки, так что вам даже не нужно об этом беспокоиться .
Добавление префикса поставщика CSS автоматически с помощью Sublime Text
Есть много свойств CSS3, которые все еще являются экспериментальными. Экспериментальное свойство CSS использует префикс поставщика, и, как мы уже знаем, каждый браузер имеет свой собственный префикс; Firefox использует -moz- , Internet Explorer использует -ms- , Chrome и Safari используют -webkit- , а Opera использует -o- (который также был переключен на -webkit- ).
Проблема в том, что, если вы не используете Compass, включение префикса поставщика утомительно. Требования также различаются для каждого браузера, и стоит ли нам включать префикс (или нет), становится вопросом, заслуживающим рассмотрения.
Если вы используете Sublime Text, вот более простой способ.
Рекомендуемая литература: Как обновить изменения в браузере с помощью Sublime
Установка Node.js
Во-первых, нам нужно установить Node.js в нашей системе.Установочный пакет доступен для Windows, OSX и Linux, который вы можете скачать здесь. Если вы не уверены, есть он у вас или нет, выполните следующую команду в Терминале.
узел -v
Если он уже установлен, он должен вернуть версию, как показано ниже.
Установка AutoPrefixer
Автоприставка разработана Андреем Ситником. Затем он переносится в пакет Sublime Text Синдре Сорхусом.
Я рекомендую вам установить Package Control, чтобы упростить установку пакетов.Вы можете обратиться к Wbond за официальными инструкциями. После этого вы можете нажать клавиши Command + Shift + P и выбрать «Установить пакет». Затем найдите Autoprefixer .
Нажмите , введите для установки.
Использование AutoPrefixer
AutoPrefixer поставляется со следующими настройками по умолчанию:
{
"браузеры": ["последние 2 версии"]
}
Но мы можем персонализировать это в соответствии с нашими собственными требованиями.
Autoprefixer использует базу данных CanIUse.com для добавления префиксов. CanIUse.com перечисляет статистику поддержки CSS3, а также HTML5, JS и SVG в браузерах, включая использование префиксов поставщиков. И, как мы видим из настроек по умолчанию, Autoprefixer также добавляет префиксы для последних двух версий.
Если мы возьмем CSS3 Transition в качестве примера, он добавит префиксы для браузеров Webkit и Opera.
А если ставить на 7 версий назад, вот так.
{
"браузеры": ["последние 7 версий"]
}
Он также будет включать -moz- для Firefox
Чтобы добавить префикс, вы можете нажать Command + Shift + P и выбрать Autoprefix CSS , вот так.
Теперь вы можете просто написать стандартный синтаксис CSS3, и этот плагин будет включать префикс за вас в мгновение ока.
Вопрос -moz- -webkit- и т. Д. что использовать?
Вопрос
-moz- -webkit- и т. Д.что использовать?
*
1715 видимость
0 arrow_circle_up
0
arrow_circle_down
Я не знаю, как называются эти элементы, поэтому я должен задать вопрос (я уверен, что на него уже есть много ответов, но я не могу найти правильные результаты).Во многих руководствах и кодах CSS я вижу только «-webkit-» и «-moz-». По сей день использую (возьмем переход):
-webkit-transition
-moz-переход
-ms-переход
-o-переход
переход
Лучше все это использовать или ерунда?
Спасибо за ответ!
Ответ — 1
0 arrow_circle_up
0
arrow_circle_down
Все они относятся к навигатору:
-moz- для mozilla firefox
-ms- для Internet Explorer
-webkit- для оперы, хрома и сафари
Все они используют это имя с префиксом, чтобы понять CSS, прежде чем функциональность будет полностью реализована.Вы можете проверить http://caniuse.com/, чтобы узнать, когда их использовать.
Источник:
https://stackoverflow.com/questions/25243306
css — O que são -moz e -webkit-?
Quais são -moz e -webkit -?
Как свойство CSS que começam com -webkit- , -moz- , -ms- или -o- são chamadas de prefixos de fornecedores.
Por que diferentes navegadores adicionam prefixos diferentes para o mesmo efeito?
Ума раскрывает префиксы для объяснений Питера-Пола Коха из QuirksMode:
Исходно, или объективные префиксы для форнедоресурсов эры разрешают, чтобы критически настроенные участники экспериментов давали поддержку декларациям CSS.
Digamos que um grupo de trabalho do W3C esteja discutindo uma declaração de grade (que, aliás, não seria uma idéia tão ruim).Além disso, vamos dizer que algumas pessoas criam uma especificação de rascunho, mas outras discordam de alguns detalhes. Como sabemos, esse processo pode demorar séculos.
Além disso, вампир, который Microsoft, como um экспериментально, решает реализовать свою категорию proposta. Neste momento, Microsoft не подпадает под сертификацию по особой спецификации без серой альтернативы. Портанто, добавленный на уровень CSS, выбрал
-ms-grid.Тип префикса для форнедора диз «есть интерпретация Microsoft де-мэра пропоста эм андаменто».Портанто, это определенная итоговая оценка для разных, Microsoft предлагает более подробную оценку свойств CSS для всех страниц, зависящих от -ms-grid .
ATUALIZAÇÃO A PARTIR DO ANO 2016
Como este post de 3 anos, is important mencionar que agora a maioria dos vendedores entende que estes prefixos estão apenas dêñando um códuario descriodes especificar três regras CSS Diferentes para obter um efeito, o trabalho em todos os navegadores é indesejado.
Como mencionado em this glossário sobre a visão da Mozilla em Vendor Prefix em 3 May 2016 ,
Os fornecedores de navegadores estãora tentando se livrar do prefixo do fornecedor para recursos Experiment. Eles notaram que os desenvolvedores da Web os estavam usando em sites de produção, poluindo o espaço global e сложное или desempenho dos prejudicados.
Пример: apenas alguns anos atrás, para Definir um canto arredondado em uma caixa, voiceê tinha que escrever:
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10 пикселей;
-webkit-border-top-right-radius: 5 пикселей;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5 пикселей;
радиус границы: 10 пикселей 5 пикселей;
Больше информации о том, что нужно пройти, чтобы поддержать полную рекурсию, голосовая связь с точной версией:
border-radius: 10px 5px;
Encontrando as regras corretas para todos os navegadores
Como ainda não há um padrão para regras CSS comuns que funcionem em todos os navegadores, voiceê pode usar ferramentas como cani.com para verificar o suporte de uma regra em todos os Principais navegadores.
Você também pode usar pleeease.io/play. Удовлетворительно это приложение для Node.js, которое легко обрабатывает CSS. Ele simpleifica o uso de pré-processadores e os combina com os melhores pós-processadores. Ele ajuda a criar folhas de estilo limpas, suporta navegadores mais antigos e oferece melhor manutenção.
Entrada:
a {
количество столбцов: 3;
столбец-пробел: 10 пикселей;
заполнение столбца: авто;
}
Saída:
a {
-webkit-column-count: 3;
-moz-column-count: 3;
количество столбцов: 3;
-webkit-столбец-пробел: 10 пикселей;
-moz-column-gap: 10 пикселей;
столбец-пробел: 10 пикселей;
-webkit-column-fill: авто;
-moz-column-fill: авто;
заполнение столбца: авто;
}
Установка свойств CSS3 с помощью JavaScript
Установка свойств CSS3 с помощью
JavaScript
Последнее обновление: 9 апреля 2013 г.
В настройке свойств CSS с помощью JavaScript нет ничего нового, и в большинстве случаев
часть следует очень предсказуемому пути:
документ.getElementById ("adiv"). style.height = "100px" // установить свойство высоты CSS с помощью JavaScript
document.body.style.backgroundColor = "yellow" // установить свойство CSS background-color с помощью JavaScript Сначала вы получите доступ к объекту « style »
элемента, а затем введите желаемое имя свойства CSS, чтобы установить его. Если CSS
название свойства переносится через дефис, например « background-color «, уберите дефис и
используйте заглавные буквы при обращении к нему в JavaScript.Достаточно просто, правда? С установкой свойств CSS3 технически ничего
изменения; проблема в том, чтобы знать, какое свойство устанавливать! Вы видите, как браузеры
участвовал в поддержке свойств CSS3 до того, как они были окончательно доработаны, использование
префиксы поставщиков были тем, что браузеры превратили, чтобы предложить «временное» решение
в то время как детали официальной собственности хэшируются. Все основные браузеры
имеют собственный префикс поставщика, а именно:
| Префикс | Описание |
|---|---|
| -ms- | префиксов Microsoft CSS, например -ms-filter , -ms-behavior и -ms-zoom . |
| -моз- | префиксов Mozilla CSS, например -moz-box-shadow , -moz-border-radius и -moz-transform . |
| -webkit- | префиксов CSS Webkit (Safari, Chome и т. Д.), Например -webkit-box-shadow , -webkit-border-radius и -webkit-transform . |
| -о- | CSS префиксов Opera, например -o-transition , -o-переполнение текста , -о-преобразование . |
| -хтмл- | префиксов Konqueror CSS, например -khtml-user-select и -khtml-border-radius |
Например, чтобы добавить поле CSS3
shadow (свойство box-shadow ) к элементу в данный момент, вам необходимо определить
3 отдельных свойства CSS для всех ваших баз (IE9 +, FF3.5 +, Safari
4+ / Chrome и Opera 8.5+):
#mydiv {
box-shadow: 7px 7px 8px # 818181;
-webkit-box-shadow: 7px 7px 8px # 818181;
-moz-box-shadow: 7px 7px 8px # 818181;
} |
Установка свойств поставщика CSS в CSS — это в основном просто
проявляйте терпение, но когда дело доходит до JavaScript, вы можете добавить логистику
к нему тоже.Хотя обычные правила настройки CSS с использованием JavaScript все еще
подать заявку на настройку свойств CSS для конкретных поставщиков, как мы узнаем, какие
свойство установить? Например, в FF3.5 -moz-box-shadow — это
поддерживаемое свойство, в то время как в IE9 это официальный box-shadow
свойство, которое он распознает вместо этого. Конечно, мы можем просто установить все возможные свойства, но
вопрос в том, будете ли вы все еще уважать себя как программиста в конце
день, если ты это сделал? Более эффективный и элегантный способ — проверить браузер, чтобы узнать, какое свойство CSS он использует.
поддерживает, затем установите только это свойство.
Установка свойств CSS3 в
JavaScript
Итак, как именно мы можем установить свойство CSS3, когда
разные браузеры могут поддерживать разные варианты свойства? Ключ кроется в том, что если
браузер поддерживает определенное свойство CSS, он вернет строковое значение (пустое
строка, если еще не задана), когда вы запрашиваете ее у элемента на странице. В
другими словами, свойство существует у элемента. Если
это не так, вместо этого возвращается значение undefined .С этим
имея в виду, мы можем выполнить одноразовую проверку перед установкой свойства CSS3
какой вариант собственности он поддерживает, и всегда обращайтесь к этому в
наш код. С учетом сказанного, давайте создадим функцию, которая принимает массив
свойств CSS и возвращает тот, который поддерживает браузер, в виде строки:
function getsupportedprop (proparray) {
var root = document.documentElement // ссылочный корневой элемент документа
for (var i = 0; i В приведенном ниже примере используется функция getsupportedprop () , чтобы узнать, какой CSS
box-shadow свойство ваше
браузер поддерживает - « boxShadow », « MozBoxShadow » или « WebKitBoxShadow ».
при нажатии кнопки:
function alertboxshadow () {
alert (getsupportedprop (['boxShadow', 'MozBoxShadow', 'WebkitBoxShadow']))
} Оповещение поддерживает свойство box-shadow »
Если вы используете FF3 +, вы должны получить « MozBoxShadow » в IE9 +
и Opera9 +, « boxShadow », а в Safari4 + и Chrome, « WebKitBoxShadow ».В
в других браузерах должно быть возвращено значение undefined .
Вооружившись вышеуказанной функцией, теперь мы можем приступить к настройке CSS3
свойства в JavaScript проще, передав в функцию список
возможные варианты определенного свойства CSS3, и позволяя функции
выяснить, какой из них поддерживает браузер и который следует принять. Водить
теперь домой, давайте настроим демонстрацию, где можно использовать 3 различных свойства CSS3.
динамически добавляется или удаляется к кнопке ссылки с относительной легкостью благодаря
вышеупомянутая функция:
<сценарий>
var shadowprop = getsupportedprop (['boxShadow', 'MozBoxShadow', 'WebkitBoxShadow'])
var roundborderprop = getsupportedprop (['borderRadius', 'MozBorderRadius', 'WebkitBorderRadius'])
var csstransform = getsupportedprop (['преобразование', 'MozTransform', 'WebkitTransform', 'msTransform', 'OTransform'])
function changecssproperty (target, prop, value, action) {
если (typeof prop! = "undefined")
цель.стиль [prop] = (действие == "удалить")? "" : ценить
}
Форумы по программированию
<сценарий>
var z = document.getElementById ("cfbutton")
Добавить тень
Удалить тень
Добавить круглую границу
Удалить круглую границу
Добавить преобразование, поворот
Удалить преобразование Демо:
Форумы по программированию
Добавить тень | Удалить тень Добавить круглую границу | Удалить круглую границу Добавить преобразование, поворот | Удалить преобразование Как видите, сначала мы используем getsupportedprop ()
функция для получения и кэширования каждого варианта CSS3 box-shadow ,
border-radius и преобразовывают свойства в
браузер поддерживает.Затем, используя эти свойства, мы приступаем к манипулированию
их динамически в JavaScript.
Далее, получает поддержкуprop () выше, в то время как
действительно выполняет свою работу, честно говоря, можно было бы использовать некоторый рефакторинг, чтобы быть более элегантным
и универсальный. Это то, чем мы будем заниматься дальше.
Создание универсальной функции извлечения свойств CSS3
Что такое -moz- и -webkit-? [дубликат]
Добро пожаловать на SiteforDEV.com.
Ниже представлен лучший ответ на вопрос Что такое -moz- и -webkit-? [дубликат] .Надеюсь, этот обмен поможет вам решить проблему. Что такое -moz- и -webkit-? [дубликат] у вас.
Это свойства с префиксом поставщика, предлагаемые соответствующими механизмами визуализации ( -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;
радиус границы: 2em;
}
В частности, чтобы обратиться к CSS в вашем вопросе, приведите строки, которые вы цитируете:
-webkit-column-count: 3;
-webkit-столбец-пробел: 10 пикселей;
-webkit-column-fill: авто;
-moz-column-count: 3;
-moz-column-gap: 10 пикселей;
-moz-column-fill: авто;
Укажите свойства column-count , column-gap и column-fill для браузеров Webkit и Firefox.