@charset“UTF-8”을 지정해야하는 이유; CSS 파일에?

나는이 지시를 내게 넘겨진 수많은 CSS 파일의 첫 번째 줄로 보았습니다.

@charset "UTF-8";

그것은 무엇을하며,이 규칙이 필요합니까?

또한이 메타 태그를 "head"요소에 포함 시키면 CSS 파일에도이 메타 태그가 없어도됩니까?

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

브라우저에 CSS 파일을 UTF-8로 읽도록 지시합니다. CSS에 ASCII뿐만 아니라 유니 코드 문자도 포함되어 있으면 편리합니다.

메타 태그에 사용하는 것이 좋지만 해당 메타 태그가 포함 된 페이지에만 해당됩니다.

CSS 2 의 w3c 스펙 에서 CSS 파일의 문자 세트 분석 규칙에 대해 읽으십시오 .

이는 HTTP 헤더 또는 다른 메타 데이터 (예 : 로컬 파일 시스템)별로 인코딩이 알려지지 않은 상황에서 유용합니다.

다음 스타일 시트를 상상해보십시오.

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

판독기가 파일을 하드 드라이브에 저장하고 @charset규칙 을 생략하면 대부분의 브라우저는 파일을 OS의 로캘 인코딩 (예 : Windows-1252)으로 읽고 화살표 대신 —를 삽입합니다.

불행히도, 지원은 다소 드물기 때문에이 메커니즘에 의존 할 수 없습니다. 그리고 인터넷에서 HTTP 헤더는 항상 @charset규칙을 무시합니다 .

스타일 시트의 문자 세트를 판별하는 올바른 규칙 은 우선 순위입니다.

1. HTTP 문자셋 헤더.
2. 바이트 주문 마크.
3. 첫 번째 @charset규칙.
4. UTF-8.

마지막 규칙은, 가장 약한입니다 것입니다 일부 브라우저에서 실패합니다. 의 속성 에서 사용되지 않습니다 HTML 5 . 서로 다른 선언 사이의 충돌에주의하십시오. 디버깅하기 쉽지 않습니다.
charset<link rel='stylesheet' charset='utf-8'>

추천 독서

• Russ Rolfe : CSS에서 문자 인코딩 선언
• IANA : 문자 세트의 공식 이름 – 다른 이름은 허용되지 않습니다. 동일한 인코딩에 둘 이상의 이름이 등록 된 경우 선호하는 이름 을 사용하십시오 @charset.
• MDN : @charset. 지원 테이블이 있습니다. 나는 이것을 믿지 않는다. :)
• CSS WG의 테스트 사례 .

텍스트를 포함하는 모든 페이지에 항상 문자 집합 사양을 포함시키는 한 가지 이유는 사이트 간 스크립팅 취약점을 피하기 위해서입니다. 대부분의 경우 HTML 페이지를 포함하여 UTF-8 문자 세트가 텍스트에 가장 적합합니다.

CSS 파일에 <meta> 태그를 넣으면 문제가 있습니다. <meta> 태그는 html 파일에 속하며 브라우저에 html 인코딩 방법을 알려주며 별도의 파일 인 CSS에 대해서는 아무 것도 말하지 않습니다. html과 CSS에 대해 완전히 다른 인코딩을 가질 수는 있지만 이것이 좋은 생각이라고는 생각할 수 없습니다.