Best Practices - Web Standards: Mastering HTML5, CSS3, and XML - page 428

Since 62.5 percent of the 16px default size used by many user agent style sheets is 10px, the previous rule makes
the font size of the paragraphs styled by the rule in Listing 13-3 be 12 pixels because 1.2·10 = 12px.

Listing 13-3. Font Size Easily Calculated Using the Rutter Method

p {
font-size: 1.2em;
}

■ Caution although widely implemented, this value is not completely reliable and might be different in some browsers.

Although em -based sizing could be used to ensure readable font sizes on any screen, this approach has a known
issue. If the user changes the default font size or applies zooming in the browser, the text might become unreadable.
On the other hand, font sizes set in pixels are robust in different environments but not proportional to other elements
and the screen. The larger the resolution, the smaller the font size. Moreover, the built-in text zoom of browsers
cannot be used in all cases for content with pixel-based font sizes.

■ Because of the differences between browsers, font sizing on the Web is challenging. absolute positioned
content is not scaled uniformly in all cases by the magnifier feature in ie7+ (sometimes they are scaled smaller).
ie supports both zooming and text size changes for fonts set with % , em , or named sizes. Firefox 3+ supports both
zooming and text size changes. Opera 9+ also has a zooming feature. Zooming might give different results under
different browsers, depending on the content and the styles associated with the page.

Note

Embedding External Content Properly
Since the Web is a truly full multimedia platform, web pages often have embedded video clips, interactive objects, and
other external components. Because of the incorrect embedding codes provided by the content resources, however,
additional tasks are required in many cases to make them standard-compliant. Moreover, standardization cannot
be performed sometimes because of the inadequate code provided along with the embedding code. Even if web
developers standardize the invalid embedding code, they cannot correct the associated namespaces, scripts, and
other components. A good example is the classic “Like” box of Facebook 2 . The namespace and vocabulary provided
with the embedding code generated in the developers' section on Facebook.com are not consistent. One of the
“solutions” developers use on the Web is to add the incorrect markup section to a JavaScript function such as the one
in Listing 13-4, which writes the markup fragment delimited by apostrophes into the (X)HTML source. 3

Listing 13-4. A Widely Used Trick to Embed Invalid Code

document.write(' <script src=" http://connect.facebook.net/en_US/all.js#xfbml=1 " ></script> 
<fb:like-box href="http://www.facebook.com/pages/Your-page/122946805997761" width="280" 
show_faces="true" stream="false" header="false"></fb:like-box> ');

2 Fortunately, Facebook provides a valid HTML5 embedding code for “Like” buttons and boxes since fall 2011. However, the
classic embedding code is still used on many websites.
3 Assuming that JavaScript is enabled.