url()의 값을 인용할 필요가 있습니까?

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를 매개 변수로 사용하는 함수 표기법이어야 합니다.문자열 토큰을 생성하는 따옴표 표기법을 사용하면 더 표준적이고 복잡성이 줄어듭니다.

@Simon Mourier ▁@▁thesim의 @Simon Mourier. 왜냐하면 그는 잘못된 스펙을 찾았기 때문입니다.url-tokentype은 레거시 특수 구문 분석 규칙에만 도입되므로 따옴표와 관련이 없습니다.

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

URI 값의 형식은 'url(' 뒤에 공백을 선택적으로 입력한 후 단일 따옴표(') 또는 이중 따옴표(") 문자를 입력한 후 URI 자체를 입력한 후 단일 따옴표(') 또는 이중 따옴표(") 문자를 입력한 후 공백()을 입력한 후 ')'입니다.두 따옴표 문자는 같아야 합니다.

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

그래서 당신이 제안한 3가지 예는 모두 맞지만, 당신이 문자를 덜 사용하기 때문에 제가 선택할 것은 첫 번째 예입니다. 따라서 결과적으로 CSS 파일은 더 작아져서 대역폭 사용이 줄어들 것입니다.

이것은 중요하지 않다고 느낄 수 있지만 트래픽이 많은 웹 사이트는 대역폭과 많은 CSS 파일보다 저장하는 것을 선호하고 URL 참조는 파일을 더 작게 만드는 옵션을 선택하는 것이 타당합니다.그렇게 하지 않아도 아무런 이득이 없기 때문입니다.

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

하지만 나는 어떤 사람도 이 가장자리 사건들을 고려하지 않을 것이라고 예상합니다.CSS 옵티마이저가 처리해 줄 겁니다(하지만 실제로 CSS 옵티마이저를 쓰고 있다면 이 모든 것에 대해 알아야 합니다 :P)

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

2021년 업데이트(대부분 2015년 이전 답변)

따옴표는 선택 사항이지만 일부 문자(사용되는 경우)는 이스케이프해야 합니다.

MDN에서:

포함할 웹 리소스에 대한 상대 또는 절대 주소 또는 포인터인 URL 또는 데이터 URI(선택 사항: 단일 따옴표 또는 이중 따옴표).따옴표는 URL에 괄호, 공백 또는 따옴표가 포함된 경우 또는 0x7e 이상의 제어 문자가 주소에 포함된 경우에 필요합니다.큰따옴표는 큰따옴표 안에서 발생할 수 없으며 작은따옴표는 이스케이프되지 않은 한 작은따옴표 안에서 발생할 수 없습니다.다음은 모두 유효하고 동등합니다.

<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)

따옴표따옴표(""URL", "" "", "" "() ") " 합니다.') 및 큰따옴표("URL의 일부입니다.

출처: https://developer.mozilla.org/en-US/docs/Web/CSS/url()

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

W3C에서:URI 값의 형식은 'url(' 뒤에 공백을 선택적으로 입력한 후 단일 따옴표(') 또는 이중 따옴표(") 문자를 입력한 후 URI 자체를 입력한 후 단일 따옴표(') 또는 이중 따옴표(") 문자를 입력한 후 공백()을 입력한 후 ')'입니다.두 따옴표 문자는 같아야 합니다.

동일한 설명에서 적절한 문자가 이스케이프된 경우 예제 1을 사용할 수 있습니다.

Google CSS 코딩 스타일에 따름

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

예외:@charset 규칙을 사용해야 하는 경우 큰따옴표를 사용합니다. 작은따옴표는 허용되지 않습니다.

제가 가지고 있던 것:

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

파일 이름의 닫는 괄호가 규칙을 위반한다는 것을 이해하는 데 시간이 걸렸습니다.

따라서 필수 사항은 아니지만 오래된 브라우저에서 견적을 잘 이해하지 못하더라도 동적으로 생성되는 상당히 복잡한 페이지에서 약간의 문제를 줄일 수 있습니다.

언급URL : https://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary