Same css for viewing on screen and printing

[Pichdude]

Hi, is it possible to, in the same css, specify different styles for the same object depending on if it's shown on the screen or printed?

E.g. a button should be green on the screen but not shown at all when the same page is printed.

Regards

Pichdude

 

[AdaHacker]

Read up on the @meda rules. Here's a quick example:

@media screen {
   #mybutton {
      background: green;
   }
}
@media print {
   #mybutton {
      display: none;
   }
}

 

[Foamcow]

It might be more manageble for you to specify different media style sheets within your html. Like so:

<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="stylesheets/print.css" />

Then you just have to set up your different styles in 2 different files. Makes large sets of style rules easier to manage.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Pichdude]

Thanks!

As I see it this is not supported for Mozilla. Any tips there?

 

[BabyJeffy]

I suggest you follow Foamcow's advice and use different stylesheets. There is no fully supported solution that allows use of @meda.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[Vragabond]

Find a better source for your statements? This has been supported in Mozilla (and also all major browsers) for a while now. I have been using it extensively on my websites.

 

[BabyJeffy]

People need to draw a line on what compatibility they want to support. In this instance you are not going to get a solution that works with every browser that ever was made at any version for any operating system. So define what level of compatibility you want.

Are you going to be satisfied with 95% support of your visitors? 98%? These figures are easily achieved by defining support for modern browsers (that includes IE6, Firefox, Netscape 7+, Opera 7+, Safari as a core collection and often includes IE55 as well). All these browsers, for instance, support @media.

So, what browsers are you actively concerned about?

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[Pichdude]

-> BabyJeff: You are absolutely right. The demands of what I am doing is:

IE 6.x: 100% working, 100% layout
Mozilla Firefox 1.x: 100% working, 50% layout

So it is accepted if everything does not look perfect in Firefox, but it is nice if it do.

 

[BabyJeffy]

In which case you can use @media with confidence. It works in those browsers with no problems.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]