HTML and CSS Reference
In-Depth Information
border: #ccc solid 1px;
-webkit-box-shadow: 0 3px 8px 0 #ccc;
box-shadow: 0 3px 8px 0 #ccc;
padding: 2.5em;
-webkit-perspective: 1000px;
}
In Chapter 5, you added the
box-shadow
declaration to this
#main
rule set. As you can see, Prefixr auto-
matically adds the prefixed
-webkit-box-shadow
declaration for you. You can use the
box-shadow
property in all modern browsers without a prefix, but some mobile browsers that use the WebKit layout en-
gine still require the prefixed property, so Prefixr adds it.
Prefixr unfortunately doesn't automatically prefix the
perspective
property, so you can do that manually.
2.
After the
-webkit-perspective: 1000px;
declaration, add the following:
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
3.
Save styles.css.
Note that just as Prefixr does, you should always place the official, nonprefixed property below the prefixed
versions; that way, the official property will be used over the unofficial properties as soon as a browser sup-
ports it.
The next rule set that Prefixr works its magic on is
.showcase .button
. As you can see, this tool takes
the work out of having to write the gradient applied to the showcase button:
background: -webkit-linear-gradient(top, #FB3876 0%, #d4326d 100%);
background: -moz-linear-gradient(top, #FB3876 0%, #d4326d 100%);
background: -o-linear-gradient(top, #FB3876 0%, #d4326d 100%);
background: -ms-linear-gradient(top, #FB3876 0%, #d4326d 100%);
background: linear-gradient(top, #FB3876 0%, #d4326d 100%);
No action is required here, but I'm sure you'll agree, not having to write out all these properties with the heavy
syntax of
linear-gradient()
is a timesaver.
Just below the
.showcase .button
rule set, you see the
@keyframes
rules. Prefixr takes the
@-
webkit-keyframes
rule and makes one for each browser, including a nonprefixed
@keyframes
rule.
Unlike other rule sets, the keyframes rules are only referenced, so their position within a stylesheet isn't es-
sential. Prefixr chooses to place the official
@keyframes
rule above the prefixed versions, which isn't a
problem.
As mentioned in Chapter 5, when you use the
opacity
property—which isn't supported by Internet Explorer
versions 6, 7, and 8—Prefixr automatically adds the
filter
property, which emulates
opacity
. You
used
opacity
in the
@keyframes
rules, but because old versions of Internet Explorer don't understand
@keyframes
anyway, the
filter
property can safely be removed. The
filter
properties don't actu-
ally cause any harm if they remain in the stylesheet, so this step is optional, but always trying to keep your
stylesheets as clean as possible is good practice.
4.
Remove any instance of the
filter
and
-ms-filter
properties from styles.css.
As you make your way through the stylesheet, you see that Prefixr prefixes many more properties too:
• The
.showcase li
animations from the preceding chapter