What Is The Max Number CSS Rules I Can Specify in Style Sheet Per Browser

is there any limit on css file size?

I think that if you are having problems with the size of your css files then it is time to rethink your styling strategy. The C in CSS stands for cascading. Quite often when CSS files get too big it is due to styles not being re-used where appropriate and through poor use of the cascading behaviour.

I don't say this lightly. I have worked on some large, complex retail sites and currently on very complicated financial trading applications. Whenever I have come accross sites with more than a few hundred styles, we have achieved large improvements in design, reductions in complexity and improvement of maintainability by reducing css complexity.

One place to start is doing a Google sesarch on css reset. There are multiple different implementations, but they generally follow the theme of overriding the differences in layout for each of the browsers and removing arbitrary borders, margins and padding etc. Starting with a clean slate, if you will. Then you can go ahead and build up your styles from there, being careful to make the most of cascading and css chaining

Chaining is where you have more than one class on an element. eg:

<div class="box right small"></div>  

box might have some general styles that you might like to apply to many block elements such as div, h1...h6, p, ul, li, table, blockquote, pre, form. small is self explanatory right might simply be aligned to the right, but with a right padding of 4px. Whatever. The point is that you can have multiple classes per element and build up the styling from reusable building blocks - groupings of individual style settings. Otherwise known as classes.

On a very simple level, look for oportunities to combine styles:

so:

h1 {font-family: tahoma, color:#333333; font-size:1.4em;}  
h2 {font-family: tahoma, color:#333333; font-size:1.2em;}  
h3 {font-family: tahoma, color:#333333; font-size:1.0em;}  

becomes

h1, h2, h3 {font-family: tahoma, color: #333}  
h1 {font-size:1.4em;}  
h2 {font-size:1.2em;}  
h3 {font-size:1.0em;}  

Only, slightly smaller, but do this kind of thing lots of times and you can make a difference.

Also, Validate your css. This will help you spot errors in your code.

Does IE 8 have a limit on number of stylesheets per page?

Yes, IE8 (and even IE9 apparently) limit the number of style sheets to 31 per page.

Telerik has an article and test page which demonstrate the issue. According to comments in the same article, the 4096 rules per file limitation has been marked as Won't Fix in Microsoft Connect but I've been unable to verify that.

How long can a CSS selector be?

ScottS concluded Chrome handles 1366 selectors. Why 1366?

1366 * 3 = 4098

Why 3? There are 3 components in this selector: .y1366 .c1 > *.
4098 is the limit of total number of selector parts. Proof here (I added > * to the first selector only and it marked 4095 elements instead of 4096).

My tests

A group of 4096 selectors will have the remaining ones completely ignored. Example:

.z .y1, .z .y2, .z .y3,..., .z .y3{background-color:red}

Live Example

In the example each selector has 2 components:

.y1 > *
Component 1: .y1
Component 2: *

Every selector placed after the 2048th is ignored. Why 2048? Because each selector has 2 components and the limit is 4096. Not convinced?

Next example

In the example above each selector has one component:

.y1, .y2, .y3 ...

Only the first 4096 selectors are working. Chrome doesn't have a limit, so all of the selectors should work. Yet after a certain point, remaining selectors are completely ignored. This bug existed for at least 2 years. IE9 and below have a limit of 4095 selectors.

Bug 2

A large group of selectors, one of them having two components .bdy .y1 will, after 4096 combined components cause the element with class bdy to be affected.

Example

.bdy .y1, .y2, .y3, ... .y4097{background-color:red}

The CSS selector group above causes an element by class name bdy to have background-color:red applied. The condition is to have 4096 selectors after one selector with two components.

Live example

In the example above the body is applied with red color due to a 4096 selector (after one which targets a child of an element with class name bdy which has class name y1). The bug will cause the parent to be affected.

In .bdy .y1 the element .y1 (under parent .bdy) is targeted, yet an element bdy is also affected. If you move the two component selectors 10 places forward you can create 10 more selectors until this bug manifests. That implies the bug occurs when total number of component selectors reaches 4096.

SOLUTION

They are not going to fix it. This problem will happen only if all selectors are on one line. So just do:

.c1 .y1,
.c1 .y2,
.c1 .y3...

instead of:

.c1 .y1, .c1 .y2, .c1 .y3...

Is there a maximum line length for Chrome's CSS parser?

If a single css rule contains over 4096 selectors, it creates an overflow on selector specificity. This is a known bug, and per the thread, there aren't really any plans to fix it

"...because having a specificity so high on a node is a very far edge-case."

It's conjecture, but I'm assuming that the root cause of the issue has to do to with a limitation of a 32bit integer somewhere in the css parser, as that 4096 number is incredibly similar to the stylesheet limits in IE6-9. The math behind that issue is explained here.

While it may not be helpful to your specific situation, moving the selectors to their own line appears resolves the issue.

Counting CSS rules for IE's rule limit

Judging by several people's attempts to solve this issue, it's a limit on selectors. Meaning you split each line at commas , when counting (as this example of a selector counter does: https://stackoverflow.com/a/20496041/624590 )

Which means your example counts as 5 points against the 4095 limit.

If you wish to prove it to yourself, take your IE browser to this page I set up: http://dylancodes.net/wayBack/ie9selectors/

It counts a few extra, to 4097, in a stylesheet formatted as:

.test0, .test1, .test2, ..., .test4097 { background: green; }

I've only checked using IETester software, but it seems the first three divs failed to get the color (counting from 0, so 4094 is the 4095th item, so there are three beyond the rule).

Cannot add further CSS rules to WordPress style.css

I think your css file is too long. Add your _s code to the file _s.css and start the style.css file with:

/*
Theme Name: mytheme
Author: myname
Author URI: myurl
Version: 1.0.0
Text Domain: mythemename
*/

@import url('_s.css')

Is there a way to set any style for a specific browser in CSS?

For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS

No, that isn't how it works.

Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.

In general, you shouldn't use them in production code because they are experimental.

Support for the vendor prefixed versions is removed as support stabilises.

Is there a way to set any style for a specific browser in CSS?

There are several methods that have been used for that effect.

Parser bugs

By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).

Conditional comments

Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.

Support for this has been dropped.

JavaScript

Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.

Does IE9 have a file size limit for CSS?

There are 3 limits:

• a sheet may contain up to 4095 selectors, see
  http://demos.telerik.com/testcases/4095issues.html
• a sheet may @import up to 31 sheets, see http://demos.telerik.com/testcases/BrokenTheme.aspx
• @import nesting supports up to 4 levels deep

Microsoft support/MSDN reference links:

http://support.microsoft.com/kb/262161

http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx

Can you use if/else conditions in CSS?

Not in the traditional sense, but you can use classes for this, if you have access to the HTML. Consider this:

<p class="normal">Text</p>

<p class="active">Text</p>

and in your CSS file:

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

That's the CSS way to do it.

---

Then there are CSS preprocessors like Sass. You can use conditionals there, which'd look like this:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Disadvantages are, that you're bound to pre-process your stylesheets, and that the condition is evaluated at compile time, not run time.

---

A newer feature of CSS proper are custom properties (a.k.a. CSS variables). They are evaluated at run time (in browsers supporting them).

With them you could do something along the line:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

---

Finally, you can preprocess your stylesheet with your favourite server-side language. If you're using PHP, serve a style.css.php file, that looks something like this:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

In this case, you will however have a performance impact, since caching such a stylesheet will be difficult.

---

Related Topics