HN Explorer

15 comments

[ 220 ms ] story [ 918 ms ] thread
imagii
Why not include the non-prefixed versions of these properties in the stylesheet?

It always bothers me when I see tutorials and such doing this.

wbond
It would be a huge improvement to the accessibility and semantics if the p tags were changed to label tags with for attributes.
IgorPartola
Yes, I pretty much did not read past the <p>Name:</p> point.
mr_justin
I opt for a P around both the label and the field, gives greater CSS hooks and encapsulates each form area nicely.
aarongough
That's what I generally do as well...
bkudria
Fact: you can wrap input elements in a label element. No extra for attributes required, either.
[deleted]
(comment deleted)
mr_justin
Yes but if you want to float the label and have it cleared in the next "row", that's where the separation of elements comes in handy.
mattcrest
It looks nice, but I agree with wbond. Not only should the p tags be labels, but the divs could be fieldsets to make it more semantic.
alabut
This is a nice little starter intro to CSS for forms. To be really useful, it'd have to demo some of the harder elements to style, the hardest being inputs for uploading files. I haven't seen a technique yet that doesn't require some javascript to compensate for browser quirks:

http://www.shauninman.com/archive/2007/09/10/styling_file_in...

richbradshaw
There's lots wrong here: no labels, incorrect input types for things, no required attributes even though they should be required, no vendor prefixes for newer CSS properties.

If you are writing a tutorial, remember many people will just copy and paste your code without getting it to production level.

jlangenauer
That's hardly the fault of the tutorial writer. It's incumbent on the user of the code to understand it, not anyone else.
bkudria
That's hardly the fault of the arms dealer. It's incumbent on the buyer of the faulty landmines to understand the consequences, not anyone else.
moolave
Have you heard about Sencha? Looks promising on highly-interactive CSS features for iPad and Android.
Daniel_Newby
To add to the pile-on, the highlight should follow focus, not mouse over.