url ()의 값을 인용하는 것이 정말로 필요한가?

스타일 시트에 다음 중 어떤 것을 사용해야합니까?

/* Example #1: */ background-image: url(image.png);
/* Example #2: */ background-image: url("image.png");
/* Example #3: */ background-image: url('image.png');

W3C는 올바른 방법으로 무엇을 지정 합니까?

W3C에 따르면 따옴표는 선택 사항이며 세 가지 방법 모두 합법적입니다.

열기 및 닫기 따옴표는 동일한 문자 여야합니다.

URL에 특수 문자가있는 경우 따옴표를 사용하거나 문자를 이스케이프해야합니다 (아래 참조).

구문 및 기본 데이터 유형

URI 값의 형식은 'url (', 선택적 공백, 선택적 작은 따옴표 ( ') 또는 큰 따옴표 ( ") 문자, URI 자체, 선택적 작은 따옴표 (') 또는 큰 따옴표입니다. ( ") 문자 다음에 선택적 공백과 ')'이옵니다. 두 인용 부호는 같아야합니다.

특수 문자 이스케이프 :

괄호, 공백 문자, 작은 따옴표 ( ') 및 큰 따옴표 ( ")와 같이 따옴표없는 URI에 나타나는 일부 문자는 결과 URI 값이 URI 토큰이되도록 백 슬래시로 이스케이프해야합니다.'\ ( ', '\)'.

최신 표준에서 권장하고 엣지 케이스가 적기 때문에 따옴표를 사용하는 것이 좋습니다.

최신 에디터의 초안 CSS 값 및 모듈 레벨 3 (2015 년 12 월 18 일) 에 따르면

URL은 리소스에 대한 포인터이며로 표시되는 기능 표기법 <url>입니다. 의 구문은 다음 <url>과 같습니다.
<url> = url( <string> <url-modifier>* )

인용되지 않은 버전은 레거시 이유로 만 지원되며 특별한 구문 분석 규칙 (이스케이프 시퀀스 등)이 필요하므로 번거롭고 URL 수정자를 지원하지 않습니다.

즉, url(...)구문은 문자열과 url-modifier를 매개 변수로 사용하는 기능 표기법이어야합니다. 따옴표 표기법 (문자열 토큰을 생성)을 사용하면보다 표준을 준수하고 복잡성이 줄어 듭니다.

상단 답변의 @SimonMourier의 의견은 잘못된 사양을 찾았 기 때문에 잘못되었습니다. 이 url-token유형은 레거시 특수 구문 분석 규칙에만 도입되었으므로 따옴표와 관련이 없습니다.

W3 CSS 2.1 사양은 다음과 같습니다.

URI 값의 형식은 'url (', 선택적 공백, 선택적 작은 따옴표 ( ') 또는 큰 따옴표 ( ") 문자, URI 자체, 선택적 작은 따옴표 (') 또는 큰 따옴표입니다. ( ") 문자 다음에 선택적 공백과 ')'이옵니다. 두 인용 부호는 같아야합니다.

출처 : http://www.w3.org/TR/CSS21/syndata.html#uri

제안한 세 가지 예는 모두 정확하지만 문자를 적게 사용하고 결과 CSS 파일이 더 작아서 대역폭 사용량이 줄어들 기 때문에 내가 선택한 예가 첫 번째 예입니다.

그것은 중요하지 않습니다처럼이 느낄 수 있지만, 높은 트래픽 웹 사이트가 없다하더라도 때문에 ... 그것은 파일이 작게 옵션을 선택하는 것은 의미가 그 대역폭 및 CSS 파일을 많이 이상 및 URL 참조를 저장하는 것을 선호 어떤 장점 그렇게하지 않는 것 .

참고 : URL에 괄호, 쉼표, 공백 문자, 작은 따옴표 또는 큰 따옴표가 포함 된 경우 문자를 이스케이프해야 할 수도 있습니다. 이것은 따옴표를 사용하는 것보다 더 긴 URL을 만들 수 있습니다 (이스케이프가 덜 필요합니다). 따라서 이스케이프의 오버 헤드가 따옴표를 사용하는 것보다 URL을 더 길게 만들지 않는 경우에만 따옴표가없는 URL로 Css 파일을 제공하려고 할 수 있습니다 (매우 드)니다).

그러나 나는 인간 이이 엣지 케이스를 고려할 것이라고 기대하지 않을 것입니다 ... Css 옵티마이 저가 이것을 처리 할 것입니다 ... (실제로 CSS 옵티 마이저를 작성하는 경우이 모든 것에 대해 알아야합니다 : P)

W3C에 따르면 세 가지 방법이 합법적입니다. 이름에 공백이있는 특수 문자가있는 경우 두 번째 또는 세 번째 문자를 사용해야합니다.

예 2 또는 3이 가장 좋습니다.

W3C에서 : URI 값의 형식은 'url ('뒤에 선택적 공백, 선택적 작은 따옴표 ( ') 또는 큰 따옴표 ( ") 문자, URI 자체, 선택적 작은 따옴표 (')입니다. 또는 큰 따옴표 ( ") 문자 다음에 선택적 공백과 ')'이옵니다. 두 인용 부호는 같아야합니다.

동일한 설명에서 적절한 문자가 이스케이프 된 경우 예 1이 허용됩니다.

나는했다 :

a.pic{
    background-image: url(images/img (1).jpg);
}

파일 이름 닫힌 괄호가 규칙을 어 기고 있음을 이해하는 데 시간이 걸렸습니다.

따라서 필수는 아니지만 이전 브라우저에서 인용을 잘 이해하지 못하더라도 상당히 복잡한 동적 생성 페이지에서 두통을 덜 수 있습니다.

구글 CSS 코딩 스타일 에 따르면

URI 값 (url ())에 따옴표를 사용하지 마십시오.

예외 : @charset 규칙을 사용해야하는 경우 큰 따옴표를 사용하십시오. 작은 따옴표는 사용할 수 없습니다.