As this article suggesting
or different external CSS for different media would be better option?
in terms of maintainability, site performance.
A:
Combined Style Sheet Pros:
- Optimal/Fast
- Good reduction in size after compression
- and yes fewer http requests
Combined Style Sheet Cons:
- Messed up; all different style sheets in one place
- Difficult to maintain
- Less readable
Sarfraz
2010-02-27 05:11:37
Optimal/Fast = false. Sorry but multiple style sheets is not optimal or fast.
rockinthesixstring
2010-02-27 05:12:40
@rockinthesixstring: i used the wrong word "multiple" i meant multiple sytle sheets combined into one, see my answer again plz :)
Sarfraz
2010-02-27 05:13:45
Down vote removed.
rockinthesixstring
2010-02-27 05:14:40
@rockinthesixstring: thanks dude...
Sarfraz
2010-02-27 05:15:34
A:
Basically, if you can programmatically add CSS files to your client based on the media (as long as you only send ONE css file in the end), then yes, build multiple CSS files based on the @media.
If you cannot add css programmatically, then I would suggest combining them into a single css file (since you have to send them all to the client regardless), thus reducing the number of http requests by the client.
fewer http requests = faster page loads.
rockinthesixstring
2010-02-27 05:17:55
but then main css will be heavy for media="screen" users which are main users very few people will take print and mobile user percentage is very low also
metal-gear-solid
2010-02-27 05:43:31
A:
You could use media-dependent @import rules like so:
@import url("print.css") print;
@import url("projection.css") projection, tv;
it should work in everything but IE5-7 (as per: http://www.westciv.com/wiki/CSS_Guide:_Media#mediaspecific ) I can't test for IE8 so you might be disappointed there too.
it would result in a very small initial CSS load, then upload just the needed stylesheets based on media.
JKirchartz
2010-08-10 23:17:51