-1

I know that there are many posts like that, but i realy can't find an answer that solves my problem.

I really want to get my CSS 3.0 validated and I don't know how to do it especially with those parse error on the begining. I have checked for any invisible characters but didn't find any.

So my problem is what can be the reason for those parse error?

Also I do understand that if i want to provide the compatibility for browsers i can't get rid of this error:
Sorry, the at-rule @-moz-keyframes is not implemented.

Here is the link to validator results and my css

EDIT: Thank you all for your answers regarding the "at-rule" but it was almost retoric question on which I had found the answer earlier, but wanted to be sure if anything has changed. Also the thing that rest of the vendor extensions are only warnings and those 6 (now 2) are errors.

But the main question was about the parse error which I don't know how to remove and why it is there.

EDIT SOLUTION:

Yours answers and little bit of testing led me to the final answer:
- The vendor extensions are only warnings, but not in case of keyframes (i think that this feature is to new).
- The parse error was only because of the above conclusion (keyframes extension).
- I have also used for the @-webkit-keyframes the solution given by Kami and placed all animations in separate vendor.css which i have linked to the html with help of the javaScript.

Now everything is validating as it should be.

Slawowid
  • 43
  • 8
  • It's not a parse error, just a notice that you are using non-standard CSS properties. – Wesley Murch Apr 03 '14 at 08:41
  • If the validator is able to detect unknown at-rules, then it can't be a parse error. – BoltClock Apr 03 '14 at 08:43
  • The question is about two issues, “parse error” messages and vendor extensions. The first one is asked without any real facts, still less code that reproduces it (the links in the question don’t); the second one is a duplicate and characterized as “almost retoric”. Please ask separate questions separately, ask rhetoric questions elsewhere, and provide relevant code in the question itself. – Jukka K. Korpela Apr 03 '14 at 10:16

2 Answers2

1

Firefox uses no prefix version, use simply @keyframes for firefox, but still -webkit- for chrome, safari and opera. Take a look at usability @caniuse.com.

  • Thank you very much for [CanIUse](http://caniuse.com) -moz-, -o-, and -ms- extensions are already removed. But please help me with the Parse error. – Slawowid Apr 03 '14 at 09:55
1

@-moz-keyframes, @-webkit-keyframes are proprietary CSS features implemented by the browser vendors (Side note: -moz, -webkit- are known as vendor prefixes.) They're so new, that they haven't been officially incorporated into the W3 CSS3 specification. That's why the validator is giving you such error- it doesn't know about @-____-keyframes yet. In the future from the time of this post, perhaps there will be official @keyframes support.

geoff
  • 2,251
  • 1
  • 19
  • 34
  • While vendor prefixes are indeed never valid CSS because they are proprietary, the `@keyframes` at-rule is not "new" http://www.w3.org/TR/css3-animations – BoltClock Apr 03 '14 at 08:41