6 replies [Last post]
Kreativity
Offline
Regular
Last seen: 5 years 30 weeks ago
Timezone: GMT+2
Joined: 2011-11-17
Posts: 14
Points: 19

W3C doesn't want to accept my CSS3 & @keyframes?

Sorry! We found the following errors (22)
URI : kreative.css
85 	.windmill 	Property -webkit-animation-name doesn't exist : rotate
86 	.windmill 	Property -webkit-animation-duration doesn't exist : 1.5s
87 	.windmill 	Property -webkit-animation-iteration-count doesn't exist : infinite
88 	.windmill 	Property -webkit-transition-timing-function doesn't exist : linear
89 	.windmill 	Property -moz-animation-name doesn't exist : firefox
90 	.windmill 	Property -moz-animation-duration doesn't exist : 1.5s
91 	.windmill 	Property -moz-animation-iteration-count doesn't exist : infinite
92 	.windmill 	Property -moz--transition-timing-function doesn't exist : linear
95 		Sorry, the at-rule @-webkit-keyframes is not implemented.
100 		Sorry, the at-rule @-moz-keyframes is not implemented.
163 	.clouds 	Property -webkit-animation doesn't exist : movingcloud 15s infinite
164 	.clouds 	Property -moz-animation doesn't exist : movingcloud 15s infinite
165 	.clouds 	Property animation doesn't exist : movingcloud 15s infinite
166 	.clouds 	Property -ms-animation doesn't exist : movingcloud 15s infinite
167 	.clouds 	Property animation-direction doesn't exist : alternate
168 	.clouds 	Property -webkit-animation-direction doesn't exist : alternate
169 	.clouds 	Property -moz-animation-direction doesn't exist : alternate
170 	.clouds 	Property -ms-animation-direction doesn't exist : alternate
173 		Sorry, the at-rule @-webkit-keyframes is not implemented.
178 		Sorry, the at-rule @keyframes is not implemented.
183 		Sorry, the at-rule @-moz-keyframes is not implemented.
188 		Sorry, the at-rule @-ms-keyframes is not implemented. 

Here is my code for moving clouds:

.clouds {
	background: url(../images/clouds.png) no-repeat left top;
	width: 124px;
	height: 27px;
	position:absolute;
	margin-left:-5px;
	-webkit-animation:movingcloud 15s infinite;
	-moz-animation:movingcloud 15s infinite;
	animation:movingcloud 15s infinite;
	-ms-animation:movingcloud 15s infinite;
	animation-direction:alternate; /* Opera */
	-webkit-animation-direction:alternate; /* Safari and Chrome */ 
	-moz-animation-direction:alternate; /* Firefox */
	-ms-animation-direction:alternate; /* IE 9 */
}
 
@-webkit-keyframes movingcloud {
	from{left:55%;}
	to{left:47%;}
}
 
@keyframes movingcloud {
	from{left:55%;}
	to{left:47%;}
}
 
@-moz-keyframes movingcloud {
	from{left:55%;}
	to{left:47%;}
}
 
@-ms-keyframes movingcloud {
	from{left:55%;}
	to{left:47%;}
}

What do I need to fix to make sure W3C Validates the code?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 43 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9630
Points: 3698

Given that the proprietary

Given that the proprietary properties and values will never validate ….

The -vendorID- format is valid, but the validator has no way of certifying it, since the proprietary property/values are not a part of the specification. You can specify css3, by selecting the options menu at the validator. In FF's webdev addon, go to tools, edit tools and add http://jigsaw.w3.org/css-validator/validator?profile=css3 to the configuration.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Kreativity
Offline
Regular
Last seen: 5 years 30 weeks ago
Timezone: GMT+2
Joined: 2011-11-17
Posts: 14
Points: 19

Better layout

Is there not a better way to layout my CSS3?

Kreativity
Offline
Regular
Last seen: 5 years 30 weeks ago
Timezone: GMT+2
Joined: 2011-11-17
Posts: 14
Points: 19

Kreativity wrote: Is there

Kreativity wrote:

Is there not a better way to layout my CSS3?

Or rather to make sure it validates properly. How do i detect browsers or features? e.g. so if its firefox then,
".cloud" div class must have this code or if its opera then the ".cloud" code must have this etc etc.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 43 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9630
Points: 3698

Validation is a tool. It is

Validation is a tool. It is not a goal. It is for catching syntax errors. It is for you to determine whether to worry about the error or not.

The animations module is in working draft status.

Quote:

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

Emphasis added.

It would be foolish for vendors to implement a module that is likely incomplete and certain to be modified in ways that would affect that implementation. That is why we have the -[vendor]- prefix. It's a temporary implementation until the dust settles.

If your client is insisting on a validation button, you'll have to explain why that's not possible. Using css3 is a progressive enhancement; in this case from both sides. Older browsers won't support css3 animations, and css3 won't validate the proprietary prefix that allows for working draft properties that are not a part of the specification yet.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Kreativity
Offline
Regular
Last seen: 5 years 30 weeks ago
Timezone: GMT+2
Joined: 2011-11-17
Posts: 14
Points: 19

Thanks Alot

Thanks alot buddy, you have been a major help!

You seem like you are a pro at this. Could you please look at my site and tell me why there is a space being forced at the top right of the logo, above the windmill and menu etc, its like a 5px spacing. I have checked and cant figure it out. It only happened recently and cant re-track what i did.

http://www.kyleknight.co.za/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 43 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9630
Points: 3698

There is this,.register {

There is this,

.register {
    font-family: "Courier New",Courier,monospace;
    font-size: 12px;
    margin-top: 10px;
}

But that doesn't explain it, so there is something else involved.

Rather than appending to this thread, start a new topic, lest others skip over the current problem.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.