Sobre este problema HTML
Um erro lexical é uma falha de análise de baixo nível. Ao contrário de um erro de sintaxe onde a estrutura está errada mas os carateres são individualmente válidos, um erro lexical significa que o analisador não consegue sequer formar tokens válidos a partir da entrada. A especificação CSS define um conjunto preciso de carateres e sequências que são significativos — nomes de propriedades, valores, pontuação como ;, :, {, }, e assim por diante. Quando o analisador encontra algo fora destas expectativas, como @ onde deveria estar um ;, uma aspas curva (“smart”) em vez de uma aspa reta, ou um caráter Unicode perdido, levanta um erro lexical.
Isto é importante por várias razões. Primeiro, os browsers lidam com CSS inválido de forma imprevisível — alguns podem saltar todo o bloco de regras, outros podem ignorar apenas a declaração quebrada, e o comportamento pode variar entre versões dos browsers. Isto leva a renderização inconsistente para os seus utilizadores. Segundo, um único erro lexical pode criar um efeito em cascata, fazendo com que o analisador interprete mal CSS válido subsequente também, potencialmente quebrando estilos muito além da linha problemática. Terceiro, CSS limpo e válido é mais fácil de manter, depurar e colaborar.
Causas comuns deste erro incluem:
-
Carateres inválidos usados no lugar de pontuação — por exemplo,
@,!, ou#onde deveria estar um ponto e vírgula ou dois pontos. -
Aspas curvas (“smart”) — colar CSS de processadores de texto ou editores CMS que convertem
"aspas retas"para"aspas curvas"ou'apostrofes curvos'. -
Pontos e vírgulas em falta — embora nem sempre seja um erro lexical, um
;em falta pode fazer com que o nome da propriedade da linha seguinte seja lido como parte do valor anterior, produzindo sequências de carateres inesperadas. - Carateres invisíveis não-ASCII — marcas de ordem de bytes (BOM), espaços de largura zero, ou espaços inquebráveis que são invisíveis na maioria dos editores mas inválidos em tokens CSS.
- Artefactos de copiar-colar — copiar código de PDFs, websites, ou aplicações de chat que inserem carateres de formatação ocultos.
Para corrigir o problema, vá à linha e coluna exatas que o erro referencia. Olhe para o caráter que reporta como “Encontrado” e determine qual deveria ser o caráter correto. Se não conseguir ver nada de errado, tente apagar os carateres à volta da posição reportada e reescrevê-los manualmente — isto elimina problemas de carateres invisíveis.
Exemplos
Caráter inválido em vez de ponto e vírgula
O símbolo @ após blue não é pontuação CSS válida neste contexto:
<style>
h1 {
color: blue@
font-size: 24px;
}
</style>
Substitua @ por um ponto e vírgula adequado:
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>Aspas curvas em font-family
Aspas curvas copiadas de um processador de texto causam um erro lexical:
<style>
body {
font-family: \u201CHelvetica Neue\u201D, sans-serif;
}
</style>Use aspas retas duplas em vez disso:
<style>
body {
font-family: "Helvetica Neue", sans-serif;
}
</style>Caráter perdido num estilo inline
Uma crase acidental num atributo style desencadeia o erro:
<p style="color: red`; margin: 0;">Hello</p>Remova o caráter inválido:
<p style="color: red; margin: 0;">Hello</p>Espaço inquebrável invisível
Por vezes o erro aponta para o que parece ser espaço vazio. Um espaço inquebrável (\u00A0) colado de outra fonte pode esconder-se entre tokens:
<style>
.box {
display:\u00A0flex;
}
</style>Apague o espaço e reescreva-o como um espaço ASCII normal:
<style>
.box {
display: flex;
}
</style>Se suspeita de carateres invisíveis, use a funcionalidade “mostrar espaços em branco” ou “mostrar carateres invisíveis” do seu editor de texto, ou cole o CSS num editor hexadecimal para inspecionar os bytes brutos. Configurar o seu editor para guardar ficheiros em UTF-8 sem BOM também ajuda a prevenir erros lexicais relacionados com codificação.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.