Как использовать свойство -moz- и -webkit- css для поддержки разных браузеров?

Question

Для всех свойств CSS3 я должен использовать версии с префиксом разных поставщиков для поддержки различных модулей рендеринга.Вот пример:

-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;

background:#dee0e1;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1f2f3), to(#dee0e1));
background:-moz-linear-gradient(#f1f2f3, #dee0e1);
background:-o-linear-gradient(#f1f2f3, #dee0e1);
background:linear-gradient(#f1f2f3, #dee0e1);

Для радиуса границы я должен использовать 3 разных свойства, а для градиента фона я должен использовать свойство фона 5 разными способами.Это увеличивает размер CSS.

Есть ли способ использовать только одно свойство и заставить Firefox 1-5 понять его?

Answer 1

Есть ли способ использовать только один собственность и сделать Firefox 1-5 понимаешь?

Короче, нет.

Firefox до версии 4 требует -moz-border-radius: http://caniuse.com/border-radius

Firefox 3.6 по-прежнему имеет долю на рынке , поэтому вам следует сохранить префиксную версию поставщика.

для градиента фона мне нужно использовать свойство background в 5 разных путь. Это увеличивает размер CSS.

На данный момент вы ничего не можете с этим поделать.

В конце концов, все браузеры будут поддерживать linear-gradient. Пока этого не произойдет, и более старые версии больше не используются, вам придется мириться с раздутым CSS.

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

http://www.colorzilla.com/gradient-editor/

background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */

Answer 2

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

Вот достойное руководство по уменьшению проблем с префиксом поставщика:

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-never-type-a-vendor-prefix-again/

Вы хорошо знаете тренировку. Хочу дать какой-то раздел вашего сайта закругленные углы с CSS3? Тогда вы будете не требуется ничего, кроме трех поставщиков префиксы: webkit, moz и W3C рекомендуемая форма. Разве это не огромный трата времени - не говоря уже о экране пространство? Что если вместо этого мы могли бы использовать файл класса? Ну, мы можем! Я покажу ты как сегодня.

.. а вот классы LESS из учебника: http://snipplr.com/view/47181/less-classes/

Answer 3

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

В основном проверенная и проверенная методика, которая сегодня используется библиотеками, такими как модернизатор, и которая основана на поведении браузера, которое странно довольно согласованно во всех браузерах, ис небольшими вариациями может использоваться для всех видов обнаружения объектов.

Давайте возьмем, например, свойство css 'transform'.Если вы протестируете результат ...

somediv.style['transform']

... и браузер поддерживает это имя, вы получите строку, даже если она пуста, так как свойство не задано.Если, с другой стороны, браузер не распознает это имя, он вместо этого вернет javascript undefined.result.

Поскольку на самом деле существует довольно ограниченное число префиксов поставщиков, таких как ....

(Khtml Ms O Moz Webkit Web-Kit)

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

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

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

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

Кстати, помимо того, что техника невероятно проста и невероятно быстра, сама работа происходит на втором этапе document.readyState, задолго до полной загрузки страницы или даже для document.readyState 4 "complete".

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

Иногда сумасшедший объем глупостей заставляет людей думать, что идея иметь возможность проверенного контента и чистого источника пошла по пути чистого воздуха, нона самом деле это не так, как орехтрюк с CSS-границей и добавление в него текстур для создания египетских пирамид:)