0

The following HTML markup won't work on a production site.

<div class="iconleft 109">TEXT</div>

This is the code in the custom.css file.

.iconleft.\31 09,
.iconleft.\31 12,
.iconleft.\31 10,
.iconleft.\31 11,
.iconleft.\31 20 {
  background: #B0CD00;
}

.iconleft.\31 09 works on localhost with xampp and no aggregation. On the production site, where Advanced CSS/JS Aggregation is activated, it wont work for 109.

In the aggregated CSS file, I see .iconleft.\31 9 as CSS class. It seems that 0 has been removed.

Do you have any hint?

Improve this question
3
  • 2
    This is neither valid HTML nor valid CSS. Apart from the missing opening quote at the class attribute, a CSS identifier (such as a class name or an ID) must not start with a number.
    – Hudri
    Commented May 24, 2021 at 17:49
  • 1
    @Hudri I thought the same thing and commented as much before digging - turns out we’re wrong stackoverflow.com/questions/27882839/…
    – Clive ♦
    Commented May 24, 2021 at 17:56
  • 2
    Holy sh**, this is by far the weirdest, yet valid code I've seen for a long time o_O - I highly doubt any CSS preprocessor can handle that correctly out of the box. By the link you provided, try providing exactly 6 hexadecimal digits (for the leading hex-encoded char) instead of ending with a space, e.g. .iconleft.\00003109 instead of .iconleft.\31 09
    – Hudri
    Commented May 24, 2021 at 18:13

1 Answer 1

Reset to default
0

I think the code is valid.

Anyway due to lack of time i decided to ad an "id" to the class. So the html is now

<div class="iconleft id-{{ child_id }}">Text</div>

And the css

.iconleft.id-109,
.iconleft.id-112,
.iconleft.id-110,
.iconleft.id-111,
.iconleft.id-120 {
  background: #B0CD00;
}

This is working for me.

But if somebody knows why aggregation removes the "0" please let me know.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.