Как проверить вендорные префиксы в CSS, как -webkit- и -moz-?
Я использую CSS-свойства webkit/mozilla border radius и box shadow, но я хочу, чтобы CSS проверил (чего в настоящее время нет). Есть ли способ получить его для проверки?
7 ответов
Нет, они являются специфическими для браузера свойствами и не определены в стандартной спецификации CSS.
При этом они правильно следуют правилам для конкретного расширения CSS. Это просто не в официальной спецификации CSS W3C.
Хотя синтаксис для расширений поставщиков упоминается в модуле синтаксиса CSS3 и вводится в грамматику, чтобы позволить поставщикам реализовывать свои собственные префиксы, игнорируя стандарт, сами фактические расширения поставщиков не распознаются как официальные свойства CSS. Это не изменится, поскольку они являются собственностью и специфичны для поставщиков, которые их изобретают и используют.
Тем не менее, недавнее усовершенствование ( начало 2011 года) в Jigsaw W3C CSS Validator позволяет уменьшить количество ошибок проверки, вызванных расширениями поставщика, до предупреждений. Найдите эту новую опцию среди других, таких как уровень CSS для проверки, развернув раздел Дополнительные параметры:
Это облегчает поиск реальных проблем с вашей таблицей стилей, если она все еще не проверена. Если расширения поставщика являются единственными вещами, вызывающими ошибки, превращение их в предупреждения позволит вашей таблице стилей предварительно проверить. Это также избавляет от необходимости хранить расширения поставщиков в отдельной таблице стилей, которую вы должны скрыть от валидатора.
Предупреждения - это самое дальнее, что вы можете избежать ошибок, хотя, в конечном счете, префиксы вендоров все еще нестандартны и, следовательно, технически недопустимы в CSS.
Это отчасти возможно. Соберите все ваши неподдерживаемые классы CSS в один файл (css3.css)
Пример:
css3.css
.round{
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
-webkit-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-right-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 5px 5px;
}
default.css
.square{
width: 100px;
height: 100px;
border: 1px solid #000000;
}
page.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" href="css3.css">');
</script>
</head>
<body>
<div class="square round"></div>
</body>
</html>
Поисковая система не запускает клиентские скрипты, поэтому ваши неподдерживаемые атрибуты W3C не повредят вашему SEO. Что касается проверки зеленого CSS, извините, пока нет.
Если вы используете отдельный CSS-файл для моего "недопустимого" или "специфичного для браузера" CSS, тогда используйте небольшой PHP, чтобы отфильтровать этот CSS из валидатора:
<?php
if(preg_match("/jigsaw.w3c.org/i", $_SERVER['HTTP_HOST'])){
echo '<link rel="stylesheet" href="invalid.css" type="text/css" media="screen, projection" />';
}
?>
Затем ссылка на валидатор с CSS3 в качестве профиля (принимает border-radius, text-shadow и т. Д.):
http://jigsaw.w3.org/css-validator/check/referer?profile=css3
$ _SERVER ['HTTP_HOST'] не работает, но, возможно, есть что-то, что сработает?
12-12-2011
Ками действительно опубликовал лучшее решение. Я создаю отдельный файл css3.js и document.write(''); CSS построчно:
CSS3.js
document.write('\
<style type="text/css">\
home_low_mod {zoom: 1;}\
#home_module {-moz-border-radius: 8px;-webkit-border-radius: 8px;-moz-box-shadow: 0px 1px 3px #a5a6a2;-webkit-box-shadow: 0px 1px 3px #a5a6a2;behavior: url(PIE.htc);}\
#page {-moz-border-radius: 8px 8px 0 0;-webkit-border-radius: 8px 8px 0 0;behavior: url(PIE.htc);}\
</style>');
Определенные свойства Mozilla и WebKit не будут проверяться. Что вы можете сделать, это разделить ваш "обогащенный" CSS в отдельную таблицу стилей. Так же, как вы отделяете свои стили ie hack от своей основной таблицы стилей. Таким образом, ваши базовые таблицы стилей будут проверены.
Нет, так как они не являются частью стандарта, который проверяет валидатор. Единственное решение, которое приходит на ум, - это поместить несовместимые свойства в отдельную таблицу стилей.
@BoltClock ПОЛНОСТЬЮ прямо на этом... W3C действительно добавил vextwarning уровень BOOL критерий поиска. Это НЕ задокументировано... но если вы используете их проверку SOAP API, вы можете добавить параметр в полезную нагрузку вашей проверки. GET запрос....
&vextwarning=true
например... если вы хотите отредактировать команду валидатора CSS в TextMate... вы бы "Edit Bundles...", иначе ^ + ⌥ +⌘+ В
#!/usr/bin/env ruby
print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=0&profile=none&usermedium=all&text='
scope = STDIN.read
…
чтобы - что-то - более похоже на
#!/usr/bin/env ruby
print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=2&vextwarning=true&profile=css3&usermedium=all&text='
scope = STDIN.read
…
Обратите внимание, что я также добавил level=css3 и изменил warninglevel, При необходимости измените их в соответствии с API.
Если вы хотите увидеть все параметры, доступные через механизм отправки в режиме онлайн... откройте Firebug или инспектора Webkit и т. Д. При отправке запроса через их форму и проверьте full request content чтобы получить еще больше возможностей по мере необходимости...
