CSS media=screen / print
Now im a little confused about the media="" attribute in the tag for an external stylesheet.
Do they mean as follows:
screen - literally on the monitor screen.
print - if the page is physically printed out using a printer.
Why would you have two different stylesheets one print one screen if not many websites require you to print anything out?
Megan posted this at 16:13 — 31st May 2007.
She has: 11,421 posts
Joined: Jun 1999
You never know when someone will want to print something! In fact, I have been appalled at how many websites have no print stylesheet at all. I have written about this a few times on my blog.
It is true that few websites *require* printing but I would also say that most websites *will* be printed by users in some way. Make it easy for them by providing a print stylesheet. It's not hard. I plan to write more about this on A Padded Cell (since it's a bit of a pet issue for me).
There are also options to use separate stylesheets for mobile and handheld users - something that is becoming increasingly important. See the rest of the media options here: http://www.w3.org/TR/html401/types.html#type-media-descriptors (hmmm... projection. That's interesting...)
Megan
Connect with us on Facebook!
webwiz posted this at 17:19 — 31st May 2007.
He has: 629 posts
Joined: May 2007
Pretty much that's it. While visitors do like to print out web pages, they are often unaware that they can do things like suppress background images (to save ink, for example). So it is kind to them to give them a separate 'media="print"' style sheet to take out unnecessary images. At the same time, you could take out things like menus that-- to date at least-- you can't click on a paper version. Also, there are problems with printing floats, so you could "unfloat" items for printing, use a different font, change the width, and so on.
You can also use 'media="all"' in your link and wrap the appropriate rules in '@ media' statements within one style sheet. Whatever floats your boat.
Back in the day, web designers used to make two versions (at least) of every page, to include a "printer-friendly" version. Using CSS, you can automatically provide a "printer-friendly" version using these media rules.
I hope I have not confused you too much.
Cordially, David
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
benf posted this at 18:48 — 31st May 2007.
They have: 426 posts
Joined: Feb 2005
No that sounds intereting. But how can you take out menus and so on.....maybe using display:none?
Renegade posted this at 20:32 — 31st May 2007.
He has: 3,022 posts
Joined: Oct 2002
Yes, that's exactly it benf. Just use display:none; and it will be taken out. Some people prefer to use visibility:hidden; but I don't think it works quite the same.
webwiz posted this at 01:42 — 1st June 2007.
He has: 629 posts
Joined: May 2007
That's correct. Using visibility: hidden; does not remove the element - it still takes up space, but shows as blank. Use display: none; to remove the element completely.
Cordially, David
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
demonhale posted this at 04:05 — 1st June 2007.
He has: 3,278 posts
Joined: May 2005
It really does pay to use alternate style-sheets. If you have a content driven site, most of your pages will be printed, especially if you're dealing with education and tutorial sites...
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.