[uf-discuss] Question about telephone numbers

Paul Wilkins paul_wilkins at xtra.co.nz
Thu Jun 21 14:36:58 PDT 2007


From: "Rickards, Julian (NDM)" <julian.rickards at ontario.ca>
> Last night, I came up with two ideas.
>
>  1.  Using the code, <span class="type hidden">Work</span>, I could
> create CSS to hide the contents of the hidden class. It doesn't get me
> around needing to add "Work" to every phone number but it does hide it
> from sighted users (with CSS-capable browsers).

This first idea is usually considered bad as it's hiding information. 
Personally though I like the idea of using css to adjust the presentation of 
the information.

I wouldn't go with the hidden class though, as that is a presentational 
name, rather than a semantic one.

If you want the type of all of the numbers to be hidden, you could easily 
use
CSS:
.vcard .type {display: hidden}
HTML:
<div class="vcard">
<p class="tel">
    <abbr class="type" value="work">Work: </abbr>
    <span class="value">123-4567</span>
</p>
</div>

>  2.  What about using the title attribute to indicate phone type such
> as <span class="tel" title="work">1-234-567-8901</span>?

That would normally be a great idea, but IE is too thick to understand 
attribute selectors.
The title attribute isn't workable with mifroformats either, unless it is as 
the abbr tag, as that's the only element in which information is stored from 
the title attribute.

If some of the numbers are work numbers, you could use a class called 
work-number and use css to hide just the type. The class isn't placed with 
the tel class, to allow the possibility of having non-work numbers also 
displayed.
CSS:
.work-number {display: hidden}
HTML:
<p class="tel">
    <abbr class="type work-number" value="work">Work: </abbr>
    <span class="value">123-4567</span>
</p>

It's a shame that IE doesn't understand type selectors, because we should be 
using something as simple as this.
CSS:
.type[title=work] {display: hidden}
HTML:
<p class="tel">
    <abbr class="type" value="work">Work: </abbr>
    <span class="value">123-4567</span>
</p>

-- 
Paul Wilkins 



More information about the microformats-discuss mailing list