Web Development

Archive for the ‘web development’ Category

Recently I had submitted my CSS for a review. One of the feedback suggested that I get rid of multiple ID attributes in a rule. I had several selectors as below in my CSS.

#grandparent #parent #child{/* property values */}

Since IDs are unique in a document it makes little sense to use ID attributes in a descendant selector. Well, sounds true. When something is unique why would you need to qualify it with something else. I was wondering why would the CSS specification asks to add up the number of id attributes to decide the specificity of a rule.There is one use that I can think of. Consider an application wherein you serve a default theme to the user (Not necessarily an end-user. Could be some other application). The user can customize your default theme. And to add to it the customization should be source order agnostic, it takes precedence irrespective of whether it appears before or after the default theme.One strategy to achieve this is to design your default theme with moderate specificity. For e.g.

#child{}

Now the user can add more id attributes to the rule to increase the precedence of the custom stylesheet. 

#parent #child{}

Above rule takes precedence irrespective of whether it is above or below the default stylesheet.Well, this could be achieved in different ways. We can increase specificity in several ways but this seems to be the safest/surest way (barring ‘style’ and ‘!important’) for such scenarios mainly because id attribute values are unique. So the users can override the rule more precisely without side-effects. 

Tags:

We have a layer, say an unordered list with links in it. We want to hide/show the layer. We can hide the layer by attaching a handler to mouse out event of the layer. However this doesn’t work as expected. Because of event bubbling and the way browsers implement this event, mouse out event is fired whenever mouse moves from the layer to a link within it (even though the mouse pointer is still inside the layer). This might cause flickering of the layer based on the implementation. One way out of this issue is to check on mouse out if the ‘related target’ element is the child of layer. If yes, do nothing else hide the layer. Related target is the element to which the mouse moves. None of the links within the ‘ul’ will qualify for the mouse out event handler but when the focus moves out of ‘ul’ to its parent the handler is invoked.

quirksmode has a detailed article on mouse events and the intricacies of the above mentioned issue.