CSS @charset Rule

Posted in CSS Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 26 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @charset rule in CSS is used to specify the character encoding for the style sheet. This rule is essential when dealing with non-ASCII characters in your CSS, as it ensures that the browser correctly interprets the character set.

The @charset rule must be the very first element in the CSS file, placed before any other content, including comments.

💡 Syntax

The syntax for the @charset rule is straightforward. It follows this format:

Syntax

Copied

@charset "encoding";

Here, "encoding" is the character encoding you want to declare, typically "UTF-8".

🎛️ Default Value

The @charset rule does not have a default value because it is not always required. If the @charset rule is not specified, the browser may attempt to determine the character encoding based on the HTTP headers or other heuristics.

🏠 Property Values

Value	Description
UTF-8	This is the most common encoding for web content and is recommended for most cases.
Other encodings	While UTF-8 is the standard, other encodings like "ISO-8859-1" can also be specified if required for specific legacy content.

📄 Example

In this example, we'll declare the character encoding as UTF-8 at the beginning of a CSS file.

index.html

Copied

@charset "UTF-8";

/* The rest of the CSS code follows */
body {
  font-family: Arial, sans-serif;
  color: #333;
}

This ensures that any non-ASCII characters in your CSS file are correctly interpreted by the browser.

🖥️ Browser Compatibility

The @charset rule is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It's important to remember that the @charset rule must be placed at the very top of the CSS file to be effective.

🎉 Conclusion

The @charset rule is a crucial tool for ensuring that your CSS files are interpreted correctly by the browser, especially when they contain non-ASCII characters. By correctly specifying the character encoding at the beginning of your CSS file, you can avoid issues related to character misinterpretation and ensure a consistent user experience across different browsers and platforms.