Multiple CSS files combined into one file

While still being able to control the medias?

[Jeremy_H]

Hello,

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>
<style type="text/css" media="print">
...
</style>
<style type="text/css" media="handheld">
...
</style>

Thanks

[swa66]

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.

[Setek]

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.

[bedlam]

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; }
}

-b

[Setek]

Hey, cool :)

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

[westciv.com...]

But otherwise, I learnt something new :)

[swa66]

COOL!

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 }
}

[D3mon]

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...
}

[Jeremy_H]

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.

[carstanje]

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.

Example

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

[D3mon]

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.

[mcvoid]

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');}

[D3mon]

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...]

[swa66]

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 ...