Разница между background: url('...') и background: url(...)?

Question

[Alibek Kulseitov]

Разница между background: url('...') и background: url(...) ?
С кавычками и без?

Answer 1

[Евгений Петров]

Если в значении функционала url() не присутствуют пробельные символы (пробелы, табуляция, переносы строк), кавычки и скобки, то разницы нет никакой.
Пример — ссылка, data:uri в кодировке base64.

Update: После обсуждения с Алексей Уколов внёс коррекцию

Если же в значении могут появиться пробельные символы, кавычки и скобки, то при отсутствии обрамляющих кавычек их нужно экранировать (каждый символ).
Если же обрамляющие кавычки есть, то экранировать нужно только внутренние кавычки в том случае, если они аналогичны обрамляющим. Если же обрамляющие и внутренние кавычки разные (например, внутри двойные, снаружи одинарные и наоборот), то никаких дополнительных действий не требуется.
Пример — data:uri в кодировке utf8.

Спецификация:
Parentheses, whitespace characters, single quotes (') and double quotes (") appearing in a URL must be escaped with a backslash so that the resulting value is a valid URL token

Пример jsfiddle.net/petroveg/cexbhq4e/6

Answer 2

[Alexey ZloDeeV]

Нет правильной причины не оборачивать строки в кавычки. По гайдлайнам CSS/SCSS - все строки оборачиваются в одинарные кавычки(их проще набрать на клавиатуре, чем двойные), для лучшей читаемости кода(подсветка кода срабатывает на содержимое кавычек) и для того, чтобы синтаксический анализатор не полыхнул пламенем при виде строки без кавычек.

Комментарий Евгений Петров не соответствует действительности - CSS не требует, чтобы строки были помещены в кавычки, даже те, что содержат пробелы. Строка в кавычках является точным соответствием её двойника без кавычек. Просто в предложенном примере с data:uri в строке имеются другие кавычки и интерпретатор банально сходит с ума, такие символы нужно экранировать.

Comments

[Евгений Петров]

Прежде чем жечь глаголом и писать странные и смешные вещи, стоит проверять свои мысли. Вот вам пример jsfiddle.net/petroveg/cexbhq4e

[Alexey ZloDeeV]

Евгений Петров: Ты сейчас сам над собой пошутил, я просто убрал кавычки и получил то, о чем говорил.
jsfiddle.net/cexbhq4e/1

[Евгений Петров]

И где первое изображение?

[Alexey ZloDeeV]

Евгений Петров: Внимательное чтение предотвращает неловкие ситуации:
"Строка в кавычках является точным соответствием её двойника без кавычек. Просто в предложенном примере с data:uri в строке имеются другие кавычки и интерпретатор банально сходит с ума. "

[Евгений Петров]

Вот как? То есть при наличии окружающих кавычек не сходил, а теперь сходит?) Можно подтвердить это ссылкой на источник, или написанное — просто ваша фантазия?

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

[y0u]

Alexey ZloDeeV: омг, что спорить-то? Поставьте пробел в url второго шарика и уберите кавычки и сами всё увидите.

[Alexey ZloDeeV]

Евгений Петров:
Читаем и обучаемся:
www.w3.org/TR/CSS21/syndata.html#uri

The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.

Ключевое слово "optional" - необязательный(англ.)

[Alexey ZloDeeV]

y0u: Лол, молодой человек. Ты предлагаешь поставить пробел в base64 и проверить, что из этого получится?

[Евгений Петров]

Alexey ZloDeeV: Вы сами очень невнимательно читаете. Я не говорил про обязательность. Только в случае появления пробельных символов. Слово optional не означает ненужность, только лишь использование по необходимости.

И что за шутка про base64?) Вы поставьте провел перед словом base64 (после точки с запятой). Ведь так же можно.

И ещё раз — продемонстрируйте работу без кавычек, но с пробельными символами. На моём примере покажите. Сможете — я признаюсь, что негодяй и обманщик. Аха.

[Алексей Уколов]

jsfiddle.net/cexbhq4e/3 - вариант без кавычек с экранированным пробелом

[Alexey ZloDeeV]

Алексей Уколов: Не слушают меня, а я уже тоже подготовил фидл с экранированными пробелами. А ведь Евгений эксперт по CSS на Тостере

[Евгений Петров]

Алексей Уколов: Так, а для utf8 можно сделать то же самое?)

[y0u]

Alexey ZloDeeV: именно

[Алексей Уколов]

Евгений Петров: Покажите, пожалуйста, пример, который по вашему не будет работать без кавычек.
У меня нет цели вас в чем-то убедить, равно как и доказать, что вы не правы. Мне вопрос кажется прекрасной возможностью разобраться в деталях. Спецификация для этого подходит как нельзя лучше, и я привел из нее цитату в своем варианте ответа.

[Евгений Петров]

Алексей Уколов: Я же написал камент и ссылку дал jsfiddle.net/cexbhq4e
Требуется убрать кавычки у SVG картинки в utf8. Жду.

[Алексей Уколов]

Евгений Петров: смените, пожалуйста, тон с "давайте, мудаки, доказывайте, что я не прав" на что-то более конструктивное. Я же не прошу вас опровергнуть мой ответ.

[Евгений Петров]

Алексей Уколов: Весьма странно слышать от вас такую интерпретацию моих слов. Я подготовил пример и прошу показать мне — как можно в SVG экранировать пробельные символы.

Не понимаю, где тут кроется оскорбление. Разве просьба привести доказательство есть попытка унизить оппонента?)

[Алексей Уколов]

Евгений Петров: у меня создалось впечатление, что для вас важнее доказать свою правоту, чем докопаться до истины.
Я не смог найти способа корректно экранировать предложенный вами код, но это совершенно не значит, что сделать этого нельзя :)
Такой вариант вообще предусмотрен спецификацией? Я пока гуглил, наткнулся на несколько сообщений о том, что это некроссбраузерно и нужно использовать base64.

[Евгений Петров]

Алексей Уколов: Так покажите найденные источники про некроссбраузерность. Или это — тоже оскорбление?)

[Алексей Уколов]

Евгений Петров: stackoverflow.com/a/25024497/1510966 - вот, например. Но деталей там никаких нет, поэтому я и уточняю.
P.S. Если вам хочется продолжить эту тему - я нигде не утверждал, что вы меня оскорбили.

[Евгений Петров]

Алексей Уколов: Я вообще не планировал никого обидеть. Просто прошу каждого оппонента показать свою правоту на примере.

1. По ссылке я не вижу утверждения, что использование base: image:svg_xml;utf8 противоречит спецификации. Поддержка всеми современными браузерами говорит про достаточную кроссбраузерность.

2. Поддержка браузерами вообще не может быть подтверждением правомерности, иначе на основе работы IE можно было бы такого привести в качестве аргументов:)

3. Я не утверждаю, что этого сделать нельзя, и мой взгляд на требование обрамляющих кавычек не есть аксиома. Но я могу привести примеры в подтверждение своих слов и описанный мной подход позволяет получить результат.

[Алексей Уколов]

Евгений Петров: давайте сформулируем гипотезу - вариант с base:image:svg_xml;utf8 можно использовать без кавычек, но нужно каким-то образом экранировать. Именно это гласит спецификация. Я попробовал экранировать специальные символы через слэш и через проценты, такие варианты не работают. Какие еще есть варианты экранирования, которые можно протестировать?
Мне кажется, ответ на изначальный вопрос есть в спецификации - кавычки опциональны и любой URI можно указать без них. И теперь перед нами стоит вопрос - как корректно экранировать такой URI? Или эта запись вообще не считается URI?

[Евгений Петров]

Алексей Уколов: Считается, конечно. Я почитал про токенизацию и понял причину вашей неудачи — скобки.
Я скорректировал свой ответ.
Приношу извинения за ошибку с обязательностью кавычек — экранировав скобки, кавычки и пробельные символы, можно обойтись и без них.

[Алексей Уколов]

Кстати, чтобы уж совсем точным быть, формулировка Alexey ZloDeeV тоже не верна:

Строка в кавычках является точным соответствием её двойника без кавычек.

Не является, поскольку нужно экранировать спецсимволы.

[Алексей Уколов]

Евгений Петров: а покажите, пожалуйста, итоговое решение с экранированием, хочу понять, где я ошибся.

[Евгений Петров]

Алексей Уколов: А я же обновил ссылку на пример в ответе jsfiddle.net/petroveg/cexbhq4e/5
Последний спан.

[Алексей Уколов]

Евгений Петров: хм, видимо, я при тестах экранирования где-то что-то пропустил - примерно так и должно было выглядеть.

[Евгений Петров]

Алексей Уколов: Как видите, и без хамства можно достичь результата:)

[Алексей Уколов]

Евгений Петров: у меня претензия была не к хамству (которого не было), а к отношению (я выше сформулировал). Предлагаю закрыть эту тему, раз мы пришли в итоге к взаимопониманию.

[Alibek Kulseitov]

После такого крутого общения , так на чем остановились то?)

[Евгений Петров]

AlibekKulseitov: нашли верный ответ и остановились.

[Алексей Уколов]

AlibekKulseitov: можете смело принимать ответ, который дал Евгений Петров