Quais os caracteres que são válidos nos nomes/selectores da classe CSS?
que caracteres/símbolos são permitidos dentro dos selectores de classe CSS? Eu sei que os seguintes caracteres são inválidos , mas que caracteres são válidos ?
~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
8 answers
Pode verificar directamente na gramática CSS .
Basicamente1, um nome deve começar com um caractere de sublinhado (_
), um hífen (-
), ou uma carta(a
–z
), seguido por qualquer número de hífens, sublinhado, letras ou números. Há uma pegada: se o primeiro personagem é um hífen, o segundo personagem deve2 seja uma letra ou sublinhado, e o nome deve ter pelo menos 2 caracteres de comprimento.
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
Identificadores a começar por hífen ou underscore são normalmente reservados para extensões específicas do navegador, como em -moz-opacity
.
1 é tudo um pouco mais complicado pela inclusão de caracteres unicode escapados (que ninguém realmente usa).
2 Note que, de acordo com a gramática que eu relacionei, uma regra começando com dois hifens, por exemplo --indent1
, é inválida. No entanto, tenho a certeza que já vi isto na prática.
Todos os caracteres, exceto NUL, são permitidos nos nomes das classes CSS em CSS. (Se o CSS contiver NUL (escapado ou não), o resultado não é definido. [caracteres CSS])
A resposta de Mathias Bynens liga-se a explicação e demonstrações mostrando como usar estes nomes. escrito em código CSS, um nome de classe pode precisar de escapar , mas isso não muda a classe nome. Por exemplo, uma representação desnecessariamente sobre-escapada parecerá diferente de outras representações desse nome, mas ainda se refere ao mesmo nome de classe.
A maioria das outras linguagens (de programação) não têm esse conceito de escapar de nomes de variáveis ("identificadores"), por isso todas as representações de uma variável têm de parecer iguais. Não é o caso no CSS.
Note que no HTML não existe forma de incluir caracteres de espaço (espaço, página, Linha De Alimentação, forma de alimentação e transporte return) in a class name attribute, because they already separate classes from each other.
Então, se você precisar transformar uma cadeia aleatória em um nome de classe CSS: tome cuidado com NUL e espaço ,e escape (de acordo com CSS ou HTML). Terminar.
Leia o specW3C . (este é o CSS 2.1, encontre a versão apropriada para a sua assunção de navegadores)
Editar: o parágrafo relevante é o seguinte:
Em CSS, identificadores (incluindo nomes dos elementos, classes e IDs em selectores) podem conter apenas o caracteres [a-z0-9] e ISO 10646 caracteres U+00A1 e superiores, mais a hífen ( - ) e o sublinhado (_); não podem começar com um dígito, ou um hífen seguido de um dígito. Os identificadores também podem conter evadido caracteres e qualquer carácter ISO 10646 como código numérico (ver item seguinte). Para exemplo, o identificador "B & W?"pode ser escrito como " B\&W\?"ou" B \ 26 W \ 3F".
Edit 2: como @mipadi aponta na resposta do tríptico, há este caveat , também na mesma página web:
Em CSS, os identificadores podem começar por' -' (traço) ou " _ " (sublinhado). Palavra e nomes de propriedades começando com" -" ou " _ " estão reservados para extensões específicas do Fornecedor. Tal as extensões específicas do Fornecedor devem ter um dos seguintes formatos:
'-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name
Exemplo (S):
Por exemplo, se a organização XYZ adicionou uma propriedade para descrever a cor de a fronteira no lado leste do exibição, podem chamar-lhe - XYZ-border-east-color.
Outros exemplos conhecidos:
-moz-box-sizing -moz-border-radius -wap-accesskey
Um traço inicial ou sublinhado é garantido nunca a ser usado em um propriedade ou palavra-chave por qualquer actual ou nível futuro de CSS. Assim típico CSS implementações podem não reconhecer tais propriedades e pode ignorá-las de acordo com as regras de manipulação erros de processamento. No entanto, devido à dash inicial ou underscore é parte de a gramática, CSS 2.1 implementadores deve ser sempre capaz de usar um Analisador sintético conforme com o CSS, mesmo que não eles suportam qualquer fornecedor específico extensao.
Os autores devem evitar o fornecedor específico. extensões
O artigo também explica como escapar de qualquer personagem em CSS (e JavaScript), e eu fiz uma ferramenta útil para isso também. A partir dessa página:
Se você desse a um elemento um valor ID de
~!@$%^&*()_+-=,./';:"?><[]{}|`#
, o selector ficaria assim:CSS:
<style> #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\# { background: hotpink; } </style>
JavaScript:
<script> // document.getElementById or similar document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#'); // document.querySelector or similar $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#'); </script>
A expressão regular completa é:
-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*
Portanto, todos os caracteres listados excepto " -
" e "_
" não são permitidos se forem usados directamente. Mas você pode codificá-los usando uma barra invertida foo\~bar
ou usando a notação unicode foo\7E bar
.
Para quem procura uma solução de trabalho, pode usar um selector de atributos, por exemplo, se a sua classe começar com um número. Variação:
.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */
Para isto:
[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */
Também, se houver várias classes, você vai precisar especificá-las no selector, eu acho.
Fontes:
As classes e IDs HTML5/CSS3 podem começar com números.
Https://developer.mozilla.org/en/underscores_in_class_and_id_names
"...errata à especificação publicada no início de 2001 tornou underscores legais pela primeira vez."
O artigo acima diz para nunca os usar, depois dá uma lista de navegadores que não os suportam, todos os quais são, em termos de número de utilizadores, pelo menos, redundantes.