CSS media queries have been around for quite a while, with CSS 2 introducing media=screen and media=print also available to create print stylesheets, but CSS3 has added to this with the new media queries which allows much more targetting of browser types. These allow different stylesheets or different rules to be targetted by declaring the widths of browsers. Examples of this include:
@media print {
body{width: 100%}
}
Or more advanced targetting such as:
@media screen (max-width: 1024px) {
body {background: #fff;}
}
The CSS spec states that:
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.
This means that sites can be optimised to both the device and screen resolution, although one could argue that by hiding certain elements on smaller devices is changing the content. For example, if this site is scaled down to 800×600 the “about” section on the homepage is not displayed, as this prevents horizontal scrollbars and is not essential. Users can still access the navigation and the latest posts, but I feel that this information can be removed and not alter the experience too much.
Media queries have received a lot of attention recently with the A List Apart article on Responsive Web design and excellent uses of the technology by Simon Collison and Jon Hicks, and whilst I was impressed with them I held off from experimenting with it for a while, as I didn’t know too much about them and they seemed a little scary!
However after experimenting with them recently on this site, it’s a really simple technique of over-riding your default stylesheet with specific styles for the devices and browser sizes stated. Although screen resolutions are increasing and very few users are still using 800×600 or even 1024×768, the art of progressive enhancement means that these users shouldn’t be ignored and media queries allows sites to be tailored to these users. Resize your browser to see how this site reacts to smaller browser sizes, although there are more impressive examples out there.
Having played with them now and seeing the power of what can be achieved, I’ll definitely be making use of them in future projects, both at work and in personal projects.
This time last year, I was lucky enough to be at Summercamp down at the Carsonified offices in Bath and thought I’d write an update of the things that have happened in the last year and how the event has helped me in the last 12 months. Summercamp was billed as an event aimed at full-time students and founders of startup web apps who were just starting out. Places were limited to 8 only and as there was only three weeks between the event being announced and the event itself, I applied immediately and to be honest, kind of forgot about it as I didn’t really believe that I would be accepted. I was delighted however when Trista got in touch to say that I had been awarded a place.
Across the 8 of us were a wide range of skills and talents, with Gig Locator being in beta at the time and has since launched and doing well, and Rob was organising a one-day conference called Tomorrow’s Web which took place just a few weeks after Summercamp. There was a mix of designers and developers across the attendees and the sessions were also evenly spread between design, development and business/career issues, all of which were interesting in their own. Full write ups on the event are available her with part 1 and part 2.
In the 12 months since, things have changed a lot for me as I am no longer at university and am now in full-time employment and have also improved both my design and development skills over the last year. My own website has been re-designed several times since and have also learned more coding skills, focussing on HTML5 and CSS 3 and even dabbling in php!
As more of a designer than developer I was more interested with the design focussed talks and I thoroughly enjoyed Mike‘s talk through on what was then the recent Carsonified re-design and how he approached it. I also enjoyed the talks on development techniques and how to approach the task of building and testing sites, with Ryan‘s introduction to A/B testing being an interesting session.
The whole experience was brilliant and if Carsonified were to ever run it again, I would recommend to anyone to apply for a place. I’ve benefitted greatly from the experience (even playing Wiffle Ball!) and I’m sure all the other guys have gained a lot from it also.
HTML5 and CSS 3 have been around for a good while now, and more and more of it can be used on client work, although we’re not yet at the stage where we can throw off the strict doctype completely and create extravagant sites using canvas and SVG and all the other css goodness around such as animations and transforms. We can use smatterings of this stuff, border-radius, box-shadow can easily be used now, although in general they’re used for the extra touches on websites and elements that won’t affect the main design or critical elements of the page.
There are a few ways to add in CSS support for unsupported browsers using JavaScript but nothing that really offers a one stop simple solution for achieving decent CSS 3 support cross browser, and one service which was recently announced was eCSStender, which promised that by downloading and including a couple of JavaScript files that a wide range of CSS 3 techniques could be implemented cross-browser, crucially without any vendor prefixes required.
Recently, I was working on a project which would have benefited from this library as development time would have been drastically reduced with the benefit of cross browser compatibility for techniques such as border-radius, box-shadow etc and I began coding with this in mind.
There was initial success with Firefox recognising the standard border-radius without the need for the -moz- prefix, and this appeared to work cross-browser. Except for Internet Explorer, any version. After many attempts at trying to get this to work, I gave up.I recently heard that border-radius was not supported in IE with eCSStender, and I’m wondering what all the hype was in the A List Apart article. It was billed as a simple solution to easily achieve CSS 3 compatibility, but if something as simple as border-radius doesn’t work in IE then what’s the point? There are other ways of achieving compatibility and eCSStender was not all it was made out to be in the article.
It was billed as the saviour to vendor prefixes and greater flexibility, whereas in reality it is none of these.
