On 17 February 2010 03:42, <c...@fagandesign.com.au> wrote:
> Hi all,
>
> Just wondering about best practice, accessibility and practical
> implementation of a print stylesheet.
>
> I have been asked to place a different header image in my HTML templates
> specifically for print (only shows when printed and replaces usual header).
>
> I would like to know if this is deemed acceptable use of CSS....AND if a
> hard-coded image has to be downloaded on page load or page print??
>
> eg.
> <div id="print-header" style="display:none;">
> <img src="img/elements/print-header.jpg" alt="blah blah" width="600"
> height="254" />
> </div>
> <div id="header">
> <img src="img/elements/normal-header.jpg" alt="blah blah" width="800"
> height="300" />
> </div>
>
> <!-- PRINT STYLESHEET -->
> .print-header {display:block!important}
This duplication of content is unnecessary and would be rather
difficult to maintain in the long term.
.The issue has been dealt with in http://www.w3.org/TR/CSS2/media.html..
Use one element id in a document for one element e.g.
<div id="header">
and then define it differently for different media as per examples in
that link.n
@media print {
#header { font-size: 10pt }
}
@media screen {
#header { font-size: 13px }
}
@media screen, print {
#header { line-height: 1.2 }
}
This method achieves independence of data (web page content) from
design/style (whether it is screen, print or other media type).
HTH
Lesley
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
