Por que especificar @charset “UTF-8”; no seu arquivo CSS?

173

Eu tenho visto essas instruções como a primeira linha de vários arquivos CSS que foram entregues para mim:

@charset "UTF-8";

O que faz e isso é necessário em regra?

Além disso, se eu incluir essa metatag no meu elemento "head", isso eliminaria a necessidade de tê-lo presente também nos meus arquivos CSS?

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
css character-encoding rsturim
fonte

Respostas:

123

Diz ao navegador para ler o arquivo css como UTF-8. Isso é útil se o seu CSS contiver caracteres unicode e não apenas ASCII.

Usá-lo na metatag é bom, mas apenas para páginas que incluem essa metatag.

Leia sobre as regras para a resolução do conjunto de caracteres dos arquivos CSS na especificação w3c do CSS 2.

Oded
fonte
7
Também é importante se você vincular esses arquivos de sites que não sejam UTF-8, como, digamos: um site japonês codificado como UTF-16 tentando carregar CSS de uma CDN obterá conteúdo ilegível se o arquivo CSS não declarar sua codificação.
Paracetamol
147

Isso é útil em contextos em que a codificação não é informada por cabeçalho HTTP ou outros metadados, por exemplo, o sistema de arquivos local.

Imagine a seguinte folha de estilo:

[rel="external"]::after
{
    content: ' ↗';
}

Se um leitor salvar o arquivo em um disco rígido e você omitir a @charsetregra, a maioria dos navegadores o lerá na codificação local do sistema operacional, por exemplo, Windows-1252 e inserirá † - em vez de uma seta.

Infelizmente, você não pode confiar nesse mecanismo, pois o suporte é bastante… raro. E lembre-se de que, na rede, um cabeçalho HTTP sempre substituirá a @charsetregra.

As regras corretas para determinar o conjunto de caracteres de uma folha de estilo estão em ordem de prioridade:

  1. Cabeçalho HTTP Charset.
  2. Marca de Pedido de Byte.
  3. A primeira @charsetregra
  4. UTF-8.

A última regra é o mais fraco, ele irá falhar em alguns navegadores.
O charsetatributo in <link rel='stylesheet' charset='utf-8'>é obsoleto no HTML 5 .
Cuidado com os conflitos entre as diferentes declarações. Eles não são fáceis de depurar.

Leitura recomendada

fuxia
fonte
Você quer dizer que os arquivos css precisam ser veiculados com content-type:text/css;charset=utf-8cabeçalho?
Pacerier 13/07/12
1
@Pacerier Sim, se essa é a codificação do arquivo HTML (deveria ser).
Fuxia
Quero dizer, já não está implícito que, sem um charset, o charset do arquivo css deve ser interpretado como o mesmo do arquivo HTML incorporado?
Pacerier 13/07/12
1
@ Pacerier Observei que isso nem sempre é o caso.
precisa saber é o seguinte
3

Um motivo para sempre incluir uma especificação de conjunto de caracteres em todas as páginas que contêm texto é evitar vulnerabilidades de script entre sites. Na maioria dos casos, o conjunto de caracteres UTF-8 é a melhor opção para texto, incluindo páginas HTML.

Tony
fonte
2

Se você estiver colocando uma tag <meta> nos arquivos css, estará fazendo algo errado. A tag <meta> pertence aos seus arquivos html e informa ao navegador como o html é codificado. Ele não diz nada sobre o css, que é um arquivo separado. Você poderia ter codificações completamente diferentes para o seu html e css, embora eu não possa imaginar que isso seria uma boa idéia.

WJS
fonte