HTML and CSS Reference
In-Depth Information
Chapter 6. Making Your Site Better
The nature of website design and development is such that not all optimizations and
recommendations apply in all scenarios. In this chapter, we will look at the various
optimization tools available and which situations they are best suited for, to make an
HTML5 Boilerplate site load and render faster.
Finding the best experience for Internet
Internet Explorer versions 8 and below have had very haphazard support for stand-
ards and consistent rendering. Depending on the number of users who visit your site
using Internet Explorer, you may or may not want to spend the effort optimizing for
Internet Explorer.
Mobile-first styles for IE
Media Queries are CSS features that allow you to apply different sets of rules de-
pending on the value of a particular media feature. For example, if the browser has
minimum width of 500 pixels, you could make all your h1 elements turn red , as
shown in the following code:
@media only screen and (min-width: 500px) {
h1 { color: red; }
However, IE6, IE7, and IE8 do not understand media queries that are typically used to
adjust widths according to different screen widths. As such, they will never render the
optimized styles you create for browsers with screen widths that match a certain me-
dia query break point ( min-width: 500px in the previous snippet). In our Sun and
Sand Music Festival website, we have style rules within three different media queries,
as shown in the following code snippet:
Search WWH ::

Custom Search