3

I'm trying to split the following CSS rule into two lines:

background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7") 0 0 repeat;

I tried splitting the url base64 string into two sub strings to avoid going over the line length according to the style guide for an open source project called PDF.js.

I tried doing "xxxx" + "xxxx" and that didn't work.

So I was wondering if anyone has tried to do that before or if it is even possible to concat two strings in a css rule?

Mido
  • 504
  • 2
  • 6
  • 18
  • 2
    Do you think that style guide even applies in this case? – Wesley Murch May 30 '14 at 01:35
  • @WesleyMurch Good question. I have noticed other instances of CSS rules in the file that I'm trying to modify where the rules were longer than the suggested guideline. I wanted to check if it was possible at all. So I think in this case the style guide doesn't apply. – Mido May 30 '14 at 01:38
  • Well, add your own answer with your new-found knowledge - ref. http://www.w3.org/TR/CSS2/ – user2864740 May 30 '14 at 01:50
  • Ok sweet. It works. Thanks for the help. I will add my own answer then. – Mido May 30 '14 at 01:52
  • Never forget guidelines are just that, guidelines. – Etheryte May 30 '14 at 01:53
  • You *can* concatenate string values in CSS - there is no operator for it, just separate them with whitespace. (I don't believe it applies to "strings" within the `url()` function though.) – BoltClock May 30 '14 at 02:50
  • @BoltClock I don't agree. String concatenation (http://en.wikipedia.org/wiki/Concatenation) does not equal escaping a newline (whitespace) in a string. – Mido May 30 '14 at 04:26
  • 1
    @Mido: No, seriously, that is how you concatenate strings in CSS. http://jsfiddle.net/BoltClock/dF6h3 I'm just addressing your question. – BoltClock May 30 '14 at 04:30

1 Answers1

1

According to the CSS2 specification http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#strings, there is no concat operation. However, you can split strings on multiple lines for aesthetic reasons.

It is possible to break strings over several lines, for aesthetic or other reasons, but in such a case the newline itself has to be escaped with a backslash ().

So the solution to my problem would be:

  background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAA\
                   LAAAAAABAAEAAAIBR‌​AA7") 0 0 repeat;

Which is kind of related to this question

Community
  • 1
  • 1
Mido
  • 504
  • 2
  • 6
  • 18