FED Stuff - November Edition

FED Stuff is a collection of the little CSS and Front-End Developer tricks that I’ve learned each month. There is a lot to learn. Some may be new to you. Some may be what you assumed is common knowledge. But we can't know for sure unless we share. This is my attempt to share them. Little tricks add up to big things.

Rich Snippets Testing Tool

This is a great tool by Google for testing rich snippets of microdata, microformats, or RDFa information. This type of information is being used a lot more in search services. Include rich snippets for shopping, recipes, reviews, video, and events, and music. By using this testing tool, you can make sure your rich snippet data is formatted correctly.

CHECK IT OUT: http://www.google.com/webmasters/tools/richsnippets

Media Queries and Meta Viewport tags

I've been messing doing a lot of work with mobile web apps this past month and found a lot of pain points. For example, setting the viewport to the same size as the device width...

<meta name="viewport" content="width=device-width">

...doesn't necessarily give you the exact pixel resolution width of your device. Many devices give a pixel display much smaller than their screen resolution. The iPhone 4 has a resolution of 960 x 640. Yet if you query it's width, it returns 320px. The manufacturer mostly likely found this the best way to display a web site that wasn't specifically designed for mobile (which most are not). Either way, it can make fitting your design to different sized screens a real pain. Using a combination meta viewport tag and width media queries are the best way to insure your site looks as intended at the target resolution. Though it can require a bit of tinkering to get it right. Read this article at quicksmode.org for the full scoop.

Portrait and Landscape Media Queries

Speaking of media queries, detecting Portrait versus Landscape is nothing new. What I didn’t know is that media query isn’t set by the hardware telling the browser what orientation the device is being held at. What it’s doing is testing whether the browser window is taller than it is wide. So if you make your browser window skinny, it’ll swap to portrait mode.

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

This is not only cool for detecting the orientation of a device, but you could even re-layout the page for desktop browser windows that are longer than wide. It’s also a great way to do some quick testing.

One more note, older versions of Internet Explorer (8 and less) will not recognize the media query tags within your CSS documents and just render the styles within. So make sure you put the default styles after the changed values so they get overwritten properly. If landscape is your default style, set the portrait styles first, then override them with the landscape ones. Which leads to our next topic …

“Mobile First” CSS and working with legacy Internet Explorer

Nicolas Gallagher wrote great article on some techniques of writing your CSS Mobile First (building your styles up from mobile to desktop) and still working around IE 6/7/8 (which don’t understand Media Queries). He also talks about using Sass (A CSS Pre-processor) can help, but you can still use these techniques without it. Definitely worth a read.

Handy Tools - cubic-bezier.com

A tool that helps you work with the easing functions of CSS3 transitions and animations. It’s pretty pimp.

CHECK IT OUT: http://cubic-bezier.com/

jQuery 1.7 Released

Probably old news by now as this happened early in the month, but there's a new version of jQuery. This new version features new event APIs of .on() and .off(). From the examples on the press release, it looks like these are unified way of attaching events.

MORE INFO: http://blog.jquery.com/2011/11/03/jquery-1-7-released/

Categories: