Tag: Media Queries

Useful links: Mobile navigation, W3C media queries, track element

An alternative to select elements as navigation in narrow viewports is from 456 Berea Street.

The W3C published a recommendation document on media queries yesterday.

An Introduction to WebVTT and <track> is at Opera Dev. “Web Video Text Tracks, more commonly known as WebVTT, is a file format that allows us to mark up external text tracks. Using it in conjunction with HTML5‘s <track> element means we can associate information such as subtitles, captions and descriptions for a media resource such as audio or video, and display them synchronised with the media resource.”

Getting media queries to work in older browsers

The possibility that you may want media queries to work in older browsers does exist. We normally think of media queries as only being used to create responsive designs, which implies modern browsers on devices like iPhone or iPad. However, there is a JavaScript you can use if you need to support older browsers for other reasons.

There is native support for media queries in Firefox 3.5+, Opera 7+, Safari 3+ and Chrome. For browsers older than that, you can use css3mediaqueries.js, available free from Google.

If you are a Dreamweaver user, or have used my e-book “How to Create a Responsive Web Site Using Dreamweaver CS 5.5,” be aware that this script does not work with @import stylesheets. See Media Queries 101 for some tips on how to use methods other than @import rules for media query styles.

Useful Links: Media Queries, CSS for HTML5, HTML5 Boilerplate

There’s a new site called Media Queries that shows examples of sites using responsive design principles.

Targeting HTML5’s Semantic Elements with CSS talks about how the author uses CSS selectors to target various new semantic elements that may exist in numerous places on a single HTML5 page.

Videos about the HTML5 Boilerplate and showing how to use it can be found at Paul Irish’s site. The 15 minute one called Getting Started with HTML5 Boilerplate is the most useful.