Что из перечисленного мне следует использовать в таблицах стилей?
/* 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:' \ (', '\)'.
url-token схему железной дороги), в то время как текущая рекомендация кандидата (февраль 2014 г.): w3.org/TR/css-syntax-3 Я полагаю, они хотят продвигать использование escape-последовательности вместо кавычек
- person Simon Mourier; 16.07.2015
Лучше использовать кавычки, потому что это рекомендовано новейшим стандартом и меньше крайних случаев.
Согласно последнему проекту редактора CSS Values and Modules Level 3 (18 декабря 2015 г.)
URL-адрес - это указатель на ресурс и функциональная запись, обозначенная
<url>. Синтаксис<url>:<url> = url( <string> <url-modifier>* )
Версия без кавычек поддерживается только по устаревшим причинам и требует специальных правил синтаксического анализа (для управляющих последовательностей и т. д.), поэтому является громоздкой и не поддерживает модификаторы URL.
Это означает, что синтаксис url(...) должен быть функциональной записью, которая принимает в качестве параметров строку и модификатор url. Использование обозначения кавычек (которое создает строковый токен) было бы более совместимо со стандартами и внесло бы меньшую сложность.
Комментарий @ SimonMourier в верхнем ответе неверен, потому что он искал неправильную спецификацию. Тип url-token введен только для устаревших специальных правил синтаксического анализа, поэтому он не имеет ничего общего с кавычками.
Вот что говорится в спецификации W3 CSS 2.1:
Формат значения URI: 'url (', за которым следует необязательный пробел, за которым следует необязательный символ одинарной кавычки (') или двойной кавычки ("), за которым следует сам URI, за которым следует необязательная одинарная кавычка (') или двойная кавычка (") символ, за которым следует необязательный пробел, за которым следует ')'. Два символа кавычек должны быть одинаковыми.
Итак, все 3 предложенных вами примера верны, но я бы выбрал первый, потому что вы используете меньше символов и, следовательно, результирующий файл CSS будет меньше, что приведет к меньшему использованию полосы пропускания.
Может показаться, что это не важно, но веб-сайты с высоким трафиком предпочитают экономить пропускную способность и использовать большое количество файлов css, а ссылки на URL-адреса в них имеют смысл выбрать вариант, который уменьшает размер файла ... Даже потому, что существует Нет никакого преимущества в том, чтобы этого не делать.
Примечание. Возможно, вам придется экранировать символы, если URL-адреса содержат круглые скобки, запятые, символы пробела, одинарные или двойные кавычки. Это может сделать URL-адрес длиннее, чем просто использование кавычек (которые требуют меньше экранирования). Следовательно, вы можете захотеть обслуживать файл Css с URL-адресами без кавычек только тогда, когда накладные расходы на экранирование не делают URL-адрес длиннее, чем просто использование кавычек (что очень редко).
Однако я бы не ожидал, что какой-либо человек даже рассмотрит эти крайние случаи ... Оптимизатор Css справится с этим за вас ... (но конечно, вам нужно знать обо всем этом, если вы на самом деле пишете оптимизатор css: P)
Согласно W3C, разрешены три способа. Если у вас есть специальные символы в имени (как пробел), вы должны использовать второй или третий.
Пример 2 или 3 лучше всего:
Из W3C: Формат значения URI - 'url (' с последующим необязательный пробел, за которым следует необязательный символ одинарной кавычки (') или двойной кавычки ("), за которым следует сам URI, за которым следует необязательный символ одинарной кавычки (') или двойной кавычки ("), за которым следует необязательный пробел, за которым следует ') '. Два символа кавычек должны быть одинаковыми.
Обратите внимание на то же объяснение, Пример 1 приемлем, если соответствующие символы экранированы.
Обновление на 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()
Согласно стилю кодирования CSS Google
Не используйте кавычки в значениях URI (url ()).
Исключение: если вам действительно нужно использовать правило @charset, используйте двойные кавычки - одинарные кавычки не допускаются.
Я имел:
a.pic{
background-image: url(images/img (1).jpg);
}
Мне потребовалось время, чтобы понять, что закрытая скобка имени файла нарушает правило.
Таким образом, это не является обязательным, но, даже если цитирование не так хорошо понимается старыми браузерами, оно может сэкономить вам некоторую головную боль при работе с довольно сложными динамически генерируемыми страницами.
