Welcome to WebmasterWorld Guest from 50.16.112.199

Forum Moderators: not2easy

Multiple CSS files combined into one file

While still being able to control the medias?

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

5+ Year Member



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

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

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



Hey, cool :)

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

[westciv.com...]

But otherwise, I learnt something new :)

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

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

10+ Year Member



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)

5+ Year Member



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)

5+ Year Member



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;
}
}
5:52 pm on May 29, 2006 (gmt 0)

10+ Year Member



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)

5+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month