Why specify @charset “UTF-8”; in your CSS file?

by

This is useful in contexts where the encoding is not told per HTTP header or other meta data, e.g. the local file system.

Imagine the following stylesheet:

[rel="external"]::after
{
    content: ' ↗';
}

If a reader saves the file to a hard drive and you omit the @charset rule, most browsers will read it in the OS’ locale encoding, e.g. Windows-1252, and insert ↗ instead of an arrow.

Unfortunately, you cannot rely on this mechanism as the support is rather … rare.
And remember that on the net an HTTP header will always override the @charset rule.

The correct rules to determine the character set of a stylesheet are in order of priority:

  1. HTTP Charset header.
  2. Byte Order Mark.
  3. The first @charset rule.
  4. UTF-8.

The last rule is the weakest, it will fail in some browsers.
The charset attribute in <link rel="stylesheet" charset="utf-8"> is obsolete in HTML 5.
Watch out for conflict between the different declarations. They are not easy to debug.

Recommended reading

More Related Contents:

  1. Excessive Spaces Between Words [closed]
  2. Fill in text in HTML5
  3. How to disable margin-collapsing?
  4. Order columns through Bootstrap4
  5. Semi-transparent color layer over background-image?
  6. Transparent hollow or cut out circle
  7. vertical align middle in
  8. How to combine class and ID in CSS selector?
  9. Does CSS have a :blur selector (pseudo-class)?
  10. Gradient text color
  11. Bootstrap icons are loaded locally but not when online
  12. Bootstrap xs columns wrap
  13. image moves on hover – chrome opacity issue
  14. CSS transition auto height not working [duplicate]
  15. ‘Inverted’ border-radius possible? [duplicate]
  16. First letter Capitalize and other letters in lower case in css?
  17. Is a relative path in a CSS file relative to the CSS file?
  18. Can you add noise to a CSS gradient?
  19. What does a `~` tilde in a CSS `url()` do?
  20. placing background image in a rhombus shaped container is causing the container to lose its shape
  21. prevent a pseudo element from triggering hover?
  22. How to add a margin to a table row [duplicate]
  23. Clip/Crop background-image with CSS
  24. CSS negative z-index: what does it mean?
  25. How to make a Bootstrap 4 full width dropdown in Navbar?
  26. Why doesn’t my child element inherit color from its parent when parent has more specific selector?
  27. Stacking DIVs on top of each other?
  28. minmax fails (invalid property value)
  29. Div with cut out edges, border and transparent background
  30. Select specific element before other element

Leave a Comment