AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку

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

Разница между background: url('...') и background: url(...) ?
С кавычками и без?
  • Вопрос задан
  • 2677 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Если в значении функционала 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

8192c6b0c21d43afa0b9b164af297655.png
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
ZloDeeV
@ZloDeeV
Верстаю в своё удовольствие
Нет правильной причины не оборачивать строки в кавычки. По гайдлайнам CSS/SCSS - все строки оборачиваются в одинарные кавычки(их проще набрать на клавиатуре, чем двойные), для лучшей читаемости кода(подсветка кода срабатывает на содержимое кавычек) и для того, чтобы синтаксический анализатор не полыхнул пламенем при виде строки без кавычек.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы