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!!!!
