Чи справді потрібне цитування значення 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 рівень (18 грудня 2015 р.)

URL - це вказівник на ресурс і є функціональним позначенням, позначеним символом <url>. Синтаксис a <url>:
<url> = url( <string> <url-modifier>* )

Версія, що не котирується, підтримується лише з застарілих причин і потребує спеціальних правил розбору (для послідовностей евакуації тощо), таким чином, є громіздкою і не підтримує модифікатори URL-адрес.

Це означає, що url(...)синтаксис повинен бути функціональним позначенням, яке приймає рядок і модифікатор URL-адреси як параметри. Використовувати позначення цитат (що створює маркер рядка) було б більш сумісним зі стандартами та вносило б меншу складність.

@ Коментар SimonMourier у верхній відповіді неправильний, тому що він шукав неправильну специфікацію. url-tokenТип вводяться тільки для правил спадщини спеціального розбору, так ось чому він не має нічого спільного з лапками.

Ось що говорить специфікація W3 CSS 2.1:

Формат значення URI - це "url (" з подальшим необов'язковим пробілом з подальшим необов'язковим одинарною цитатою (") або подвійною цитатою ("), за якою слідує сам URI, а потім необов'язковий єдиний цитат (') або подвійний цитат (") символ з подальшим необов'язковим пробілом з символом") ". Два символи цитати повинні бути однаковими.

Джерело: http://www.w3.org/TR/CSS21/syndata.html#uri

Отже, усі запропоновані вами 3 приклади є правильними, але той, який я обрав би, є перший, тому що ви використовуєте менше символів, а отже, отриманий CSS-файл буде меншим, що призводить до менше використання пропускної здатності.

Це може здатися, що це не важливо, але веб-сайти з високим трафіком вважають за краще економити пропускну спроможність і понад багато файлів css, а посилання на URL-адреси в них має сенс вибрати варіант, який зменшує файл ... Навіть тому, що немає переваги не роблячи цього .

Примітка. Можливо, вам доведеться уникати символів, якщо URL-адреси містять круглі дужки, коми, пробіли з пробілами, одинарні або подвійні лапки. Це може зробити URL-адресу довшим, ніж просто використання лапок (для яких потрібно менше скорочення). Отже, ви можете хотіти подавати файл Css з URL-адресами без лапок лише тоді, коли накладні витрати не роблять URL довше, ніж просто використання лапок (що дуже рідко).

Однак я б не очікував, що будь-яка людина навіть розгляне ці крайові випадки ... Оптимізатор Css впорається з цим за вас ... (але впевнений, що вам потрібно знати про все це, якщо ви насправді пишете оптимізатор css: P)

Згідно W3C, три способи є законними. Якщо у назві (як пробіл) є спеціальні символи, слід використовувати другий чи третій.

Приклад 2 або 3 найкращі:

Від W3C: Формат значення URI - це "url (" з подальшим необов'язковим пробілом з подальшим необов'язковим одинарною цитатою (") або подвійною цитатою ("), за якою слідує сам URI, а потім необов'язковий єдиний цитат (') або символ подвійної лапки (") з подальшим необов'язковим пробілом з написом") ". Два символи цитати повинні бути однаковими.

Зверніть увагу на те саме пояснення, що приклад 1 є прийнятним, якщо відповідні символи не використовуються.

Я мав:

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

Мені знадобилося деякий час, щоб зрозуміти, що закрита дужка з ім'ям файлу порушує правило.

Тож це не є обов'язковим, але, навіть якщо цитування не дуже добре зрозуміло у старих браузерах, це може врятувати вам головний біль на досить складних динамічно створених сторінках.

Відповідно до стилю кодування Google CSS

Не використовуйте лапки у значеннях URI (url ()).

Виняток: Якщо вам потрібно використовувати правило @charset, використовуйте подвійні лапки - одинарні лапки заборонені.