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.
