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
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
Search WWH ::

Custom Search