CSS3 and Selectors

I want to point out what I think has been a shortfall of CSS selectors for some time. 

One of the things you often see is people use graphics for links. However, this can be annoying for people who turn off graphics (for instance) or who use various assistive technologies. Text is, generally, more useful than graphics. 

Its one of the things that people point out about text in SVG. 

I have had it on a number of occasions where I may need to have either a text or a graphical representation for a link(say for TTY and Screen media). In almost every case I either do the following:

@media screen{
 a .text{display:none;}
 a img{display:inline;}
}

@media tty,audio{
 a img{display:none;}
 a .text{display:inline;}
}

<a href="#"><span class="text">This is a link</span><img src="/img/thisisalink.gif" alt="This is a link" /></a>

OR

@media screen{
 a .text{display:none;}
 a {height:20px; width:200px; background-image:url(/img/thisisalink.gif);
}

@media tty,audio{
 a .text{display:inline;}
}

<a href="#"><span class="text">This is a link</span></a>


This works fine. However, either way, I'm including information that is not strictly meaningful. The <span class="text"> conveys no additional information. 


What I would like to be able to do is something like:


@media screen{
 a::text{display:none;}
 a {height:20px; width:200px; background-image:url(/img/thisisalink.gif);
}

@media tty,audio{
 a::text{display:inline;}
}

<a href="#">This is a link</a>

It seems (to me) to be a whole lot cleaner since I don't need to add extra markup.

Just a thought


__________________________________________________
D O T E A S Y - "Join the web hosting revolution!"
             http://www.doteasy.com

Received on Friday, 6 September 2002 12:43:01 UTC