Lesson 13: CSS3 Media Queries and New CSS3 Page Layout Options
In this lesson, you will learn to use CSS3 Media Queries to deliver a variety of page layouts depending on the device or screen width used. Additionally, you’ll gain an understanding of evolving CSS3 techniques that may change the way web pages are designed.
What you’ll learn in this lesson:
- • How to use CSS3 Media Queries
- • Using the CSS3 Grid property
- • Understanding CSS3 Multi-columns and Flexboxes
Starting up
The role of CSS3 media queries
All web browsers, whether on desktops or mobile devices, communicate with the servers that host the websites you visit and identify themselves with a user agent String. In most cases, this information is never used by the website, but you can add user agent detectors to your web pages. Typically, these detectors are JavaScript code that identify the user agent, for example, Internet Explorer 9, and then change the default behavior of the page based on this information. This lesson does not focus on JavaScript detectors, but on a more recent form of detectors, called CSS3 media queries.
A CSS3 media query examines the capability of the user agent visiting the site and lets you send it styles based on certain values. Media queries can also detect the capabilities of a user’s screen and serve styles suited for that screen, which makes media queries useful for different monitor resolutions on the desktop and for mobile devices. Examples of user agent capabilities include the ability to detect the width and height of the browser window, the device width and height, the device orientation (landscape or portrait), and the resolution.
Here is a more concrete example: suppose a user has a Smartphone with a screen resolution of 480 pixels wide by 800 high, and the phone is in portrait mode (vertical). This user visits a website with media queries in the stylesheet. When the user enters the site address into the web browser or clicks a link, the site’s media queries detect the device capabilities of the phone. If the site’s stylesheet includes specific styles for devices with this screen resolution, those are used to deliver a custom layout for the phone. Such a custom layout could be a single-column layout instead of the three-column layout used for larger desktop screens. The stylesheet designer could have also decided to include a layout for a phone screen in landscape mode; for example, add a second column. This way, when the user rotates the phone into landscape mode, a second column appears on the expanded horizontal space (800 pixels).
Using CSS3 media queries to deliver a mobile-optimized layout
In this exercise, you will add a media query to deliver a single-column layout to screens with a width less than 480 pixels. This is a mobile-optimized layout, but it should work with any browser window that has a width less than 480 pixels. The technique used in this exercise converts an existing two-column layout to a single-column layout by removing the floated elements.
By the end of this exercise, you will have a good foundation for a mobile-optimized web page, but you can expand it into a more robust and sophisticated mobile layout. The details for creating different layouts using media queries goes beyond the scope of this book, but useful resources are mentioned at the end of the exercise.
1 In your text editor, choose File > Open and navigate to the HTML5_13lessons folder. Locate the 13_home.html file and click Open. Preview this page in the browser.
The two-column design you will optimize for mobile devices.
Close your browser and return to your text editor. You will now add a media query to your base.css stylesheet.
2 In your text editor, choose File > Open and open the base.css stylesheet. Scroll to the bottom and add the following code:
@media only screen and (max-width: 480px) {
}
A media query is a new category added to the CSS3 specification. Some browsers still use the CSS2.0 or 2.1 specification, so they will not recognize this code. In the case of mobile devices, you are targeting browsers such as the Safari web browser on the iPhone that do support CSS3 media queries; consequently, you can use the code.
The keyword only that appears in this first line of code has a specific meaning related to the selected media type: screen. In this case, the keyword only hides this stylesheet from older user agents. The actual media query in this line of code is [max-width:480px]. You can interpret the max-width query as “less than or equal to.” In other words, you are creating a media query that will deliver styles for screens that are 480 pixels wide or less.
3 Now you will add a new rule that will set a style for the width of the wrapper. Add the following code. Take careful note of the fact that you are placing this code within the brackets of the @media code, this is how media queries work. The rules for the body and the #wrap ID are nested inside the @media section.
@media only screen and (max-width: 480px) {
body {
padding: 5px;
background-color:#FFF;
background-image:url(images/smoothieworld_logo_mobile.jpg);
background-repeat:no-repeat;
}
#wrap {
width: auto;
margin-top:80px;
}
}
This code accomplishes the following:
- • Five pixels of padding are applied to all sides of the body to add space for any element you place within your page.
- • The background image is a new image optimized for the mobile format.
- • The rule for the wrap ID style redefines the main container of the page to an automatic width instead of the 960 pixels used for the current stylesheet.
- • The top margin property adds 80 pixels of space between the wrap div and the top of the page to make your site logo visible.
4 Choose File > Save. Use a browser that supports CSS3 media queries to preview the page. Reduce the width of your browser; when the window becomes narrow enough, the small background image and the other changes you added in this step appear.
Your page layout changes when the width of the browser window is 480 pixels or less.
5 Return to your text editor.
If you wanted to, you could create a layout that only displays when the screen was between 480 pixels and some other number (say 800 pixels). To do that, you would have to use the min-width media query. This media query can be interpreted as “greater than or equal to.”
Although you will not be doing this right now, the code would look like this: (@media only screen and (min-width: 800px). Here, the styles you add would only be used if the screen were larger than 800 pixels. By using a combination of min-width and max-width media queries, a designer could create a number of different layouts depending on the width of the user’s screen.
This technique is gaining traction within the world of web design and web development and goes by the name “responsive design.” Although it is a concept well worth exploring, we do not cover it here and instead you will focus on a much more specific media query for a smartphone device, such as the iPhone.
6 Locate your media query and make the following change:
@media only screen and (max-device-width: 480px) {
Choose File > Save All, and then preview your page in the browser. Reduce the width of your browser window and it will no longer change. This is because the max-device-width media query is more specific than the max-width query: your style rules now apply only to devices with a screen width of 480 pixels or less.
At this point, the only way to preview your changes would be to use an emulator or place these pages on the Web and test from your phone. Neither of these options will be convenient for you, so for now, you will remove the device requirement and then add it back in at the very end of the lesson.
7 In your text editor, locate the first line of your media query and delete the device code so your code is the same as it was in step 2:
@media only screen and (max-width: 480px) {
Again, this is just a temporary measure to help you preview the changes in your web browser.
Although you are previewing these changes in the browser, we will be using screenshots from the iPhone to help you get a sense of how your page would look on this device.
Your page layout as displayed in portrait mode on the iPhone.
You currently have two logos displaying on your page; the second one, in the masthead, is redundant and you will soon remove it. A common strategy to optimize a layout for mobile is to create a single column for your content. This is commonly done by adding code within the media query that removes floated elements and sets pixel widths from fixed values to auto values. In addition, you can also remove elements that do not work within the mobile layout. In this case, you will remove the masthead that contains the large SmoothieWorld logo.
8 Add the following code after the #wrap rule within your media query:
#masthead {
display:none;
}
The display:none property prevents the masthead element from appearing. This property is useful because it “turns off” elements from the original stylesheet. Now you’ll configure your navigation.
9 Add the following two style rules after the #masthead rule within your media query section. Both of these rules target the main navigation bar.
#mainnav {
height: auto;
}
#mainnav li {
float: none;
width: auto;
text-align: left;
border-top: 1px gray solid;
border-bottom: 1px gray solid;
}
Setting the height value for the mainnav to auto ensures that this container will expand and display the navigation items inside. Choose File > Save, and then preview your page in the browser. (Again, remember that our screenshot is for the iPhone and you will need to reduce the width of your browser window to see a similar effect. )
Your navigation reaches the edge of it’s containing element after removing the float and setting the width to auto.
Setting the float property to none and the width to auto turns your navigation into a vertical list. The text-align left property places the navigation on the left side of the menu. The auto width value will work after you convert the rest of your page to a single column. You will continue to do that in the following steps.
10 You will now add more styles in your media query for the sidebar and the main content. First, locate the rule for the masthead ID, and then add the following selector:
#masthead, #sidebar {
display:none;
}
This code also removes the sidebar from the page. By removing the sidebar, you remove the floated column on the left and can begin to reorganize your layout. Using floats for columns in a desktop layout is very useful, but not in mobile layouts. You will now remove the floated properties of your maincontent div.
When designing sites for mobile devices, keep in mind that simpler is often better, and what works for the desktop might not work for the mobile site.
11 To style the maincontent div, add the following code within your media query below your #mainnav li rule:
#maincontent {
float: none;
width: auto;
background-color:white;
}
Again, by setting the float property to none and the width to auto, you are getting closer to a single column layout.
Choose File > Save, and then preview your page in the browser.
Your maincontent section fills a single column after removing the float and setting the width to auto.
Your content flows into a single column; if you scroll down, you will notice your footer is still floated. In the next step, you will style the footer.
12 Add the following rule set within your media query below your #maincontent rule:
#footer, #footer p {
clear: none;
width: auto;
height: auto;
background-image: none;
padding-top: 20px;
margin-top: 0px;
}
This code sets the styles for the footer and the paragraph inside the footer:
- • The clear:none rule overrides the clear:both rule from the main stylesheet.
- • The width and height are set to auto.
- • The background-image is set to none to simplify the page design.
- • Additional padding is given and the top margin is set to zero.
Choose File > Save, and then preview your page in the browser. Scroll to the bottom to see the footer change.
13 In order to make this page design work for the iPhone, you need to add the max-device-width media query, as seen earlier. Locate the first line of your media query and make the following change:
@media only screen and (max-device-width: 480px) {
Choose File > Save. If you have access to a server, upload your HTML and CSS files to a server and point your phone’s browser to the address. Test your page in portrait and landscape mode by rotating the phone. You now have the foundation of a layout optimized for the iPhone!
This exercise gives you a preview of what media queries can do, however, it’s just a small taste of what they are capable of delivering. In the future, media queries will become increasingly more important and widespread, especially as the range of different screen sizes and devices continues to expand.
New CSS3 Page Layout Options
HTML5 and CSS3 include new developments and features that can let you create interesting designs and functionality for your websites and web applications. Some new features are still not fully implemented, and some are available only for certain browsers.
The following sections describe some of the new CSS3 features.
The CSS3 multi-column layout
Current implementations of CSS lack solid and reliable options for page layout. To create columns on a page using CSS, designers and developers have had to rely on a system of float and clear properties. CSS3 introduces multi-column layout, which lets you separate a column and change its appearance in notable ways. Some of the properties relating to multi-column layout are column-count, column-width, column-gap, and column-rule. At the time of this writing, the current versions of all the major browsers support the CSS3 multi-column feature, but most require using vendor-specific prefixes. Microsoft added support for multi-column in Internet Explorer 10 and above.
While older browsers do not support multi-column, it is still a relatively safe feature to adopt as older browsers will simply show the same text in a single, wide column as opposed to multiple columns.
For a chart displaying past, current, and future support for the multi-column, layout visit http://caniuse.com/#feat=multicolumn.
The following exercise demonstrates the use of multi-column layouts.
1 In your text editor, choose File > Open and navigate to the HTML_13lessons folder. Locate the 13_css3multicolumn_layout.html file and click OK. In the style section of the page, locate the rule for #introduction-content; this rule currently sets the width of the column that contains all the content to 600 pixels wide.
#introduction-content {
width: 600px;
}
Preview the page in your browser to see the current state of the page.
The default, single-column style of your page.
You’ll now separate this column into three by adding the CSS3 column-count property for Gecko and Webkit browsers and the official syntax with no vendor prefix.
2 Add the following two properties to the ID rule:
#introduction-content {
width: 600px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
Save your file and preview it in your browser. If your browser supports the multi-column layout, you should see the content separated into three equal columns.
Separating your column into three columns with the column-count property
You can modify the space between the three columns using the column-gap property. Notice that there is a default gap in your layout when no column-gap is defined. You can also use the column-width property to create columns instead of the column-count property.
3 Replace the column-count properties you added in the last step with the following code for column-width:
#introduction-content {
width: 600px;
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
}
Save your file and preview it in your browser. You will see three columns of 150 pixel width each. These columns are still constrained within a width of 600 pixels, so there is no change in appearance. You will now remove the overall pixel width style. Notice the change in effect.
4 Return to your text editor and remove the entire width property and value.
Save your file and preview the page in your browser. Notice the multiple columns across the page that repeat until the content runs out. Reduce and expand the width of your browser window to see how the content responds.
Without a defined width for the container, the column-width property generates as many columns as needed.
There are other properties related to the multi-column layout module that modify how multiple-columns are displayed, such as the column-rule and column-span properties. The column-rule property lets you specify a vertical rule between columns and functions much as a border with possible values for color, style, and width.
The column-span property lets you force an element to span across columns. Typical uses include creating a header that spans across one or more columns.The column-span property does not currently work in Firefox due to a known bug, 616436. To check the current status of the bug, visit https://bugzilla.mozilla.org/show_bug.cgi?id=616436.
To learn more about the specification for the CSS3 multi-column layout module, visit the W3 site for up-to-date information at http://www.w3.org/TR/css3-multicol/.
The CSS3 Flexible Box layout module
Flexible Box, or flexbox, is another new layout feature in CSS3, and it represents a new model for layout in addition to the four models currently supported in CSS 2.1 (block layout, inline layout, table layout, and positioned layout). The flexbox model was added to CSS3 to help designers and developers create more sophisticated and responsive web applications and web pages. It also addresses a fundamental flaw in the current model that relies on floating and clearing elements, a technique that was never intended for true page layout. As the name implies, the flexbox is designed to provide flexible layout containers that shift and respond to other elements on a page or to content within the flexbox.
The following exercise illustrates the use of this new feature.
1 In your text editor, choose File > Open, navigate to the HTML5_13lessons folder, and open the file 13_flexbox.html. This is a simple HTML file that contains a div container with three paragraphs. The style for this div container defines rules for the width, height, and border. There is also a second rule set that defines a background color of gray for the paragraphs. Preview the page in your browser to see the style as it currently appears.
The starting layout with no flexbox properties applied.
2 Return to your text editor, and in the introduction-content ID styles, add the following rules:
#introduction-content {
width: 600px;
height: 150px;
border: 1px solid #821738;
display: -webkit-flex;
-webkit-flex-direction: row;
display: -moz-flex;
-moz-flex-direction: row;
display: flex;
flex-direction: row;
}
Here, we are adding one set of rules for Webkit browsers using the –webkit- vendor-specific prefix, and a second using the standard, un-prefixed rule, for browsers that no longer require the prefix. At the time of this writing, nearly all major browsers support flexible box properties using these rule, with the lone exception being Internet Explorer versions 9 and below.
3 Choose File > Save and then preview the page in your browser. The three paragraphs are now aligned horizontally within the parent container. Notice the width of the paragraphs is only as long as the content.
The display:flex property and value instructs the div to use the flexbox model. The property flex-direction has a value of row to align the three child paragraphs. There is also a column value that you can use.
Your three paragraphs are aligned horizontally with the addition of the display:flex and flex-direction: row rules.
4 Return to your text editor. Using the flexbox module, you can also target any of the children elements. For example, you can add a rule to stretch the third paragraph until it fills the container. To illustrate, add this rule after the rule set for the paragraphs:
#introduction-content p {
background-color:#CCC;
margin-left: 20px; margin-right: 20px;
}
#introduction-content > p:nth-child(3) {
-webkit-flex: 1; -mox-flex: 1; flex: 1;;
}
This rule targets the third child paragraph within the div and uses the flex property with a value set 1. The flex property represents a flexibility ratio for child elements. Since no flex property value has been specifically set for the first two child paragraphs, they are considered inflexible (the flex value is 0 by default). Given that the third paragraph has a flex value of 1 and the other paragraphs are inflexible, the third paragraph expands as far as it can.
You can make the second paragraph twice as wide as the third paragraph by adding a rule defining the flex value of the second paragraph to 2.
5 Add the following rules for the second paragraph:
#introduction-content > p:nth-child(3) {
-webkit-flex: 1;
-moz-flex: 1;
flex: 1;;
}
#introduction-content > p:nth-child(2) {
-webkit-flex: 2; -moz-flex: 2; flex: 2;;
}
The flex ratio of the second paragraph to the first is two to one, making the second paragraph twice as wide as the third.
Save your file and preview your page in the browser.
By adding rules targeting specific paragraphs, you can make the second paragraph twice as wide as the third.
One advantage to this method is that you can change the overall width of the parent element and the flexible ratios will allow the children elements to adapt. When you do not define a box value for a child element, the default is 0, the element is inflexible, and the width is defined by the amount of content.
For this exercise, the second and third child elements have flexboxes with widths defined by ratios, but the first child element has a width defined by the text Smoothieworld.
6 Return to your text editor; within the HTML, locate the div element on your page that has the class name centered (second div element). This box currently has an image within it placed at the default position of top left. Using the flexbox properties flex-direction, justify-content, and align-items, you will automatically align this image vertically and horizontally inside the box, a task difficult to accomplish if you were not using CSS3 syntax.
You can horizontally align an object in the center of a box by setting the left and right margins to auto in CSS 2.0 and 2.1. You cannot easily vertically align an object in the center of a box.
7 Add the following properties and values to the .centered class:
.centered {
width: 450px;
height: 300px;
border: 1px solid #555;
background : #CFC;
display: -moz-flex;
-moz-flex-direction: row;
-moz-justify-content: center;
-moz-align-items: center;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
-webkit-align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
The flex-direction property is used here as it was in the first exercise: to align an element horizontally; in this case, the image. For this exercise, you have also added a justify-content property set to center: this sets the alignment based on the flex-direction value. You need the align-items property to align the image vertically; the value is also set to center.
8 Choose File > Save and then preview the page in your browser. You will now have an image centered horizontally and vertically within your box.
Horizontally and vertically centering an image using the flexbox properties.
To better understand how these properties work, set the align-items property to stretch and view the results.
9 Return to your text editor and change the values for the align-items properties as follows:
display: -moz-flex;
-moz-flex-direction: row; -moz-justify-content: center;
-moz-align-items: stretch;
display: -webkit-flex;
-webkit-flex-direction: row; -webkit-justify-content: center;
-webkit-align-items: stretch;
display: flex; flex-direction: row; justify-content: center; align-items: center;
10 Choose File > Save and then preview in your browser. The image is now stretched vertically down the box. Note that the stretch value is not a good option for this exercise because it distorts the image, but there are other cases where this value is useful; for example, to create flexible columns. (If your box does not stretch, check your code, but also realize it may be your browser does not yet support the flexbox properties.)
11 Return to your text editor and change the -moz and –webkit box-align values back to center.
The vendor prefixes for Gecko and Webkit will eventually become redundant as the flexbox properties are fully adopted by web browsers. Microsoft has added support for the flexible box module in Internet Explorer 10+. Additionally, the CSS Flexible Box Layout Module has been elevated to Candidate Recommendation status by the W3 meaning it is likely to reach the Recommendation stage and become a standard.
For a chart displaying past, current, and future support for the flexible layout module, visit http://caniuse.com/#feat=flexbox.
The CSS3 Grid Template Layout Module
Grid systems have been an important component of print design for years. For example, a typical newspaper has a complex column structure that integrates multi-column layouts with advertisements, images, and other elements. To make the process of designing a newspaper more manageable, editors rely on grid templates that can be reused daily; the front page of a newspaper has a different grid layout than the editorial page, which in turn has a different grid layout than the classifieds, and so on.
Different variables are used to design web pages; for example, screens are used instead of paper, but the concept of grid structure is just as important. Since there are no grid components in CSS2.0 and 2.1, designers and developers have implemented grid layouts using custom CSS solutions that provide a framework for basic layout solutions. In CSS3, there is a proposed Grid Template Layout Module that attempts to incorporate grids directly into the language.
The Grid Template Layout Module defines a typographic grid for CSS and includes features to set up a grid template and flow content into it. A separate module, CSS3 Grid Layout, uses the same template for absolutely positioning elements. Currently, only Internet Explorer 10 and above support this proposed module but feature requests have been added to include this module in Firefox and Safari.
For the current status and syntax of the CSS3 Grid Layout Module, visit http://www.w3.org/TR/css3-grid-layout/.
Adding template-based position to CSS
To help you understand the new template layout module, compare it to the existing layout policy of absolute positioning in CSS. For example, consider the simple list in CSS:
<ul>
<li>Blueberry Smoothies</li>
<li> Mango Smoothies </li>
<li> Banana Smoothies </li>
</ul>
The default layout policy for an unordered list is to treat each item as a block element and position it within its own line. The following figure shows the unordered list with a single background-color property added to help you visualize the style.
The standard block-level formatting appearance of an unordered list.
You can change the default block-level formatting of a list to inline using a simple rule. This technique is the foundation of many CSS horizontal navigation bars. The code you would add in your CSS would be:
li {
display:inline;
}
This code places each list item on a single line. To separate each item in the list, you would need to add margins or padding between each item.
An unordered list that has a new style converting the list items to inline.
You can currently position elements absolutely in CSS, which removes the targeted element from the flow of the page and lets you position it horizontally and vertically on the page by setting offset values for the element. For example, to move your unordered list 100 pixels from the top of the page and 40 pixels from the left, you would add the following style:
ul {
background-color:#B28A9C;
position: absolute;
left: 40px;
top: 100px;
}
Absolute positioning is useful in many circumstances, but it is limiting because it relies on horizontal and vertical coordinates. Having multiple absolutely positioned elements on the page can work well until you need to change the size of one or more of these elements, need to reposition the elements, or the amount of content changes; in such cases, the layout often breaks and you need to update it. Absolutely positioned layout is very inflexible.
In contrast, template-based positioning is extremely flexible because it uses rows and columns to provide adaptable slots for content. The relative size and alignment of elements is governed implicitly by the rows and columns of the template. For example, consider the layout illustrated in the following figure:
A four-column layout with sections A, B, C, and D
The four regions of the page (A, B, C, and D) receive different content. The HTML for this layout might appear as follows:
<div id="grid">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
The style for this layout could start as follows:
#grid {
width:800px;
margin:auto;
}
#a {
position: a;
}
#b {
position: b;
}
#c {
position: c;
}
#d {
position: d;
}
The first rule for the parent div, called grid, defines a width of 800 pixels and sets the margins to auto to center the container. The four IDs use the position property and use a letter value instead of a number value.
Within the style for the parent div, you could arrange the order of the 4 child divs using the display property, as shown below:
#grid {
width:800px;
margin:auto;
display: "abcd";
}
To style each row, you could link the letter values to a new CSS3 property called slot. A CSS3 slot has this unique syntax ::slot(). The following code shows the position value connected to the slot:
#grid::slot(a) {
background: orange;
}
#grid::slot(b) {
background: blue;
}
#grid::slot(c) {
background: gray;
}
#grid::slot(d) {
background: pink;
}
The CSS3 slot pseudo-class lets you target each row and give it a background color.
You can create more complex grid structures. For example, to create a header for slot a, you could add the following code to the grid ID style:
#grid {
display: "aaa"
"bcd";
}
This style repeats the three divs with the ID a across the page, and then places the next three divs below it. You might add additional styles to improve the aesthetic appearance.
An example of how you could create a header with three columns using template-based positioning.
Web developer Alexis Deveria has created a jQuery plug-in that lets you use his syntax in your pages so you can experiment with template-based positioning with help from JavaScript. You can locate this code here: http://code.google.com/p/css-template-layout/.
Self study
1 Create additional styles for the final 13_home.html file you had at the end of the Media Query exercise. To experiment with a second media query, add the following code below your last rule in the style sheet:
@media screen and (orientation:landscape) {
#mainnav {
width:350px;
}
}
2 The previous step will change the width of the navigation menu when the phone is in landscape mode. What other styles could you use in landscape mode?
Review
Questions
1 Jason wants to convert his pre-existing website to mobile and uses CSS3 media query to do so. Jason would also like to convert his multi-column layout to a single column to maximize the screen space on the mobile browser. What are the two CSS properties relating to layout Jason should modify first?
2 What is the difference between multi-column layout and the flexible box layout in CSS3?
3 To center a div container in the middle of another div container, which of the following CSS3 techniques would be better to use: Media Queries, Multi-Column layout, Flexible Box Layout, or Template Layout?
Answers
1 To convert a multi-column layout to a single column, the first steps will often be to set a float property of none and a width property of auto to most or all elements using floats or that have fixed width values.
2 The multi-column layout properties can be used to divide a pre-existing element into a specified number of columns. The flexible box layout properties can be used to build a page layout by defining the properties of child elements, such as div containers, in a flexible manner.
3 Flexible Box Layout.