Как разбить строки в URL-адресах в таблице стилей

У меня есть таблица стилей с очень длинными строками (URL-адреса данных). Могу ли я как-нибудь разбить эти строки на более мелкие строки?

Пример длинной строки:

background-image: url(data: image/png;base64, really long string);

url css data-uri
person Poul Bak    schedule 02.03.2016    source источник
comment
используйте функции переноса и свертывания кода внутри вашего редактора   -  person Alex Pogiba    schedule 02.03.2016
comment
вы говорите о самом файле CSS или о том, как он представлен в среде IDE? Потому что в IDE вы можете обернуть длинные строки AFAIK. Не уверен, что сработает разрыв фактической строки base64.   -  person Aziz    schedule 02.03.2016
comment
И когда он минимизируется, это все равно не имеет значения.   -  person Paulie_D    schedule 02.03.2016
comment
Не могли бы вы предоставить правильный URI данных в кодировке Base64 для демонстрации? Это не обязательно должно быть реальное изображение, очень простое растровое изображение может сгенерировать достаточно длинный URI данных для демонстрации.   -  person BoltClock    schedule 02.03.2016
comment
jsfiddle.net/r8b808bb   -  person Paulie_D    schedule 02.03.2016

Ответы (1)


arrow_upward
8
arrow_downward

Вы делаете это, заключая URI в кавычки и добавляя \ в конец каждой строки, которую вы хотите разорвать, а затем новую строку внутри URI. Синтаксический анализатор будет обрабатывать строку в URI так, как если бы \ и сразу после новой строки не было.

При выполнении этого с URI, который не является URI данных в кодировке Base64, вам необходимо убедиться, что внутри строки нет отступа, иначе ссылка не будет работать. Это связано с тем, что в URI важны пробелы. Пробелы не имеют значения в строке Base64, поэтому оставить отступ в URI данных в кодировке Base64 можно, но это свойство строк Base64, а не URI. Если это вас смущает, для простоты никогда не делайте отступов.

Вот пример:

#circle {
  width: 16px;
  height: 16px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQ\
CAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvw\
AAAB6SURBVDhP3ZPLEcAgCERpwSYpLi3YgrWkBbLAIYHJZEi45fBUPq4jColIhIjBBmAF1Mc5/zSIBl\
jmekZzRhTwzbuZNTTXRGCZQOXkzHIBv3MOVmEVmMn5hqkCd4EyPxFoF7H5jJiwaHwkDJiaX1lxkY/Nd\
MVrUmxnoQPGWQ2Hnu//1wAAAABJRU5ErkJggg==');
}
<div id=circle></div>

person BoltClock    schedule 02.03.2016
comment
@Aziz: jsFiddle услужливо сделал отступ для всех строк, в которые вы вставили разрывы строк. Убери отступ и все заработает. - person BoltClock; 02.03.2016
comment
@Aziz: Аааа, я что-то пропустил. Вам нужно указать URL. - person BoltClock; 02.03.2016
comment
Если URL-адрес не заключен в кавычки, произойдет ли синтаксический анализатор с ошибкой? - person Poul Bak; 02.03.2016
comment
@ Пол Бак: Да. Символ новой строки \ + применяется только внутри строк. - person BoltClock; 02.03.2016