5

Às vezes me deparo com alguns exemplos de arquivo .css com a declaração de charset logo na primeira linha:

@charset "utf-8";

Até meu editor de códigos (Dreamweaver CC 2015), quando crio um novo arquivo CSS, já coloca essa linha por padrão no início do documento:

inserir a descrição da imagem aqui

Mas um arquivo CSS geralmente apenas contém estilos e propriedades (exceto em casos de pseudo-elementos ::before e ::after onde se pode colocar textos na propriedade content).

Me surgiu uma dúvida em relação a isso: realmente é necessária essa declaração? Se sim ou não, qual o motivo?

5
  • Pergunta complementar: Operadores CSS com @
    – Largato
    20/11/2018 às 23:33
  • 2
    Sabe se existe alguma diferença entre declarar no HTML ou CSS? ` <meta charset="utf-8" />` ?
    – hugocsl
    20/11/2018 às 23:37
  • @hugocsl Pois é, essa é minha dúvida. Qual seria a explicação técnica pra isso? :D
    – Sam
    20/11/2018 às 23:39
  • Vou dar uma pesquisada, mas uma vez que um eh indexado dentro do outro acho que declarar no html seria mais prudente... Mas vou pesquisar antes tbm sobre isso
    – hugocsl
    20/11/2018 às 23:50
  • 2
    Algo que está relacionado, se não responder em parte à questão é colocar estilos como .cabeçalho { } num css sem @charset ? Como o browser deve interpretar esse nome uma vez que está fora do ascii normal?
    – Isac
    21/11/2018 às 0:58

3 Respostas 3

2

Palavras da W3C

You should always use UTF-8 as the character encoding of your style sheets and your HTML pages, and declare that encoding in your HTML. If you do that, there is no need to declare the encoding of your style sheet.

PORTUGUÊS: "Você deve sempre usar UTF-8 como a codificação de caracteres de suas folhas de estilo e suas páginas HTML e declarar essa codificação em seu HTML. Se você fizer isso, não há necessidade de declarar a codificação da sua folha de estilos."

Fonte: https://www.w3.org/International/questions/qa-css-charset

Então resumidamente podemos dizer que se vc já declarou o Charset no HTML que vai indexar essa folha de estilo vc não precisa necessariamente declarar o Charset dentro do .CSS

Para declarar o Charset no HTML vc pode usar:

<meta charset="utf-8" />

Ou

<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">

Leve também esses pontos em consideração:

  • Esse elemento <meta> é apenas uma parte do algoritmo para determinar o conjunto de caracteres de uma página que os navegadores aplicam. O cabeçalho HTTP Content-Type e quaisquer elementos da BOM têm precedência sobre esse elemento.
  • É uma boa prática, e altamente recomendável, definir o conjunto de caracteres usando este atributo.
  • várias técnicas de scripts cruzados poderão prejudicar o usuário da página, como a técnica de cross-scripting de fallback UTF-7. Sempre definindo esta meta irá proteger contra esses riscos.

Então definir o Charset no HTML é a té uma questão de segurança e é considerada uma boa prática e altamente recomendável.

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/meta


Veja que a Mozilla diz que:

A regra @charset especifica a codificação de caracteres utilizada na folha de estilo.

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/CSS/@charset

Nota! Não é suficiente simplesmente colocar @charset "utf-8"; no topo da folha de estilo - você também precisa salvar sua folha de estilo na codificação de caracteres UTF-8.

Importante: Como o cabeçalho HTTP tem uma precedência mais alta que a declaração in-document @charset , você deve sempre levar em consideração se a codificação de caracteres já está declarada no cabeçalho HTTP. Se estiver, @charset deve ser definido para declarar a mesma codificação e só terá efeito quando a folha de estilo for lida em um contexto onde não haja cabeçalhos HTTP (por exemplo, de uma unidade local).

-2

Quando iniciei tive vários problemas com acentuação, e pesquisando, descobri a necessidade de informar qual tipo de codificação que o navegador irá utilizar, nesse caso, o utf-8.

-3

no CSS eu uso o charset assim:

html:lang(pt-br) { 
    @charset "UTF-8"; 
}   

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .