Charset statement in file . css

Question

Sometimes I come across some examples of archive .css with the declaration of charset right in the first line:

@charset "utf-8";

Even my code editor (Dreamweaver CC 2015), when I create a new CSS file, already puts this line by default at the beginning of the document:

But a CSS file usually only contains styles and properties (except in cases of pseudo-elements ::before and ::after where text can be placed in the property content).

I had a question: is this really necessary? If yes or nay, why?

Answer 1

Words of the W3C

You should Always use UTF-8 as the Character encoding of your style Sheets and your HTML pages, and declare that encoding in your HTML. If you do that, there is no need to declare the encoding of your style sheet.

PORTUGUÊS: "You should always wear UTF-8 like the character encoding of your style sheets and your HTML pages and declare this encoding in your HTML. If you do, there is no need to declare encoding your stylesheet."

Source: https://www.w3.org/International/questions/qa-css-charset

So briefly we can say that if you have already declared the Charset in the HTML that will index this stylesheet vc does not necessarily have to declare the Charset within the .CSS

To declare Charset in HTML you can use:

<meta charset="utf-8" />

Or

<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">

Also take these points into account:

• That element <meta> is only a part of the algorithm to determine the character set of a page that browsers apply. The header HTTP Content-Type and any elements of BOM take precedence over that element.
• It is good practice, and highly recommended, to define the character set using this attribute.
• various cross scripting techniques may harm the page user, such as the cross-scripting of fallback UTF-7. Always setting this goal will protect against these risks.

Then define the Charset HTML is a security issue and is considered a good practice and highly recommended.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

---

See that Mozilla says that:

The rule @charset specifies the character encoding used in the stylesheet.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/@charset

Note! It is not enough to simply put @charset "utf-8"; at the top of the style sheet - you also need to save your style sheet in character encoding UTF-8.

Important: Like the header HTTP has a higher precedence than the statement in-document @charset , you should always consider whether character encoding is already stated in the HTTP header. If you are, @charset should be set to declare the same encoding and will only take effect when the stylesheet is read in a context where there are no HTTP headers (for example, from a local unit).

Answer 2

When I started I had several problems with accentuation, and searching, I discovered the need to inform which type of encoding the browser will use, in this case utf-8.

Answer 3

in CSS I use charset like this:

html:lang(pt-br) { 
    @charset "UTF-8"; 
}