Using CSS3 media queries in HTML 5 pages
This is going to be the seventh post in a series of posts regarding HTML 5. You can find the other posts here , here , here, here , here and here.
In this post I will provide a hands-on example on how to use CSS 3 Media Queries in HTML 5 pages. This is a very important feature since nowadays lots of users view websites through their mobile devices.
Web designers were able to define media-specific style sheets for quite a while, but have been limited to the type of output. The output could only be Screen, Print .The way we used to do things before CSS 3 was to have separate CSS files and the browser decided which style sheet to use.
Please have a look at the snippet below - HTML 4 media queries
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
<link rel="stylesheet" type="text/css" media="print" href="print-styles.css">
Τhe browser determines which style to use.
With CSS 3 we can have all media queries in one stylesheet. Media queries can determine the resolution of the device, the orientation of the device, the width and height of the device and the width and height of the browser window.We can also include CSS 3 media queries in separate stylesheets.
In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.
Another excellent resource is HTML 5 Doctor.
Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.
In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.
Before I go on with the actual demo I will use the (http://www.caniuse.com) to see the support for CSS 3 Media Queries from the latest versions of modern browsers.
Please have a look at the picture below. We see that all the latest versions of modern browsers support this feature.
We can see that even IE 9 supports this feature.
Let's move on with the actual demo.
This is going to be a rather simple demo.I create a simple HTML 5 page. The markup follows and it is very easy to use and understand.This is a page with a 2 column layout.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML 5, CSS3 and JQuery</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<h1>Learn cutting edge technologies</h1>
<p>HTML 5, JQuery, CSS3</p>
</div>
<div id="main">
<div id="mainnews">
<div>
<h2>HTML 5</h2>
</div>
<div>
<p>
HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
</p>
<div class="quote">
<h4>Do More with Less</h4>
<p>
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
</p>
</div>
<p>
The HTML5 test(html5test.com) score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn't finalized yet, all major browser manufacturers are making sure their browser is ready for the future. Find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers.
The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform.</p>
</div>
</div>
<div id="CSS">
<div>
<h2>CSS 3 Intro</h2>
</div>
<div>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
</p>
</div>
</div>
<div id="CSSmore">
<div>
<h2>CSS 3 Purpose</h2>
</div>
<div>
<p>
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).
</p>
</div>
</div>
</div>
<div id="footer">
<p>Feel free to google more about the subject</p>
</div>
</body>
</html>
The CSS code (style.css) follows
body{
line-height: 30px;
width: 1024px;
background-color:#eee;
}
p{
font-size:17px;
font-family:"Comic Sans MS"
}
p,h2,h3,h4{
margin: 0 0 20px 0;
}
#main, #header, #footer{
width: 100%;
margin: 0px auto;
display:block;
}
#header{
text-align: center;
border-bottom: 1px solid #000;
margin-bottom: 30px;
}
#footer{
text-align: center;
border-top: 1px solid #000;
margin-bottom: 30px;
}
.quote{
width: 200px;
margin-left: 10px;
padding: 5px;
float: right;
border: 2px solid #000;
background-color:#F9ACAE;
}
.quote :last-child{
margin-bottom: 0;
}
#main{
column-count:2;
column-gap:20px;
column-rule: 1px solid #000;
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #000;
-webkit-column-rule: 1px solid #000;
}
Now I view the page in the browser.Now I am going to write a media query and add some more rules in the .css file in order to change the layout of the page when the page is viewed by mobile devices.
@media only screen and (max-width: 480px) {
body{
width: 480px;
}
#main{
-moz-column-count: 1;
-webkit-column-count: 1;
}
}
I am specifying that this media query applies only to screen and a max width of 480 px. If this condition is true, then I add new rules for the body element.
I change the number of columns to one. This rule will not be applied unless the maximum width is 480px or less.
As I decrease the size-width of the browser window I see no change in the column's layout.
Have a look at the picture below.
When I resize the window and the width of the browser so the width is less than 480px, the media query and its respective rules take effect.
We can scroll vertically to view the content which is a more optimised viewing experience for mobile devices.
Have a look at the picture below
Hope it helps!!!!
