Is it possible to concatinate two strings inside a CSS rule?

Question

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?

@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
– Mido, Commented May 30, 2014 at 1:38
Well, add your own answer with your new-found knowledge - ref. w3.org/TR/CSS2 — user2864740
– user2864740, Commented May 30, 2014 at 1:50
Ok sweet. It works. Thanks for the help. I will add my own answer then. — Mido
– Mido, Commented May 30, 2014 at 1:52
@Mido: No, seriously, that is how you concatenate strings in CSS. jsfiddle.net/BoltClock/dF6h3 I'm just addressing your question. — BoltClock
– BoltClock, Commented May 30, 2014 at 4:30

Community · Accepted Answer · 2017-05-23 12:18:33Z

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

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered May 30, 2014 at 1:56

Mido

5042 gold badges6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to concatinate two strings inside a CSS rule?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related