E-mail List Archives
Thread: media types; css
Number of posts in this thread: 6 (In chronological order)
From: pixels 256
Date: Tue, Apr 21 2009 3:55PM
Subject: media types; css
No previous message | Next message →
I have a couple of quesitons.
(1) Is “all except print” a viable value for the media attribute in *<link
rel="stylesheet" type="text/css" media="all except print" href="xprint.css"
/>*?
(2) I want to toggle between a cool background image (say, linewave.gif)
for the screen and some (replacement) words in print.
For the XHTML, I have -
<div id="logo">
<img src="graphics/blank.gif" height="72px" alt="Hello1" />
</div>
<div id="title">
<h1>Hello2</h1>
</div>
For its CSS, I set #title {display:none} for screen.css and #logo
{display:none}
for print.css because I don’t want the redundancy of having both “Hello1”
and “Hello2” read by a screenreader. Can those who use a screenreader (or
visitors who choose to have images turned off) be able to view the
alternative text in the <img> tag on their screen?
Thank you,
so much!
From: Keith Parks
Date: Tue, Apr 21 2009 4:15PM
Subject: Re: media types; css
← Previous message | Next message →
On Apr 21, 2009, at 2:50 PM, pixels 256 wrote:
> I have a couple of quesitons.
>
> (1) Is “all except print” a viable value for the media attribute in
> *<link
> rel="stylesheet" type="text/css" media="all except print"
> href="xprint.css"
> />*?
I do not believe that is valid..
<http://www.w3.org/TR/CSS2/media.html>;
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
A riddle wrapped in a mystery inside an enigma, served with a side of
slaw.
From: Keith Parks
Date: Tue, Apr 21 2009 4:30PM
Subject: Re: media types; css
← Previous message | Next message →
On Apr 21, 2009, at 2:50 PM, pixels 256 wrote:
> (2) I want to toggle between a cool background image (say,
> linewave.gif)
> for the screen and some (replacement) words in print.
>
> For the XHTML, I have -
>
> <div id="logo">
>
> <img src="graphics/blank.gif" height="72px" alt="Hello1" />
>
> </div>
>
> <div id="title">
>
> <h1>Hello2</h1>
>
> </div>
>
> For its CSS, I set #title {display:none} for screen.css and #logo
> {display:none}
> for print.css because I don’t want the redundancy of having both
> “Hello1”
> and “Hello2” read by a screenreader. Can those who use a
> screenreader (or
> visitors who choose to have images turned off) be able to view the
> alternative text in the <img> tag on their screen?
>
I'm a bit confused by your image names and description.
How exactly is the "linewave.gif" image incorporated, and is your
image "blank.gif" a transparent image (as is typical of images with
that name), or is it an image of the "Hello" text?
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
World Peace through Cascading Style Sheets.
From: ben morrison
Date: Tue, Apr 21 2009 5:30PM
Subject: Re: media types; css
← Previous message | Next message →
On Tue, Apr 21, 2009 at 11:29 PM, Keith Parks < = EMAIL ADDRESS REMOVED = > wrote:
>
> On Apr 21, 2009, at 2:50 PM, pixels 256 wrote:
>
> > (2) I want to toggle between a cool background image (say,
> > linewave.gif)
> > for the screen and some (replacement) words in print.
> >
> > For the XHTML, I have -
> >
> > <div id="logo">
> >
> > <img src="graphics/blank.gif" height="72px" alt="Hello1" />
> >
> > </div>
> >
> > <div id="title">
> >
> > <h1>Hello2</h1>
> >
> > </div>
> >
> > For its CSS, I set #title {display:none} for screen.css and #logo
> > {display:none}
> > for print.css because I don’t want the redundancy of having both
> > “Hello1”
> > and “Hello2” read by a screenreader. Can those who use a
> > screenreader (or
> > visitors who choose to have images turned off) be able to view the
> > alternative text in the <img> tag on their screen?
> >
>
> I'm a bit confused by your image names and description.
>
> How exactly is the "linewave.gif" image incorporated, and is your
> image "blank.gif" a transparent image (as is typical of images with
> that name), or is it an image of the "Hello" text?
>
I'm confused too.
What are you trying to achieve, to me it looks like duplicate content that
is not needed.
Can we solve one issue at a time.
Web should convey?
Print should display? ... most default print settings do not print any
background images
Ben
--
Ben Morrison
From: pixels 256
Date: Thu, Apr 23 2009 1:10PM
Subject: Re: media types; css
← Previous message | Next message →
Sorry for the confusion. Both "Hello1" and "Hello2" refer to the company
name.
linewave.gif is a graphic file for the web that shows a jumbled graphic of
the company name; it looks aesthetically pleasing and is meant for only
those with "normal" web browsers. I want the webpage to look as clean as
possible, so I don't want any visitor to see both linewave.gif and the
company name ("Hello").
blank.gif is a "place-holder" for the company name ("Hello"); it is
transparent. I used it so visitors with a screenreader or Lynx will be able
to "see" the name of the company ("Hello").
When the page is printed, I only want "Hello" (i.e. "Hello2") to print but
not the linewave.gif.
I'm new to all this, so any help would be much appreciated. Thanks!
2) I want to toggle between a cool background image (say, linewave.gif)
for the screen and some (replacement) words in print.
For the XHTML, I have -
<div id="logo">
<img src="graphics/blank.gif" height="72px" alt="Hello1" />
</div>
<div id="title">
<h1>Hello2</h1>
</div>
For its CSS, I set #title {display:none} for screen.css and #logo
{display:none}
for print.css because I don’t want the redundancy of having both “Hello1”
and “Hello2” read by a screenreader. Can those who use a screenreader (or
visitors who choose to have images turned off) be able to view the
alternative text in the <img> tag on their screen?
From: Keith Parks
Date: Thu, Apr 23 2009 2:40PM
Subject: Re: media types; css
← Previous message | No next message
On Apr 23, 2009, at 12:08 PM, pixels 256 wrote:
> Sorry for the confusion. Both "Hello1" and "Hello2" refer to the
> company
> name.
>
> linewave.gif is a graphic file for the web that shows a jumbled
> graphic of
> the company name; it looks aesthetically pleasing and is meant for
> only
> those with "normal" web browsers. I want the webpage to look as
> clean as
> possible, so I don't want any visitor to see both linewave.gif and the
> company name ("Hello").
>
> blank.gif is a "place-holder" for the company name ("Hello"); it is
> transparent. I used it so visitors with a screenreader or Lynx will
> be able
> to "see" the name of the company ("Hello").
>
> When the page is printed, I only want "Hello" (i.e. "Hello2") to
> print but
> not the linewave.gif.
So with that clarification, then Yes, your code as originally posted
seems to me like it should do what you want. The majority of screen
readers will not "speak" content designated as display:none.
Although, depending on what other css you are specifying for those
IDs, you may not need to wrap your elements in the DIVs. You could
just have ...
<img id="logo" src="graphics/blank.gif" height="72px" alt="company
name" />
<h1 id="title">company name</h1>
ALSO, if the text version of your company name is wrapped in an H1
tag, then the image version also should be, to keep the content
structure consistent.
Having said that, it also seems like overkill to me. I assume you have
your reasons, but...
1 - I don't see a need to have your company logo as a background
image, unless you are trying to make it more difficult for someone to
download the graphic.
2 - It's hard to picture the reason for not wanting the logo to print,
but to have text instead.
So IMHO you're setting up overly complex code to solve a nonexistent
problem. Just have the logo graphic on the page as a normal inline
image, with a proper ALT value. This would also avoid the potential
problem of someone viewing the page with css OFF, and who, under your
original scenario, would see both the graphic and the text. And having
the content be readable in a normal way with css OFF is one of the
standards we set for it being accessible, here in the CSU.
-Keith
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
Proud member of D/d.U.T.R.T.W.O.C.H.S.
(Designers/developers United To Rid The Web Of "Click Here" Syndrome)