Styling Forms with Attribute Selectors - Part 1

Forums » Dev.Opera » Archived Article Discussions

This topic has been closed. No new entries allowed.

Reason: You can now post comments on articles on Dev Opera

Forum rules and guidelines

You need to be logged in to post in the forums. If you do not have an account, please sign up first.

Go to last post

25. October 2007, 18:54:27

teleject

Posts: 3

Styling Forms with Attribute Selectors - Part 1

This is an exciting article, marking the first of a multiple part series by renowned CSS author Christopher Schmitt that explores modern CSS design techniques, mainly focused around implementing CSS3 techniques that gracefully degrade if browser support is not there. This particular article covers attribute selectors.

( Read the article )

7. November 2007, 17:52:02

scipio

Undutchable

Posts: 29781

Why do you use

label[for="byear"], label[for="bdate"] {
  position: absolute;
  left: -999px;
  width: 990px;
}

instead of the following?

label[for="byear"], label[for="bdate"] {
  display: none;
}

Aprendí a ser formal y cortés, cortándome el pelo una vez por mes.

7. November 2007, 20:03:38

hzr

Posts: 205

scipio, that is a trick to hide stuff <em>visibly</em>. It will still be read by screen readers though, which wouldn't be the case with your solution.

Opera Dragonfly developer / @hzr / Popup statusbar extension / CSSFrag extension

7. November 2007, 20:42:14

AyushJ

Posts: 4754

scipio, the reason is mentioned after the screenshot:

Note that typically we could remove an element like the two label elements above using the display property set to none. However, this presents an accessibility issue - almost all screenreaders would miss out the elements hidden in this fashion. So, in order to keep the content available for readers with visual impairments, set the position to absolute and move it out of the way with the left properties.

Ayush | My User-JavascriptsCool Opera Features - Simple Settings - Opera Tips & Tricks

12. November 2007, 13:41:08

scipio

Undutchable

Posts: 29781

Originally posted by AyushJ:

scipio, the reason is mentioned after the screenshot:

Originally posted by hzr:

scipio, that is a trick to hide stuff visibly. It will still be read by screen readers though, which wouldn't be the case with your solution.

Thanks for your replies, I had clearly missed that explanation.

It still looks a bit like a hack though, isn't there a more elegant way to do this?

Aprendí a ser formal y cortés, cortándome el pelo una vez por mes.

12. November 2007, 21:53:07

dAEk

Posts: 261

Originally posted by hzr:

scipio, that is a trick to hide stuff visibly. It will still be read by screen readers though, which wouldn't be the case with your solution.

Actually, labels hidden with display: none will be read by screen readers, or at least in Jaws last time I checked.

David Shamloo-Ekblad

Opera | Vibe Streamer | SongMeanings | Last.fm | Go Habs!

Forums » Dev.Opera » Archived Article Discussions

Forum jump: