Como validar prefixos de fornecedores em css como -webkit- e -moz-?

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

Pergunta

Eu uso o raio da borda Webkit/Mozilla e as Propriedades do CSS Shadow Box, mas quero que o CSS valida (o que atualmente não usa). Existe uma maneira de obtê -lo para validar?

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

Foi útil?

Solução

Não, são propriedades específicas do navegador e não são definidas na especificação CSS padrão.

Dito isto, eles seguem corretamente as regras para a extensão específica do fornecedor do CSS. Simplesmente não está na especificação oficial do CSS do W3C.

Outras dicas

Embora a sintaxe para extensões de fornecedor seja mencionado no módulo de sintaxe CSS3 e introduzido na gramática para permitir que os fornecedores implementem seus próprios prefixos ignorando o padrão, as próprias extensões reais do fornecedor não são reconhecidas como propriedades oficiais do CSS. Isso não vai mudar, pois eles são proprietários e específicos para os fornecedores que os inventam e os usam.

No entanto, um aprimoramento recente (início de 2011) para o Validador CSS do Jigsaw W3C torna possível reduzir a validação erros acionado por extensões de fornecedor para avisos. Encontre essa nova opção entre outros, como o nível de CSS para validar contra a expansão do Mais opções seção:

Isso facilita encontrar os problemas reais com sua folha de estilo se ainda não validar. Se as extensões do fornecedor forem as únicas coisas que desencadeiam erros, transformá -los em avisos permitirá que sua folha de estilo valida provisoriamente. Ele também elimina a necessidade de manter extensões de fornecedores em uma folha de estilo separada que você deve esconder do validador.

Os avisos são os mais distantes de que você pode evitar erros, pois, em última análise, os prefixos de fornecedores ainda não são padrão e, portanto, tecnicamente inválidos CSS.

Parcialmente possível. Colete todas as suas classes CSS não suportadas em um arquivo (css3.css)

Exemplo:

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;
    }

página.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>

O mecanismo de pesquisa não executa scripts do cliente, portanto seus atributos W3C não suportados não danificam seu SEO. Quanto à validação verde do CSS, desculpe, ainda não.

Não, como eles não fazem parte do padrão contra o qual o validador valida. A única solução que vem à mente é colocar as propriedades incompatíveis em uma folha de estilo separada.

As propriedades específicas do Mozilla e do Webkit não validarão. O que você pode fazer é separar o seu CSS "enriquecido" em uma folha de estilo separada. Assim como você separa seus estilos de hackear do IE da sua folha de estilo principal. Dessa forma, suas folhas de estilo base validarão.

Se você usar um arquivo CSS separado para o meu CSS "inválido" ou "específico do navegador", use um pouco de PHP para filtrar que o CSS do validador:

<?php
if(preg_match("/jigsaw.w3c.org/i", $_SERVER['HTTP_HOST'])){ 
    echo '<link rel="stylesheet" href="invalid.css" type="text/css" media="screen, projection" />'; 
}
?>

Em seguida, ligue para o validador com CSS3 como o perfil (aceita radiato de fronteira, sombra de texto, etc.):

http://jigsaw.w3.org/css-validator/check/referer?profile=css3

$ _Server ['http_host'] não funciona, mas talvez haja algo que o fará?

12-12-2011

Kami realmente postou a melhor solução. Eu crio um arquivo CSS3.js separado e document.write (''); O CSS linha por linha:

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 é TOTALMENTE bem neste ... w3c realmente adicionou um vextwarning nível BOOL critérios de pesquisa. Isso é NÃO documentado ... mas se você estiver usando o deles Validação da API SOAP Você pode adicionar um parâmetro à carga útil da sua validação GET solicitar....

&vextwarning=true

Por exemplo ... se você quisesse editar o comando CSS Validator no TextMate ... você "editaria pacotes ...", aka ⌃+⌥+⌘+B

#!/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
…

para - algo - mais ao longo de gente como 

#!/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
…

Observe que eu também adicionei um level=css3 e mudou o warninglevel. Altere -os, de acordo com a API, como necessário.

Se você quiser ver tudo Os parâmetros disponíveis através do mecanismo de envio "online" .... Abra o Firebug, ou o inspetor do Webkit, etc. ao enviar uma consulta via sua forma e confira o full request content Para obter ainda mais opções, conforme necessário ...

webkit inspector of css3 validation

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top