Как проверить префиксы поставщиков в CSS, такие как -webkit- и -moz-?

StackOverflow https://stackoverflow.com/questions/1889724

Вопрос

Я использую свойства CSS радиус границы webkit/mozilla и тень блока, но я хочу, чтобы CSS проверял (чего в настоящее время нет).Есть ли способ получить его для проверки?

http://jigsaw.w3.org/css-validator/

Это было полезно?

Решение

Нет, это свойства, специфичные для браузера, и они не определены в стандартной спецификации CSS.

При этом они правильно следуют правилам расширения CSS для конкретного поставщика.Этого просто нет в официальной спецификации CSS W3C.

Другие советы

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

Однако недавнее усовершенствование (начало 2011 года) к CSS-валидатор Jigsaw W3C позволяет сократить валидацию ошибки вызвано расширениями поставщиков для предупреждения.Найдите эту новую опцию среди других, таких как уровень 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;
    }

страница.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, извините, пока нет.

Нет, поскольку они не являются частью стандарта, который проверяет валидатор.Единственное решение, которое приходит на ум, — это вынести несовместимые свойства в отдельную таблицу стилей.

Специфические свойства Mozilla и WebKit не будут проверяться.Что вы можете сделать, так это выделить «обогащенный» CSS в отдельную таблицу стилей.Точно так же, как вы отделяете стили ie hack от основной таблицы стилей.Таким образом, ваши базовые таблицы стилей будут проверены.

Если вы используете отдельный файл 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>');

@BoltClock это ПОЛНОСТЬЮ именно в этом...W3C действительно добавил vextwarning уровень BOOL критерий поиска.Это НЕТ задокументировано...но если вы используете их Проверка SOAP API вы можете добавить параметр в полезную нагрузку вашей проверки GET запрос....

&vextwarning=true

например...если вы хотите отредактировать команду проверки CSS в TextMate...вы бы «Редактировать пакеты...», он же ⌃+⌥+⌘+Б

#!/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 чтобы получить еще больше возможностей, при необходимости...

webkit inspector of css3 validation

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top