10

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);
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Poul Bak
  • 10,450
  • 5
  • 32
  • 57
  • use code wrapping & folding features inside your editor – Alex Pogiba Mar 02 '16 at 15:31
  • are you talking about the actual CSS file or just how it is presented in the IDE? Because in IDEs you could wrap long lines AFAIK. Not sure if breaking an actual base64 string would work. – Aziz Mar 02 '16 at 15:31
  • And when it gets minified, it doesn't matter anyway. – Paulie_D Mar 02 '16 at 15:31
  • Could you provide a proper Base64-encoded data URI for the sake of demonstration? It doesn't have to be a real-world image, a very simple bitmap would generate a reasonably long data URI for demonstration. – BoltClock Mar 02 '16 at 15:33
  • 1
    https://jsfiddle.net/r8b808bb/ – Paulie_D Mar 02 '16 at 15:35

1 Answers1

15

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>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356