Friday, 13 June 2014
Monday, 2 June 2014
Friday, 30 May 2014
How To Use CSS3 Media Queries
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
CSS3 continues to both excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support — small devices such as the iPhone, and Android devices.
In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.
Media Queries
If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. This functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print, handheld and so on. Unfortunately these media types never gained a lot of support by devices and, other than the print media type, you will rarely see them in use.
The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things. For example:
- width and height (of the browser window)
- device width and height
- orientation – for example is a phone in landscape or portrait mode?
- resolution
If the user has a browser that supports media queries then we can write CSS specifically for certain situations. For example, detecting that the user has a small device like a smart phone of some description and giving them a specific layout. To see an example of this in practice, the UK web conferencedConstruct has just launched their website for the 2010 conference and this uses media queries to great effect.
Using Media Queries to create a stylesheet for phones
@media only screen and (max-device-width: 480px) {
}
We can then add our alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules. So, to linearize our layout and use a smaller header graphic I can add the following:
@media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
div#header h1 {
font-size: 140%;
}
#content {
float: none;
width: 100%;
}
#navigation {
float:none;
width: auto;
}
}
If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. This functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print, handheld and so on. Unfortunately these media types never gained a lot of support by devices and, other than the print media type, you will rarely see them in use.
The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things. For example:
- width and height (of the browser window)
- device width and height
- orientation – for example is a phone in landscape or portrait mode?
- resolution
If the user has a browser that supports media queries then we can write CSS specifically for certain situations. For example, detecting that the user has a small device like a smart phone of some description and giving them a specific layout. To see an example of this in practice, the UK web conferencedConstruct has just launched their website for the 2010 conference and this uses media queries to great effect.
Using Media Queries to create a stylesheet for phones
@media only screen and (max-device-width: 480px) {
}
We can then add our alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules. So, to linearize our layout and use a smaller header graphic I can add the following:@media only screen and (max-device-width: 480px) {
}@media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
div#header h1 {
font-size: 140%;
}
#content {
float: none;
width: 100%;
}
#navigation {
float:none;
width: auto;
}
}HTML5 Introduction
HTML5 Introduction – What is HTML5 Capable of, Features, and Resources
After analyzing our new focus here at 1WD, which basically is teaching new, young, designers about web design and helping them improve their skills and to start in the business, we realized that we really need to go as deep as possible into the basics. And while we covered many of these already, two basic things are still missing from the website, and these two are in-depth introductions and discussions about HTML5 and CSS. Therefore it is one of my assignments for the next period to teach you about these two technologies and, after this, to create several tutorials for you. So in the next two to three months, I will cover aspects of front-end web design, basic coding and tutorials about them. Buckle up and get ready to become better at coding!
Subscribe to:
Posts (Atom)