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