Back in March I wrote about HTML5 Form validation and the problem with the appearance of error messages. I proposed a syntax for styling the error messages, and shortly after I published the post, I submitted the proposal to the W3C via the www-style mailing list.
I’ll discuss quickly the result of that submission, but first I should mention that I’ve since found out that the Google Chrome developers have already implemented their own syntax, and it’s not too far removed from what I proposed. Before I get to that, however, allow me to gripe.
What the feedback on my proposal would be, I have no idea — and may never know. As I mentioned, I submitted it via the www-style list, but my emails were never published. I was told that as a new user my mail would be held for approval, but that was six weeks ago. I emailed the list administrator and tried to submit it again, but never got a reply.
I have to say that, as a developer trying to get involved in the standards process — which is what the W3C claim they want — this was not a good experience for me. I had a serious proposal which I wanted to open up for discussion, but was completely unable to do so and met with a wall of silence. I’m not against there being a moderation and approval process, but only if there’s an eventual result and some kind of communication throughout.
OK, with the moan out of the way, I’ll talk about the Chrome validation error styling syntax. The error message, known as the ‘bubble’, is made of four div elements which are accessible via four pseudo-classes, each of which applies to a different div in the bubble:
::-webkit-validation-bubble {}
::-webkit-validation-bubble-arrow-clipper {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-message {}
The parent element is ::-webkit-validation-bubble, which sets the size and position of the bubble, and has two child elements. The first child is ::-webkit-validation-bubble-arrow-clipper, which has its own child, ::-webkit-validation-bubble-arrow; these two set the styles of the tail of the bubble. The body of the bubble is the second child, ::-webkit-validation-bubble-message, which contains the text node with the error itself.
I’ve made a quick example which you can see in action on the HTML5 Forms demo — you’ll need to use Chrome to see it, and you can view the source to see the styles I’ve used. Below is an image comparison of the default message (top) and my styled version. Note: I took a little criticism for calling the default styles ‘ugly’ in my original post, and I don’t want to claim that mine is any better, because it’s really not; it’s just different, to act as an example.
Image may be NSFW.
Clik here to view.
You can read a little more about this syntax on the WebKit wiki, and also see the default styles the error message uses. I’ve no idea if Firefox or Opera implement their error messages in the same way so don’t know if this is likely to become standard, or will always remain a WebKit-only syntax. I have to say it’s not really an elegant solution, but it works.
