HTML and CSS Reference
In-Depth Information
• The box-sizing property in input[type=”text”],input[type=”email”]
• The transform property added to several of the .sidebar elements
• The transform , transform-origin , and transition properties added to the .banner-ad
rule set
None of these modifications require your action. However, Prefixr slightly tampers with the content declara-
tions in the blockquote p:before and blockquote p:after rule sets. The content properties
originally have the values “\201C” and “\201D” , but Prefixr strips out the backslashes, so you need to
add them back in.
5. In blockquote p:before , add a backslash inside the quotation marks:
content: “\201C”;
6. In blockquote p:after , add a backslash inside the quotation marks:
content: “\201D”;
Finally, because Prefixr also strips out some of the prefixed border-image properties in the #footer rule
set, add those back in.
7. In the #footer rule set, below the -moz-border-image declaration, add the following:
-ms-border-image: url(“../images/bdr-footer.png”) 4 repeat;
-o-border-image: url(“../images/bdr-footer.png”) 4 repeat;
8. Save styles.css.
All in all, when you run a stylesheet through Prefixr, you need to do a little work to tidy things up afterward, but
overall you save some time and, most importantly, your sanity. Writing those prefixed properties isn't fun!
Testing Modern Browsers
Now that you've prefixed all the necessary CSS3 properties, how do those changes help with the cross browser com-
patibility of Cool Shoes & Socks?
When testing cross browser compatibility, look for visual issues, but also test the functionality of the page. Hover
over the drop-down menus and other elements with :hover rules, make sure the showcase animation runs cor-
rectly, and also resize your browser to make sure everything scales correctly.
Firefox 13 and Safari 5
Now the stylesheet contains the necessary prefixed properties, and due to modern browsers all closely supporting the
CSS specifications, achieving browser consistency isn't particularly hard. In Figure 15-3, you can see that Firefox
now displays the page just as Chrome does. Safari 5 also renders the page just as Chrome and Firefox do.
Search WWH ::

Custom Search