Po co określać @charset „UTF-8”; w twoim pliku CSS?

Widziałem tę instrukcję jako pierwszą linię wielu plików CSS, które zostały mi przekazane:

@charset "UTF-8";

Co to robi i czy ta reguła jest konieczna?

Ponadto, jeśli umieszczę ten metatag w moim elemencie „head”, czy wyeliminuje to potrzebę umieszczania go również w moich plikach CSS?

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

Nakazuje przeglądarce odczytanie pliku css jako UTF-8. Jest to przydatne, jeśli Twój CSS zawiera znaki Unicode, a nie tylko ASCII.

Używanie go w metatagu jest w porządku, ale tylko w przypadku stron, które zawierają ten metatag.

Przeczytaj o zasadach dotyczących rozdzielczości zestawu znaków w plikach CSS w specyfikacji w3c dla CSS 2.

Jest to przydatne w kontekstach, w których kodowanie nie jest podawane w nagłówku HTTP lub innych metadanych, np. W lokalnym systemie plików.

Wyobraź sobie następujący arkusz stylów:

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

Jeśli czytnik zapisze plik na dysku twardym i pominiesz @charsetregułę, większość przeglądarek odczyta go z kodowaniem regionalnym systemu operacyjnego, np. Windows-1252, i wstawi † - zamiast strzałki.

Niestety nie można polegać na tym mechanizmie, bo wsparcie jest raczej… rzadkie. I pamiętaj, że w sieci nagłówek HTTP zawsze ma pierwszeństwo przed @charsetregułą.

Prawidłowe reguły określania zestawu znaków arkusza stylów są uporządkowane według ważności:

1. Nagłówek HTTP Charset.
2. Znacznik kolejności bajtów.
3. Pierwsza @charsetzasada.
4. UTF-8.

Ostatnia reguła jest najsłabszy, to będzie nie w niektórych przeglądarkach. Atrybut jest przestarzały w HTML 5
charset<link rel='stylesheet' charset='utf-8'> .
Uważaj na konflikt między różnymi deklaracjami. Nie są łatwe do debugowania.

Rekomendowane lektury

• Russ Rolfe: Deklarowanie kodowania znaków w CSS
• IANA: Oficjalne nazwy zestawów znaków - inne nazwy są niedozwolone; użyj preferowanej nazwy dla @charsetjeśli więcej niż jedna nazwa jest zarejestrowany do tego samego kodowania.
• MDN: @charset . Jest stół podporowy. Nie ufam temu. :)
• Przypadek testowy z CSS WG.

Jednym z powodów, dla których należy zawsze umieszczać specyfikację zestawu znaków na każdej stronie zawierającej tekst, jest unikanie luk w zabezpieczeniach skryptów krzyżowych. W większości przypadków zestaw znaków UTF-8 jest najlepszym wyborem w przypadku tekstu, w tym stron HTML.

Jeśli umieszczasz tag <meta> w swoich plikach css, robisz coś nie tak. Znacznik <meta> należy do twoich plików html i informuje przeglądarkę, jak kodowany jest kod HTML, nie mówi nic o css, który jest oddzielnym plikiem. Można sobie wyobrazić zupełnie inne kodowanie html i css, chociaż nie wyobrażam sobie, żeby to był dobry pomysł.