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