-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
75 lines (52 loc) · 3.29 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
---
title: "@charset"
slug: Web/CSS/@charset
page-type: css-at-rule
browser-compat: css.at-rules.charset
---
{{CSSRef}}
The **`@charset`** [CSS](/en-US/docs/Web/CSS) rule specifies the character encoding used in the style sheet. Although the first character in `@charset` is the `@` symbol, it is not an [at-rule](/en-US/docs/Web/CSS/At-rule). The [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module deprecates this rule, defining it as an unrecognized legacy rule to be dropped when a stylesheet is grammar-checked, but it is [fully supported in all browsers](#browser_compatibility).
The following assertions apply to valid `@charset` usage:
- The `@charset` rule must be the first element in the style sheet and not be preceded by any character.
- `@charset` is not a [nested statement](/en-US/docs/Web/CSS/Syntax#nested_statements) and therefore cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/At-rule#conditional_group_rules).
- If several `@charset` at-rules are defined, only the first one is used.
- `@charset` cannot be used inside a `style` attribute on an HTML element or inside the {{ HTMLElement("style") }} element where the character set of the HTML page is relevant.
```css
@charset "utf-8";
```
This at-rule is useful when using non-{{Glossary("ASCII")}} characters in some CSS properties, like {{ cssxref("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):
1. The value of the [Unicode byte-order](https://en.wikipedia.org/wiki/Byte_order_mark) character placed at the beginning of the file.
2. 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.
3. The `@charset` CSS at-rule.
4. Use the character encoding defined by the referring document: the `charset` attribute of the {{ HTMLElement("link") }} element. This method is obsolete and should not be used.
5. Assume that the document is UTF-8.
## Syntax
```css
@charset "UTF-8";
@charset "iso-8859-15";
```
### Formal syntax
```plain
@charset "<charset>";
```
- _charset_
- : A {{cssxref("<string>")}} denoting the character encoding to be used. It must be the name of a web-safe character encoding defined in the [IANA-registry](https://www.iana.org/assignments/character-sets/character-sets.xhtml), 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.
## Examples
### Valid and invalid charset declarations
```css-nolint example-good
@charset "UTF-8"; /* Set the encoding of the style sheet to Unicode UTF-8 */
```
```css-nolint example-bad
@charset 'iso-8859-15'; /* Invalid, wrong quotes 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, the charset is a CSS <string> and requires double-quotes */
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [Character set](/en-US/docs/Glossary/Character_set) glossary entry
- [Unicode](/en-US/docs/Glossary/Unicode) glossary entry