Using CSS

 

Related Specification Main Reason Applies to
CR status CSS modules, CSS Web Engine Change webOS TV v2.0 and earlier

A Single Code that Works for All

To make sure that your app is compatible with all versions of webOS TV, put both the prefixed and unprefixed flags in your css code as below:

div {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-name: myMove;
    animation-name: myMove;
}

@-webkit-keyframes myMove { /* styles */ }
@keyframes myMove { /* styles */ }

Why use this code? 

If you have used the following CSS code according to the latest W3C guidelines, you have probably found that it does not work on webOS TV v2.0  or earlier:

div {
    animation-duration: 4s;
    animation-name: myMove;
}

@keyframes myMove { /* styles */ }

 

Some CSS modules including Transforms, Transitions, and Animation were in Candidate Recommendation (CR) state before webOS TV v3.0. At that time, it was guided to implement these CSS modules with a prefix (e.g. -webkit-xxx). However, as their maturity level of the recommendation track has increased, W3C has updated its document and advises to drop the vendor prefixes (standard for Blink). To cope with this change, you need to code in a way that works for all webOS TV versions. Refer to the top of the page for the sample code.

 

Navigation