Действительно ли необходимо указывать значение url ()?

Question

Что из следующего я должен использовать в своих таблицах стилей?

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

Что W3C указывает как правильный путь ?

Answer 1

W3C говорит, что кавычки необязательны, все три ваших способа являются законными.

Открывающая и закрывающая кавычки просто должны совпадать.

Если в вашем URL есть специальные символы, вы должны использовать кавычки или экранировать символы (см. Ниже).

Синтаксис и основные типы данных

Формат значения URI: 'url (', за которым следует необязательный пробел, за которым следует необязательный символ одинарной кавычки (') или двойной кавычки ("), за которым следует сам URI, за которым следует необязательная одинарная кавычка (') или символ двойной кавычки ("), за которым следует необязательный пробел, за которым следует ')'. Два символа кавычки должны быть одинаковыми.

Выход из специальных символов:

Некоторые символы, появляющиеся в URI без кавычек, такие как круглые скобки, символы пробела, одинарные кавычки (') и двойные кавычки ("), должны быть экранированы обратной косой чертой, чтобы полученное значение URI было токеном URI:' \ (',' \) '.

Answer 2

Лучше использовать кавычки, потому что это рекомендовано по новейшему стандарту, а количество крайних случаев меньше.

Согласно новейшему проекту редактора Значения CSS и модули уровня 3 (18 декабря 2015 г.)

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

Версия без кавычек поддерживается только по устаревшим причинам и требует специальных правил синтаксического анализа (для escape-последовательностей и т. Д.), Поэтому она громоздка и не поддерживает модификаторы url.

Это означает, что синтаксис url(...) должен быть функциональной нотацией, которая принимает строку и модификатор url в качестве параметров. Использование нотации в кавычках (которая создает строковый токен) будет более совместимым со стандартом и создаст меньшую сложность.

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

Answer 3

Вот что говорит спецификация 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)

Answer 4

В соответствии с W3C разрешены три способа. Если у вас есть специальные символы в имени (как пробел), вы должны использовать второй или третий.

Answer 5

Пример 2 или 3 являются лучшими:

Из W3C: Формат значения URI: 'url (', за которым следует необязательный пробел, за которым следует необязательный символ одинарных кавычек (') или двойных кавычек ("), за которым следует сам URI, за которым следует необязательный одинарный кавычек (') или двойные кавычки ("), за которым следует необязательный пробел, после которого следует ')'. Два символа кавычки должны быть одинаковыми.

Примечание из того же пояснения: пример 1 допустим, если экранированы соответствующие символы.

Answer 6

у меня было:

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

Мне потребовалось некоторое время, чтобы понять, что закрытое в скобках имя файла нарушает правило.

Так что это не обязательно, но даже если цитирование не очень хорошо понимается старыми браузерами, это может избавить вас от головной боли на довольно сложных динамически генерируемых страницах.

Answer 7

Согласно Google CSS Coding Style

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

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