homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Multiple CSS files combined into one file
While still being able to control the medias?

 1:27 am on May 24, 2006 (gmt 0)


Is it possible to combine styles for different media types into just one file, limited the number of server head requests?

Something like:

HTML file:
<link rel="stylesheet" type="text/css" href="/style.css">

CSS file:
<style type="text/css" media="screen">
<style type="text/css" media="print">
<style type="text/css" media="handheld">




 6:06 pm on May 24, 2006 (gmt 0)

Not as far as I know.

But browsers should behave and not ask those they don't need. And they should also use HTTP/1.1 which makes those head requests low impact anyway.


 5:46 am on May 25, 2006 (gmt 0)

Yeah, I don't think so either - however, I have heard of using a PHP file which stores different modular segments of your CSS code (print, screen, handheld) and then call the parts you need for different situations?

Separated CSS files are small and don't really impact document load time very much - it's images and applets that are the heavy burdens.


 5:54 am on May 25, 2006 (gmt 0)

Is it possible to combine styles for different media types into just one file, limited the number of server head requests?

Not as far as I know...

Yeah, I don't think so either...

Yes, it is possible [w3.org].

You simply define the various media types inside one stylesheet:

@media screen {
p { color:#f90; }

@media print {
p { color:#000; }



 6:10 am on May 25, 2006 (gmt 0)

Hey, cool :)

Though if you need to be compliant with older browsers, there's this:


But otherwise, I learnt something new :)


 11:23 am on May 25, 2006 (gmt 0)


I need to test a few things and if it all works nicely in all important browsers, ... A last line in your css that basically hides the navigation could be used for "print", that would be a cool way of needing one less stylesheet indeed. And make maintenance of stylesheets much less of a burden.

[normal stylesheet without the @media]

@media print {
navigation { display:none }


 12:19 pm on May 25, 2006 (gmt 0)

You can also specify multiple media types:

My site has the same layout for screen and print, then specifies only the things that are different for print like this:

@media screen,print {
...normal css...
@media print {
...changes for print version...


 10:03 pm on May 25, 2006 (gmt 0)

That's awesome!

Thanks so much for the feedback.

I'll definitely have to run some tests, but it looks like one way to combat browser support is to define shared basics (and maybe the screen version) using the default method, and overwrite various aspects using the @media.

That way, worse case scenario, it would look correct on every body's monitors, but other medias such as printing, won't be as great on the older browsers.

Thanks again.


 7:31 am on May 26, 2006 (gmt 0)

It's working perfect if you use XHTML for your website. You can hide all the layers/object you don't want people to print. When building websites you can easily make sure only the company logo and body text are printed.


@media print {
#header, #footer, #menu, #etc {
visibility: invisible;


 5:52 pm on May 29, 2006 (gmt 0)

Note that with visibility:invisible, the space that that item would normally take up is reserved on the page.

Using display:none means that everything else can shift up the page to take its place.


 7:32 pm on May 29, 2006 (gmt 0)

Also, you can keep the different sheets in separate files for each type like so:

@media screen {@import url('http://www.any.site/screen.css');}
@media print {@import url('http://www.any.site/print.css');}


 10:22 pm on May 29, 2006 (gmt 0)

Best way to eradicate browser support issues is to set borders and padding on all items to zero at the beginning of the style sheet.

* {border:0;padding:0}

This forces all css-enabled browsers to use your style sheet and ignore their own 'independant' style rules.
It is a little more work however, as you then have to redefine everything - but, it is worth the effort to take control.

Eric Meyer explains better: [meyerweb.com...]


 9:50 pm on May 31, 2006 (gmt 0)

To follow up on my own post earlier,
(a pity you cannot edit old posts)

[normal plain stylesheet no @media]

@media print {
.navigation, .crumbar [,...] { display:none }

Seems to work great in all browsers I care for on a test site I'm doing It's a lot easier to edit it as you ware developing a style as well as it's all in the same file. Add a to be hidden tag, add it at the bottom as well ...

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved