Какое из следующего следует использовать в моих таблицах стилей?
/* 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, по необязательной одинарной кавычке (') или символ двойной кавычки (" ), за которым следует дополнительное белое пространство, за которым следует ')'. Два символа кавычек должны быть то же самое.
Итак, все три примера, которые вы предложили, являются правильными, но тот, который я выбрал, будет первым, потому что вы используете меньше символов и, следовательно, полученный файл CSS будет меньше, что приведет к меньшему использованию полосы пропускания.
Это может показаться неважным, но сайты с высоким трафиком предпочитают экономить пропускную способность и множество файлов css, а ссылки ссылок в них имеют смысл выбрать вариант, который делает файл меньше... Даже потому, что нет преимуществ при этом.
Примечание. Возможно, вам придется избегать символов, если URL-адреса содержат круглые скобки, запятые, символы пробела, одинарные кавычки или двойные кавычки. Это может привести к тому, что URL-адрес будет длиннее, чем просто использование котировок (которые требуют меньше экранирования). Следовательно, вы можете использовать файл Css с URL-адресами без кавычек, только если накладные расходы на экранирование не делают URL-адрес более длинным, чем просто использование котировок (что очень редко).
Однако я бы не ожидал, что кто-либо из людей даже рассмотрит эти случаи краев... Оптимизатор Css справится с этим для вас... (но обязательно вам нужно знать обо всем этом, если вы на самом деле пишете оптимизатор CSS: р)
В соответствии с W3C возможны три способа. Если у вас есть специальные символы в имени (как пробел), вы должны использовать второй или третий.
Пример 2 или 3 лучше всего:
Из W3C: Формат значения URI - это "url (", за которым следует необязательное пробел, за которым следует необязательный символ одиночной кавычки() или двойной кавычки ( "), за которым следует сам URI, а затем необязательная одинарная кавычка (') или двойная кавычка (" ) с последующим дополнительным пробелом, за которым следует ')'. Оба символа кавычки должны быть одинаковыми.
Примечание по тому же объяснению, пример 1 является приемлемым, если соответствующие символы экранированы.
Согласно Стиль кодирования CSS Google
Не используйте кавычки в значениях URI (url()).
Исключение: если вам нужно использовать правило @charset, используйте двойные кавычки - одиночные кавычки не разрешены.
У меня было:
a.pic{
background-image: url(images/img (1).jpg);
}
Мне потребовалось некоторое время, чтобы понять, что закрытая скобка для имени файла нарушает правило.
Таким образом, это не обязательно, но даже если цитирование не так хорошо понято старыми браузерами, оно может сэкономить вам некоторую головную боль на довольно сложных динамически сгенерированных страницах.