Monthly Archives: August 2010

Using dl for a Semantic Form

Posted Friday, August 13th, 2010 05:00 am GMT +8 | HTML |

Wufoo's login form

Wufoo’s login form Semantics in forms are one of the things that needs to be talked about, in my opinion, since they are one of the most important parts of a web site. You create/edit user accounts, create/edit blog posts, submit a comment, gather information from your audience, and lots more through them. However, apart from fieldset, we don’t really have a semantic way of marking up a pair of form elements. There are different ways in marking up one’s form: div, p, ul or ol and dl. Because using dl, or definition list, to mark up a form is still unusual even though it’s not exactly a new idea, I will be talking and boring you, unfortunate people, about it here. Understanding the dl element dl is one of the most overlooked element in HTML since, I assume, people mostly associate it with just definition lists, aka glossary. But … Continue reading →

The CSS3 Carousel Experiment

Posted Friday, August 6th, 2010 05:17 pm GMT +8 | CSS |

Screen shot 2011-06-18 at 9.58.55 PM

When I first read about CSS Animation, I thought that they shouldn’t be messing with the separation of logic and style. In my mind, it should be clear that logic (animation, rotation, even the alternating row styles) should be in javascript, all the styles should be in CSS, and the document structure in HTML. One time, while working on our internal project, I thought I’d try a little -webkit-transition-duration because I wanted the color of the links to gradually change to something else on hover. But when I hovered on our main navigation that was using a sprite image, the background scrolled from one background position to the next every time we hover on it because of the delay! It was really amusing. CSS3 Carousel I experimented a little bit with transition and descendant selectors, but apparently, p ~ p doesn’t work with :hover or :active or :focus very well … Continue reading →