Creating HTML and CSS Markup - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 114

Most of this code is fairly self-explanatory, but there are a couple of rules worth noting. The box shadow only uses
the -webkit- prefix. This is because all the other browsers now support the standard box-shadow rule (even IE9), so it's
no longer required to include prefixed versions of the rule to make it work. In fact, the -webkit- prefix is only required
to add support for older versions of Safari, iOS, and Android. Because it's not uncommon to see older versions of iOS
and Android, though, it's a good idea to keep this rule.
The box-shadow rule also uses rgba , which is new as of CSS3. This allows you to set the alpha—or opacity—of a
color. The RGB values used match the site's dark color.
Finally, a trick that solves the need for “clearfixes”: set the containing element to overflow: hidden and it
will grow to contain floated elements. This works on all browsers, so it's a very simple trick to eliminate a lot of
non-semantic elements. This trick is used on the footer elements to force the <footer> element to properly apply
padding around the floated <li> elements.
Reload your browser to see the completed header and footer (see Figure 7-6 ).
Figure 7-6. The styled header and footer
Making the Header and Footer Responsive
The final step of completing the header and footer is to add media queries that will adjust their display on tablets and
handheld devices.
Rather than doing anything fancy, such as checking for device orientation or pixel density, you're simply going
to be adjusting the layout based on the viewport width. The reason for this approach is that nothing fancy needs to
happen on smaller screens; the layout simply needs to readjust a bit to fit within the provided screen real estate.
In the interest of simplicity, there will only be two adjustments made to the layout: devices under 960px wide
(tablets) and devices under 768px wide (handheld devices).
For the header, all that needs to change is the font size and maximum width of the elements. Changing the
padding helps keep the layout from looking too spacious.
The footer needs the same adjustments. In addition, it also needs the float turned off for the list elements so they
can be centered.