Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The code you've posted is very much incomplete, but there are quite a few things that aren't ok.</p> <ul> <li>You should <strong>always</strong> write the <strong>unprefixed</strong> versions <strong>last</strong>, never before the prefixed ones.</li> <li><code>-ms-border-radius</code> and <code>-o-border-radius</code> <strong><em>never existed</em></strong>! And unless you need to support FF3.6, <code>-moz-border-radius</code> is useless. <code>-webkit-border-radius</code> is pretty much useless these days too - see <a href="http://caniuse.com/#feat=border-radius" rel="nofollow">http://caniuse.com/#feat=border-radius</a></li> <li>Firefox 16+ (current version is 19) supports unprefixed keyframe animations! See <a href="http://caniuse.com/css-animation" rel="nofollow">http://caniuse.com/css-animation</a></li> <li><code>0s</code>, not <code>0</code>! Plus the default value for the delay happens to be <code>0s</code> anyway so you can omit it and just write <code>animation: sunrise 3.2s infinite alternate;</code> (the same way you can omit <code>ease</code>, which is the initial value for the timing function)</li> <li><code>background: rgba(255,255,204,0)</code>, not <code>background: ''</code>!</li> </ul> <p>And a question: why use such a huge <code>border-radius</code>? My laptop screen is much smaller than anything that would require such a huge <code>border-radius</code>. If you just to make a disc, give your element equal <code>width</code> and <code>height</code> and set <code>border-radius: 50%</code>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload