A more sophisticated way to control the way your page looks when it is printed is to take advantage of media-specific style sheets. This feature in the CSS2 specification allows a single document to be formatted on the fly depending on the device displaying or outputting it. When it's on the screen, it looks one way; when it prints out, its format changes to be read clearly on hard copy. That eliminates the need to create a separate printer-friendly version of every page on your site.
The process involves creating two style sheets: one appropriate to screen display and one appropriate for print. Both style sheets are associated with the HTML document using the media attribute or the @media rule. When the browser sends the page to print, the appropriate style sheet is chosen for the job. A more detailed explanation follows.
The downside to using any feature from the CSS2 specification is poor browser support. As of this writing, the media attribute is supported on Internet Explorer 5.0 and higher on Windows and IE 4.5 and higher on the Macintosh (IE does not support the @media rule). Navigator began supporting media types in Version 6 for both platforms. Because of the spotty browser support, you can't rely on these techniques for 100% of your audience, but if you know that your users are up-to-date with their browser downloads (such as in an intranet environment), you can begin taking advantage of them immediately.
Creating the Style Sheets
In this simple example, I begin with a simple, yet properly tagged, HTML file that includes a navigational bar, a headline, and a few lines of text. (Structural tags have been omitted to save space, but they are implied.) I'll call this document sample.html.
I now create a style sheet that specifies how I want my page to look on the screen. Just to be extreme, I've made my background black, my headline red and text gray. This style sheet is named browser.css.
I also create a second style sheet that is better suited for a printout. I'd like all the text to be black on a white background. In addition, I don't want the navigation toolbar to appear, so I'll use the display selector to hide the div that contains the image. This style sheet is named print.css.
We're not done yet -- we still need to link the style sheets to the HTML document. Figure gives a sneak preview of the results of our media-targeted style sheets so you have an image of where this is going.
Figure: Media-specific style sheets at work
Connecting the Style Sheets and HTML
There are four methods for associating the style sheets with the HTML document. Two use the media attribute within the <link> or <style> element to target the correct style sheet from within the HTML document. The other two use rules that are dependent on medium: @import and @media. The target medium can be one of ten different media types defined in the CSS2 specification. They are:
All:Applies the styles to all media output (the default)
Print:For printouts and print preview displays
Projection:For slideshow-like presentations
braille,embossed:For tactile output
aural:For speech-generating devices
tv:For television displays (à la WebTV)
tty:For fixed-width character displays
handheld:For small palmtop devices
For now, of course, we are concerned with just the values screen and print. In all of the following methods, multiple media can be specified in comma-separated lists (for example: media="print,projection"). Any style that is set to all media will combine with other media-specific styles. Therefor if you set a master style sheet to all and a second style sheet to print, the final printed output will reflect a combination of both style sheets.
Linking to media-dependent style sheets
The most familiar way to target the respective style sheets is to link to them from the HTML document using the <link> element in the <head> of the document. This is a standard method for referencing an external style sheet; however, in this case, the two links are differentiated by the values of their media attributes.
By specifying that print.css has a media of print, it is called into use only when the document is printed.
Using two embedded style sheets
A document may contain two embedded style sheets targeted at different media. The styles are differentiated using the media attribute in the <style> tag.
An external style sheet can be imported based on the display medium using the @import rule in a style sheet. Simply add the target medium value at the end of the rule as shown in this example:
The @media rule enables style instructions for a number of media to be placed within one style sheet. Each @media rule can be interpreted as, "If the final display is going to be this, use these style instructions." Unfortunately, it is not supported in Internet Explorer as of this writing. Using the same style sheet information from the original example, the code would look like this:
Web Designing Related Interview Questions
|HTML Interview Questions||HTML 5 Interview Questions|
|Flash Interview Questions||Graphic Design Interview Questions|
|Illustrator Interview Questions||Dreamweaver Interview Questions|
|UI Developer Interview Questions||Dreamweaver CS3 Interview Questions|
|CSS Advanced Interview Questions||Web Developer Guide Interview Questions|
|Log Shipping Interview Questions||Spring Boot Interview Questions|
|UI Designer Interview Questions||Bootstrap 4 Interview Questions|
Web Designing Related Practice Tests
|HTML Practice Tests||HTML 5 Practice Tests|
|Flash Practice Tests||Graphic Design Practice Tests|
|Illustrator Practice Tests||Dreamweaver Practice Tests|
|UI Developer Practice Tests||Dreamweaver CS3 Practice Tests|
|Web Developer Guide Practice Tests||Advanced jQuery Practice Tests|
Web Designing Tutorial
Designing For A Variety Of Browsers
Designing For A Variety Of Displays
Web Design Principles For Print Designers
A Beginners Guide To The Server
Printing From The Web
Structural Html Tags
Adding Images And Other Page Elements
Specifying Color In Html
Cascading Style Sheets
Server Side Includes
Designing Graphics With The Web Palette
Audio On The Web
Video On The Web
Flash And Shockwave
Introduction To Smil
Introduction To Dhtml
Introduction To Xml
Wap And Wml
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.