1

I am trying to find html conditional statement so that I can reference the required additional .css file. Opera, Ie8, Safari.

I am using: 

background: -moz-linear-gradient(#ADD58A, #FFFFFF);

for Firefox which is great. But having other browser css properties causes W3 css validation to fail!

I believe with html conditional statements this can be done with valid code.

Before you reply, yes I have looked at pie, i do not have the 3 green ticks of validation when using pie, hence wanting to use html conditional rather than having the browser 'drop' styles.

Renai
  • 195
  • 2
  • 3
  • 13
  • 2
    It's fine to break validation *if you know what you're doing*. The vendor prefixed properties required for gradients are a perfect example of when breaking validation does not matter. – thirtydot Oct 02 '11 at 02:45
  • @thirtydot: I kept that phrase in italics in a special part of my mind while writing my answer... and I still neglected to mention it in the end. I guess I'm in too ranty a mood this morning (!). – BoltClock Oct 02 '11 at 02:50

2 Answers2

3

The Jigsaw CSS3 validator should have an option for triggering warnings instead of errors on vendor extensions. Assuming you haven't used any other non-standard styles, your CSS should pass with a green, albeit with a few warnings, but nothing more.

As to why Daniel A. White says not to worry about validation, well, "W3C valid cross-browser CSS3" is an oxymoron. In 2011 you simply can't achieve such a thing with most CSS3 features yet.

Yes, validate your code for maximal cross-browser interoperability. But in the real world, that's only applicable to CSS2 stuff right now. When it comes to CSS3 features where the spec itself isn't yet finalized, let alone browsers' implementations (however they interpret the incomplete spec), validity doesn't make sense yet. Things like border-radius may work if you ignore less recent (I wouldn't say older) versions of most modern browsers, since the latest versions of every major browser now support the official property name, but nobody in the world has implemented the extensionless versions of any CSS gradients yet.

You can tell them to trigger only warnings in the validator, or if you're so anal that you don't even want warnings, perhaps wait until next year. Hopefully things will be stable enough and major browsers will have dropped their prefixes for CSS3 gradients.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Likewise for HTML validation: in the past 10 years (and possibly for another couple of years), the latest final version of HTML has been HTML 4; most browsers have had 10 years to stay as close to that standard as possible. HTML5 is a brand new, as yet half-finished spec, and browsers are just learning to implement it now. Validation for new technologies is not a real concern yet. – BoltClock Oct 02 '11 at 02:46
1

the -moz is a vendor specific prefix for Firefox. I wouldnt worry about the css validation.

Define the gradient with these too.

  • linear-gradient - the eventual standard
  • -o-linear-gradient - opera
  • -webkit-linear-gradient - safari/chrome
  • -ms-linear-gradient - ie
Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
  • how come you say dont worry about css validation? I thought W3 was important for standards. I guess i have to safrice for fancy gradients. Just really suprised you say don't worry about css validation. What about HTML validation? thanks anyway, going to use this way – Renai Oct 02 '11 at 01:56
  • @Renai - Vendor prefixes are valid markup and part of the spec. The validator, however, calls it out as an error. It is not invalid. – Rob Oct 02 '11 at 02:48
  • @Rob: Vendor extensions are part of the grammar (precisely why vendors can use them in the first place), but they're invalid as far as standard (i.e. official) CSS identifiers are concerned. http://www.w3.org/TR/css3-syntax/#vendor-specific – BoltClock Oct 02 '11 at 02:57
  • @Rob: Or to put it another way: vendor extensions are proposed as a "standard" way to indicate non-standard styles, but the property/selector names they're attached to invalidate in the same way `fb:like` invalidates XHTML. – BoltClock Oct 02 '11 at 03:08