CSS Compression errors

Hello everyone
When CSS compression is active
font-famil:‘Barlow Condensed’
the style I specified
font-family: barlow condensed
changes automatically.
In this case, the font sometimes malfunctions.

The CSS 2.1 spec tells us that:

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

In addition, the selector “+” (element+element) with CSS 2 and above works incorrectly with the u element when CSS compression is active and is perceived as a unicode range by the browser.
Ex: .my-class u + b{ color: red; }
Post compression: .my-class u+b{ color: red; }

Can you please post the respective HTML code aswell?
Also this CSS compression is correct AFAIK (test HERE) and can not trigger a malfunction of a font itself, as it in general just sets the color to “red”.

Hi M4rt1n;
Thanks for your reply.
For live results, you can check:

HTML

<div class="underline-test-min">
  <span>Test 1 Min (element) with u + b</span><br>
  <u>Underline Element</u>
  <b>Bold ELement</b>
</div>
<br>
<div class="underline-test-min2">
  <span>Test 2 Min (class) with .u + b</span><br>
  <u class="u">Underline Element</u>
  <b>Bold ELement</b>
</div>
<br><br><br>
<div class="underline-test-normal">
  <span>Test 1 non-minified (class) with .u + b</span><br>
  <u>Underline Element</u>
  <b>Bold ELement</b>
</div>
<br>
<div class="underline-test-normal2">
  <span>Test 2 non-minified (class) with .u + b</span><br>
  <u class="u">Underline Element</u>
  <b>Bold ELement</b>
</div>

CSS

/*
If you want to fix this. Try:
.underline-test-min u +b {....}
.underline-test-min u+ b { ... }
*/
.underline-test-min u+b{color: red}

/*
If you want to fix this. Try:
.underline-test-min .u +b {....}
.underline-test-min .u+ b { ... }
*/
.underline-test-min2 .u+b{color: red}

.underline-test-normal u + b {
  color: red;
}

.underline-test-normal2 .u + b {
  color: red;
}

Actually the problem is not the minified css error, I think you misunderstood me.
The problem is that the browser misinterprets such a minified css and does not produce the result it should.

Thanks

Thanks for the demo, I now see the problem. Indeed the browser checks for a literal string “.u+b” which ofc is no classname in this example. putting a space inbetween solves the problem.

I guess you are right, that the optimization in this case is too agressive and breaks the CSS.

This btw does not happen in FireFox, but in Chrome (all chromium based browsers) solely. Please open a bugreport there. Since as you said, the problem is the browser not interpreting it right.

image
Left: Chrome
Right: FireFox

Thanks for the nice response and testing.

In fact, this test should be done and observed one by one in all other browsers and operating systems.

Also, some IDEs and editors report this as a URANGE error. (For example: Netbeans)

I think adding a space during Minify especially for the “+” selector will solve the whole problem.

Thank you.

Yes it would, but:

  1. the problem does not stem from Cloudflare, thats why it should not be solved at Cloudflare.
  2. doing so, would lower the minification rate and everything would be minificated a little less then it could be.
  3. problems must be solved at the root, therefore chromium should fix their bug and everything will/should work again.

But I understand what you mean.

Yes you are so right.

But unfortunately sometimes browsers take too long to fix their errors.

I think the best solution here would be a small addition to minify.

Thanks for very fast response :smiley:

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.