Действительно ли необходимо указывать значение 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>. Синтаксис <url>:
<url> = url( <string> <url-modifier>* )

Версия без кавычек поддерживается только по старым причинам и требует специальных правил синтаксического анализа (для escape-последовательностей и т. Д.), Поэтому она громоздка и не поддерживает модификаторы 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 длиннее, чем просто использование кавычек (которые требуют меньше экранирования). Следовательно, вы можете использовать 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 Coding Style

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

Исключение: если вам нужно использовать правило @charset, используйте двойные кавычки - одинарные кавычки недопустимы.