What does this CSS do?

Question

input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}

This is from the YUI reset css. What does the * before font-size:100% do?

Answer 1

This is an IE hack. The second line is only correctly parsed and executed by IE 7 and below. See http://www.webdevout.net/css-hacks#unrecommended-asterisk_prefix for more information.

Edit: One remark on using such (invalid!) CSS: please don't. There are plenty of ways of keeping your CSS clean of such mess. You'll never know what behavior IE9 might bring. Better to put these kind of hacks in a separate CSS file which can then be included through conditional comments.

Answer 2

I think it's a hack to make that definition only apply to IE 7 or less while being ignored by other browser as an asterisk is not a legal character before an attribute name.

Answer 3

To be more precise: IE6/7 doesn't support font-size: inherit. This hack is supposed to achieve the goal anyway.

Answer 4

As already told, those are hack to target specific browsers. Marc's suggestion is quiet right, and here's a link to give you an kick start:

http://www.webdevout.net/css-hacks