Где я могу найти кросс-браузер, модификатор CSS?

Question

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

CSS3 и даже CSS не работают в браузерах, таких как IE7, как это было задумано (меня не интересует IE6), и приходится тратить так много времени на то, чтобы все работало в разных браузерах, что креативные концепции и актуальная цель сайта уходит в окно.

Есть ли решение для того, чтобы сделать / трансформировать CSS / CSS3 для совместимости с браузерами, которые его не поддерживают. Возможно, библиотека JavaScript?

Было бы неплохо изменить прозрачность следующим образом:

.style { opacity: 0.5; }

и не так:

.style {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
}

... похож на Prefix Free , который в настоящее время не поддерживает IE

Так есть ли библиотеки JavaScript, которые будут динамически расширять CSS по мере необходимости для определенного браузера, а также включать поддержку CSS3 и проверку CSS3 на будущее? *

Answer 1

Одной идеей может быть рассмотрение LESS framework . Это объектно-ориентированный способ работы с CSS. Таким образом, чтобы установить непрозрачность, вы должны сделать что-то вроде этого:

.opacity (@opacity) {
    opacity: @opacity;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacity*100)";
    filter: alpha(opacity=@opacity*100);
}

Затем, чтобы использовать его, вы просто «вызываете» его как функцию.

.style {
    .opacity(0.7);
}

И вывод будет похож на ваш второй фрагмент кода

Answer 2

Я использую CSS3PIE для совместимости с IE!

Не уверен, будут ли какие-либо конфликты между Prefix Free и CSS Pie - но это стоит попробовать!

http://css3pie.com/

Это требует немного работы для настройки, но после этого это довольно хорошо!

Answer 3

http://cssprefixer.appspot.com/, возможно, хороший вариант! И использование его в сочетании с чем-то вроде LessCSS было бы жизнеспособным вариантом, но я думаю, что конечные результаты сводятся к некоторому надлежащему тестированию.

Все дело в минимизации размеров CSS-файлов, а также в попытках получить максимальную производительность на стороне клиента с точки зрения рендеринга HTML и выполнения JS.