5

Any idea how does IE treat media queries regarding this CSS selector limit?

Does it see it as a single CSS rule or it sees it as 1 rule (the @media declaration) + number of rules inside the @media rule?

This being for IE9 as from what i know IE9 is the only IE that supports media queries while also having this issue with 4095 selectors.

I'm trying to write a tool to split the CSS accordingly and I'm not sure how to count the rules, as in a @media rule will be counted as 1 or will be counted as 1 + nr of rules inside?

Boaz
  • 19,892
  • 8
  • 62
  • 70
daniels
  • 18,416
  • 31
  • 103
  • 173
  • IE9 is the only IE that supports media queries, but earlier versions down to IE6 all support `@media` rules back when media queries weren't yet introduced. – BoltClock Jul 31 '14 at 07:16
  • Thanks. Nice to know. Either way I'm interested in how this limit is counted. – daniels Jul 31 '14 at 07:19
  • You are of course aware that there are already tools out there to split CSS for this precise reason, which (presumably) know how to count rules. –  Jul 31 '14 at 07:23
  • Yes, but it's an edge case for me. I have a Java app and don't what to rely on external program and call them with Process I need this functionality to be built in in my app. So if there's no Java solution for this (I haven't found) I need to role my own. – daniels Jul 31 '14 at 07:30
  • Also I have looked at BlessCSS and it doesn't seem to split the @media queries. It counts them as 1. So if you have a single but huge media query ti won't split your CSS file. I was just wondering if this is correct or it's a bug in BlessCSS – daniels Jul 31 '14 at 07:31
  • Sounds like a bug in BlessCSS most likely. Just a wild guess but it seems most likely that IE would count the media query either as number of selectors, or 1 + number of selectors. There is a post on this page https://www.drupal.org/node/1983728 which says "Looks like media queries do not change the css selector count". Anyway, maybe this is a wake-up call and it's time to refactor your CSS or dynamically load some of it? –  Jul 31 '14 at 07:52
  • It's not for me. I just want to make a Jenkins plugin to automate this and want to make sure i do it right. – daniels Jul 31 '14 at 08:08

2 Answers2

5

It appears that media queries are not included in the selector limit. All rules within all media queries are counted though.

I wrote a test that performs a binary search to find the turning point where the last selector is ignored. It is available at https://robwu.nl/s/css-selector-limit-test.html. The binary search runs over the range 0 - 4200 and reports how often the input selector fits until the last selector is not applied any more. If the result is greater than 4096, the test case reports "infinity".

Results:

Turning point at 4095 for: #DUMMY{color:red;}
Turning point at 4095 for: @media screen(min-width:9px) { #DUMMY {color:red;} }
Turning point at 2047 for: @media screen(min-width:9px) { #DUMMY, #DUMMY {color:red;} }
Turning point at 1023 for: @media screen(min-width:9px) { #DUMMY {color:red;} #DUMMY, #DUMMY, #DUMMY {color:red;} }
Turning point at 1364 for: @media screen(min-width:9px) { #DUMMY {color:red;} } @media screen(max-width:9px) {#DUMMY, #DUMMY {color:red}}
Turning point at 1364 for: @media screen(min-width:9px) { #DUMMY {color:red;} } @media screen(max-width:9px) {#DUMMY {color:red;}} @media screen(max-width:9px){ #DUMMY {color:red;}}
Turning point at infinity for: @media screen (min-width:9px) { }
Turning point at infinity for: @media screen (min-width:9px) { } @media screen (min-width:9px) { } @media screen (min-width:9px) { }
Turning point at infinity for: @font-face { font-family: "blablablablabla"; }

The last three tests show that media queries (and other at-rules such as @font-face) are not counted in the selector limit.

I have seen many "css rule" counter scripts here on Stack Oveflow (e.g. https://stackoverflow.com/a/20496041 and https://stackoverflow.com/a/12313690), but all of them are wrong, unfortunately. A media query appears as one entry in the cssRules/rules list. The right way to count the number of selectors in a stylesheet is to recursively process the style sheet to deal with (nested) @media at-rules.

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • Good job and thank you. I'm sure your answer will be helpful not only to me but to many others. – daniels Aug 02 '14 at 09:28
0

I'm not sure whether it will be counted as 1 or 1+nr but I would suggest that you don't split the CSS between media queries.

A non-efficient hack

  1. Use a counter and go upto 4095.
  2. Trace back and try to find the most recent @media query and split the CSS from there. You can add a check if media query doesn't come till 3000 while backtracking then don't count that case etc.
Chankey Pathak
  • 21,187
  • 12
  • 85
  • 133
  • What's wrong with splitting the media query in 2 or 3? – daniels Jul 31 '14 at 08:48
  • Splitting will break if 4095th selector is nested within @media query, if you take care of that then it's fine. – Chankey Pathak Jul 31 '14 at 08:49
  • I can just recreate 2 media queries in two files. So first file `@media ... {4000 css rules;}` and file two `@media [same query] {rest of css rules;}` – daniels Jul 31 '14 at 08:52
  • Or you can make a separate CSS file which contains only media queries. – Chankey Pathak Jul 31 '14 at 08:56
  • Assuming that you will never find a media query with more then 4095 css rules. As I said I want to make a tool to automate this and how the user will have its CSS is not up to me, I just want to cover every case possible. – daniels Jul 31 '14 at 11:22