Your full service technology partner! 
-Collapse +Expand
Search Design Group:

-Collapse +Expand Design Store

Prestwood eMagazine

August Edition
Subscribe now! It's Free!
Enter your email:

   ► KBWebsite DesignCascading St...   Print This     
Next Random Article Next Random Tidbit || Change Topic Random From All
  From the November 2015 Issue of Prestwood eMag
Design Cascading Style Sheets (CSS):
View. Print. Handheld. Make your site work on any media.
Posted 11 years ago on 1/15/2009
Take Away:

There is no need to manually control the rendering of your site to alter layout. There is an easy CSS based feature that can be used to format your entire site for whatever options you need.

In this article we will see how to make the same site render automatically for screen, print, and handheld. There are other media types that can be used, but these will be the most common for daily use.


Wouldn't it be great if you could just alter the stylesheet for your site to adjust it slightly for printing or handheld devices? Then you could just create a single site, and use a modified stylesheet based on the media the site is being viewed on. Well, wishes do come true... observe!

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

All 3 lines (or ones like them) are placed in the <head> section of the master page, or in every html page if you are not using a master page. Note the normal html link to the stylesheet, with the addition of the media parameter. These media types are pre-defined and can be selected from a dropdown in Visual Web Developer. The current list of supported types is here.

Now we can load a different stylesheet based on our needs! The next thing to do is to make a copy of our existing full stylesheet. If you do a lot of in-page formatting, you are going to rue the day you decided to do that.

Making the Menu Disappear

To make any div simply cease to exist on a printed page, simply do this in the printer version of the stylesheet:


The display:none; means that this div or td (tablecell) will not be rendered when the browser is rendering to that media type - print in this case. so our entire graybar object is hidden.needless to say, your layout can be dramatically altered for smaller handheld displays.

The most brilliant thing is that the browser manages all this. So you never have to do anything conditional in your code that eats processor power. For instance, you don't have to have a "printer-friendly" version, the print engine will automatically choose the stylesheet intended for paper printouts. What's really cool is that you needn't worry what happens if you have a printer-friendly version of your site and people start navigating around - or linking to the version not intended for screen.

Layout for paper

OK, in word processors we taught ourselves to think in "points". then we started doing websites, and points make it all unmanageable, we opt instead for "pixels". But now we're actually designing websites for a paper media, so in the copy of the stylesheet, wherever you see the letters px, it's a good idea to re-arrange your thinking back into points. It can be a lot of work but you'll thank me later.


Share a thought or comment...
Write a Comment...
Sign in...

If you are a member, Sign In. Or, you can Create a Free account now.

Anonymous Post (text-only, no HTML):

Enter your name and security key.

Your Name:
Security key = P1102A1
Enter key:
KB Post Contributed By Bryan Valencia:

Bryan Valencia is the author of millions of lines of code and writes for PrestwoodBoards and Visual Studio Journey on-line magazines.

Visit Profile

 KB Article #101808 Counter
Since 1/15/2009
Go ahead!   Use Us! Call: 916-726-5675  Or visit our new sales site:

©1995-2020 Prestwood IT Solutions.   [Security & Privacy]