@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...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

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
In this case my anchor this week becomes driving almost 2hrs outside of Atlanta to one of my favorite hard core gyms in the world.. MetroFlex aka The Dungeon. The gym owners turn the heat way up so it becomes a fun sweat box and the gym members just watch from afar and leave me alone. I happily drive myself long distances to find MY ANCHOR. Our anchor allows us to have balance, focus and be as productive as possible. And if you're in the middle of a heavy set and your headphones start to fall off your head, like mine did here.. well.. f*ck the headphones. Let em break and fall. You can always get a new pair, but the iron ain't ever gonna lift itself.
Unknown
Random CSS Property

border-block-start-width

The border-block-start-width CSS property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.
border-block-start-width css reference