namespace

@charset

Declares the character encoding of the stylesheet so the parser can decode non-ASCII bytes correctly. It must be the very first thing in the file, byte for byte, and only utf-8 is meaningful in practice.

@charset "<encoding>";

Common conditions / descriptors

Descriptor Purpose
"utf-8" The only encoding worth declaring today
double quotes The encoding literal must be double-quoted
byte 0 Must appear at the very first byte of the file, no BOM or whitespace before

Examples

@charset "utf-8";

.brand::before { content: '\2014 '; }

Declare UTF-8 so escaped or literal non-ASCII characters decode reliably

@charset "utf-8";
@import url('base.css');

@charset comes before @import, which comes before everything else

/* Wrong — a comment before @charset makes it a no-op */
/* theme file */
@charset "utf-8";

Any preceding byte disables the declaration

Gotcha

Any whitespace, comment, or BOM before @charset silently invalidates it. If the file is served with a correct HTTP Content-Type charset or a attribute, those win over @charset.

Related at-rules

← All CSS at-rules · CSS properties · CSS selectors