homepage Welcome to WebmasterWorld Guest from 23.23.9.5
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
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?
Jeremy_H

5+ Year Member



 
Msg#: 9159 posted 1:27 am on May 24, 2006 (gmt 0)

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

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



 
Msg#: 9159 posted 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.

Setek

5+ Year Member



 
Msg#: 9159 posted 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.

bedlam

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 9159 posted 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; }
}

-b

Setek

5+ Year Member



 
Msg#: 9159 posted 6:10 am on May 25, 2006 (gmt 0)

Hey, cool :)

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

[westciv.com...]

But otherwise, I learnt something new :)

swa66

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



 
Msg#: 9159 posted 11:23 am on May 25, 2006 (gmt 0)

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

10+ Year Member



 
Msg#: 9159 posted 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...
}

Jeremy_H

5+ Year Member



 
Msg#: 9159 posted 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.

carstanje

5+ Year Member



 
Msg#: 9159 posted 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.

Example

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

D3mon

10+ Year Member



 
Msg#: 9159 posted 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.

mcvoid

5+ Year Member



 
Msg#: 9159 posted 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');}

D3mon

10+ Year Member



 
Msg#: 9159 posted 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...]

swa66

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



 
Msg#: 9159 posted 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