Chapter 7 More on Links, Layout, and Mobile
Now that you've had some experience coding HTML and CSS, you're ready to explore a variety of techniques in this chapter, including relative hyperlinks and named fragment hyperlinks, CSS sprites, three-column page layout, styling for print, styling for mobile browsers, configuring CSS3 media queries to target mobile devices, and exploring the new CSS3 Flexbox layout model.
CSS pseudo-classes are used in combination with background images to configure image "rollovers". When using CSS Sprites, you take this a step further: combine all multiple background images in one file and use positioning properties to display the appropriate image. See the following tutorials for an introduction to this popular technique
Web-based sprite generators can help you get up and running with CSS Sprites quickly:
Responsive Web Design and CSS Media Queries
- Ethan Marcotte's Responsive Web Design Article
- Return of the Mobile Stylesheet
- Media Queries Examples
- W3C CSS3 Media Queries
- Sample Media Queries
Designing for the Mobile Web
- JCPenny and JCPenny Mobile Site
- White House and White House Mobile Site
- W3C Mobile Web Initiative
- W3C Mobile Web Best Practices (MWBP 1.0)
- Flip Carts for MWBP 1.0
- Mobile First
- Mobile Web Development
- Mobile First Helps with Big Issues
- Opera Mini: Web Content Authoring Guidelines
Testing Mobile Display
- Opera Mobile Emulator (Windows Only download and install)
- Mobilizer (Windows and Mac download and install -- free seven day trail)
- Web-Based Opera Mini 6 Simulator (Runs in a browser window)
- iPhone Emulator (Runs in a browser window)
- iPhoney (Mac only download and install)
- iOS SDK (Mac only)
- Android SDK
Responsive Images and the New Picture Element
Exploring CSS3 & HTML5
Adobe's new resource site, http://theexpressiveweb.com, showcases new HTML5 & CSS3 coding techniques, including CSS3 Animations, CSS3 Media Queries, HTML5 Canvas, Web Storage, and more! The site is organized by coding techniques, called "features" by Adobe — and provides for each feature with an overview, examples, browser support chart, detection and fallback strategies, and list of related Adobe technologies.
CSS3 Flexible Box Layout Model
You have used the CSS float property to create the look of two-column and three-column
web pages. While the float layout technique is still a common practice, there
is a new emerging flexbox layout technique that uses the CSS3 Flexible Box Layout
Module (http://www.w3.org/TR/css3-flexbox/) which is currently in W3C Candidate Recommendation status. The purpose of flexbox is to provide for a flexible layout—elements contained within a flex container can be configured either horizontally or vertically in a flexible manner with flexible sizing. In addition to changing the horizontal or vertical organization of elements, flexbox can also be used to change the order of display of the elements. Due to its flexibility, flexbox is ideally suited for
responsive web design!
Although you can expect increasing levels of browser support with each new version, Flexbox is not yet wellsupported by browsers. Check http://caniuse.com/flexbox for the current level of browser support. At the time this was written, Opera and Chrome (using the -webkit prefix) supported flexbox. Check out the following resources to explore Flexbox:
Review flash card activities are available for this chapter.
Check your knowledge of chapter terms and concepts.
- Page 299, Hands On Practice 7.2
Save the starter1.html file as favorites.html
- Page 309, #2.a
Replace #nav a:hover with nav a:hover
- Page 310, #4.a
You will configure the h3 element in this step.
- Page 313, Figure 7.14
The correct Figure 7.14 is available here.
- Hands-On Practice 7.6 (pages 313-315)
If you validate your pages you may get error warnings about the ARIA landmark roles. According to Deque, configuring both HTML5 elements and ARIA landmark roles is a best practice because screen reader support for HTML5 is incomplete.
- Page 321 FAQ
The URL in the FAQ should be
- Page 333, Hands-On Practice 7.9
#4, b replace webkit-justify-content with -webkit-justify-content
Questions or Comments?
The author would like to hear from you! Send an e-mail to email@example.com