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

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:

Cabeçalho HTTP Charset.
Marca de Pedido de Byte.
A primeira @charsetregra
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

Russ Rolfe: Declarando codificações de caracteres em CSS
IANA: Nomes oficiais para conjuntos de caracteres - outros nomes não são permitidos; use o nome preferido para @charsetse mais de um nome estiver registrado para a mesma codificação.
MDN: @charset. Existe uma tabela de suporte. Eu não confio nisso. :)
Caso de teste do CSS WG.

— 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