How to break lines in URLs in stylesheet

Question

I have a stylesheet with really long lines (data urls). Is there anyway I can break those lines into smaller lines?

Example of long line:

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

Answer 1

You do this by enclosing the URI in quotes, and appending a \ to the end of each line you want to break, followed by a newline, within the URI. The parser will treat the string in the URI as though the \ and the immediately following newline were not there.

When doing this with a URI that is not a Base64-encoded data URI, you need to make sure there is no indentation inside the string or the link will not work. This is because whitespace is significant in a URI. Whitespace is not significant in a Base64 string, so leaving indentation in a Base64-encoded data URI is fine, but that's a property of Base64 strings, not URIs. If this confuses you, for the sake of simplicity never indent.

Here's an example:

#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>