Thursday, November 15, 2012

A tip for relatively sized Html input elements using `em` units

And why I use Yahoo! (YUI3) Reset CSS Now

For better or worse when doing front end development I prefer to use percentages and em as the unit of size when styling. This approach could be a bit tricky but with proper experience and the use of css screen size conditionals does allow for one rendering base for multiple screen sizes.

As base I set px font-size only on the <body> html element and then afterwards use em to style all other elements; of course using pixel based units where it makes sense. This allows for example the quick changing of the font-size just on the body tag and having all the header resize accordingly.

One annoyance that I experienced was that input radio and check buttons didn't honour the font-size of the body and I always just worked around the issue by explicitly styling the input radio or checkbox buttons height to a em value that made it look good.

However, today by pure accident I discovered that adding font-size: inherit to the input styling fixed the problem: the height of the element is the font-size of the body element which equates to a proper effective 1em.

This to me is something that should be in a reset style, but the Eric Meyer's reset style sheet at that I have been using for years dosen't have it. After reviewing all the other options at CSS Reset site the only one that addressed this issue is the Yahoo! YUI 3 Reset Sheet – and so with confidence that is the one I use now.