@charset
Quick Summary for @charset
The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules. If several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an HTML element or inside the <style> element where the character set of the HTML page is relevant.
Code Usage for @charset
@charset "utf-8"; 
More Details for @charset

@charset

The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules. If several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an HTML element or inside the <style> element where the character set of the HTML page is relevant.

@charset "utf-8"; 

This at-rule is useful when using non-ASCII characters in some CSS properties, like content.

As there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) :

The value of the Unicode byte-order character placed at the beginning of the file. The value given by the charset attribute of the Content-Type: HTTP header or the equivalent in the protocol used to serve the style sheet. The @charset CSS at-rule. Use the character encoding defined by the referring document: the charset attribute of the <link> element. This method is obsoleted in HTML5 and must not be used. Assume that the document is UTF-8

Syntax

@charset "UTF-8"; @charset "iso-8859-15"; 

where:

charset

Is a <string> denoting the character encoding to be used. It must be the name of a web-safe character encoding defined in the IANA-registry, and must be double-quoted, following exactly one space character (U+0020), and immediately terminated with a semicolon. If several names are associated with an encoding, only the one marked with preferred must be used.

Formal syntax

@charset "<charset>";

Examples

Valid and invalid charset declarations

@charset "UTF-8";       /* Set the encoding of the style sheet to Unicode UTF-8 */ @charset 'iso-8859-15'; /* Invalid, wrong quoting style used */ @charset  "UTF-8";      /* Invalid, more than one space */  @charset "UTF-8";      /* Invalid, there is a character (a space) before the at-rule */ @charset UTF-8;         /* Invalid, without ' or ", the charset is not a CSS <string> */ 

Specifications

Specification
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification # charset①

See also

Character set glossary entry Unicode glossary entry

Last modified: Feb 2, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


James Clear
Random CSS Property

border-image

The border-image CSS property draws an image around a given element. It replaces the element's regular border.
border-image css reference