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

173

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">
css character-encoding rsturim
źródło

Odpowiedzi:

123

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.

Oded
źródło
7
Jest to również ważne, jeśli połączysz te pliki z witryn innych niż UTF-8, na przykład: japońska witryna zakodowana jako UTF-16 próbująca załadować CSS z CDN otrzyma nieczytelną zawartość, jeśli plik CSS nie zadeklaruje swojego kodowanie.
Paracetamol
147

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

fuxia
źródło
Czy masz na myśli, że pliki css muszą być obsługiwane z content-type:text/css;charset=utf-8nagłówkiem?
Pacerier,
1
@Pacerier Tak, jeśli takie jest kodowanie pliku HTML (powinno być).
fuxia
Chodzi mi o to, czy nie jest to już sugerowane, że bez zestawu znaków, zestaw znaków w pliku css powinien być interpretowany jako taki sam, jak w osadzanym pliku HTML?
Pacerier,
1
@Pacerier Zauważyłem, że nie zawsze tak jest.
MatTheCat,
3

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.

Tony
źródło
2

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ł.

WJS
źródło