I’m getting several validation errors on a stylesheet that uses the “* star hack” for IE7 settings as well as vendor specific prefixes (-moz and -webkit).
For example: “Property border-radius doesn’t exist in CSS level 2.1 but exists in : 15px 15px 0 0 15px 15px 0 0”
Should I be concerned with these or is there a more valid way to represent these types of CSS settings?
The star hack is valid and will pass validation.
Either * html {} for ie6 or *+html for ie7 will pass validation as they use valid properties. It’s just that they shouldn’t match any elements in the document but ie6/7 think they do. They are 100% valid.
If you are getting errors then there is some other reason for them.
as well as vendor specific prefixes (-moz and -webkit).
Vendor prefixes follow a valid construct but will not validate because the validator can’t possibly know about things that haven’t been invented yet. There’s a reason that they are pre-fixed and that’s because they are experimental and in a state of flux. That doesn’t mean you can’t use them but it does mean that you have to take care. They will never validate although there was talk of allowing them some sort of validation status but I don’t reallly see that happening.
For example: “Property border-radius doesn’t exist in CSS level 2.1 but exists in : 15px 15px 0 0 15px 15px 0 0”
border-radius will validate but you need to select the css3 option.
Should I be concerned with these or is there a more valid way to represent these types of CSS settings?
You shouldn’t be concerned as validation is a means to an end and not just a badge that you get. As long as you know why and what and the consequences are you can just skip the errors and look at the real errors.
Some vendor prefixes are entirely experimental and should be avoided in a production environment but things like border-radius have been a round a while and browsers have all settled on the same rules so are safe to use. Indeed the original w3c specification was changed to fall in line with the more sensible moz prefix version.
Just be selective with what you use.
Thanks Paul, your explanation makes perfect sense. By “star hack” I think I’m using the term wrong. I’m actually using inline values for IE7 (not *html{})
Example:
div {width:12px; *width:14px; line-height:1em; *line-height:1.5em;}
I’m targeting IE7 with the inline star hack (or whatever the proper name is for it) and it does not validate.
I was also a bit puzzled that “0” cannot be used as a value for “box-shadow”. Validator requires a unit of measurement with zero!!! 0px
Ok, yes that’s not valid and I never use it. However it does have the benefit of not adding more specificity to the rule unlike * html. There are many invalid hacks like that but keeping track of which browsers apply them is a nightmare so I just use * html and *+html. If I ever need to target IE8 then I would use conditional comments but seldom need to do that.
As long as you have grabbed the right hack and know what its for then you can choose to use it as long as you know who and why. The problem is when you come back later and you have mixed the hacks and can’t remember who you are targetting.
I was also a bit puzzled that “0” cannot be used as a value for “box-shadow”. Validator requires a unit of measurement with zero!!! 0px
There are acouple of oddities like that - I’m not 100% sure of the reasoning there though
I would use conditional CSS on IE7 and IE8, that way when the time comes to drop support for them, you can just dump the stylesheets and remove the comment from the markup, without having to go pick through your main CSS sheet to remove outdated code.
Yes that’s one of the great plus points for CCs.
The downside is having to maintain multiple stylesheets but as long as you don’t over-use them them then I don’t really see a problem with them. There are overheads in loading extra files but of course that is only for the errand browser concerned so is no great loss. There can also be cascade issues due to the IE styles being parsed last with items of equal weight. However, they can all be managed and of course as you say the whole stylesheet can be dropped once the browser has died (or just not maintain the stylesheet anymore).
Yes, and not only that, any time I have used CCs, the code has been very minimal, not really much to update at all. I guess for a very large site it could get more complex, but I find the positives outweigh the negative.
The converse argument to CCs, and in favor of using the star hack (*+ html) is that you can easily go through your stylesheet and scan for each *+html line and remove them, just as easily as you would remove the CC’s.
I don’t see more or less work either way to remove them, but I do see more work on the front end to implement and maintain CCs as opposed to *+html directives in the sheet itself.
Just my .02
I guess it depends on the person. Anything I can do to minimize any kind of snafu, like accidental deletions and typos within my main CSS sheet, I like. Maybe that is because I am mistake prone. So if I can just dump the whole outdated stylesheet, that means I don’t even need to enter my regular CSS sheet. Just cut off the outdated appendage and be done with it.