What would be the implied specificity of the following style applied, if any:
<iframe src="..." height="300" width="500"></iframe>
Does it still get specificity = 1,0,0,0 and override any other style applied? How would that work together with proper inline styles, i.e. which would take precedence:
<iframe src="..." height="300" width="500" style="height:150px;width:600px;"></iframe>
Did browsers agree to prefer style="" declarations over invalid ones, or is there something else going on?
NB: I'm simply curious about the mechanics of selecting the correct styles to be applied in this scenario, but do not advocate such declarations.
The specificity of CSS rules to which presentational HTML attributes may be mapped is zero (0), according to the last section on the page you referred to, Precedence of non-CSS presentational hints. Thus, settings in the real style sheet of a page override such attributes, e.g. style="height:150px;width:600px;" wins the height and width attributes.
This does not depend on the validity of the attributes. Validity is a formal thing and does not affect browser behavior. Even if you declare a Strict doctype, browsers will still honor those presentational attributes that they recognize. (There is no specification on this. It’s just how things work.)
P.S. The example in the section may look odd. Why doesn’t font[color] { color: orange; } in a user style sheet affect font elements with color attributes in HTML documents? The reason is that the attributes are translated to CSS rules in the author (page) style sheet, and (in the absence of !important) anything in an author style sheet wins a user style sheet. But font[color] { color: orange; } in an author style sheet would override the color set in markup like <font color=red>.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With