As I start to use new CSS3 properties more often new issues are arising that I didn’t have to deal with before. Building out a new responsive site now that is using retina images for the mobile site so I’m using the background-size property extensively. I ran into a bug in Firefox 11 where in some situations the property was ignored.

Here’s an example of the code that did not work in Firefox:

112
113
114
115
116
117
118
119
120
121
122
123
124
125

.author:after {
	background-size: 30px 30px;
	content: "";
	height: 30px;
	padding: 0;
	position: absolute;
	right: -32px;
	top: 0;
	width: 30px;
}
 
.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top no-repeat;
}

Turns out, using the background shorthand was overwriting the size. Adding the background-size property to the more specific author declaration fixed the issue.

It looks like this is actually correct behavior according to the spec. Using the shorthand overwrites all other background properties. From the Standarista site’s notes on CSS3 background properties:

If you use the background shorthand and fail to declare any of the individual properties that make up the shorthand, those properties will revert to their default values [...].

I thought it was time to learn the more detailed background shorthand that includes the new properties like background-size and background-clip. However, the W3C’s spec for it isn’t actually supported by seemingly any browsers yet. Here’s what the new shorthand declaration of the code should be:

123
124
125

.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top / 30px 30px no-repeat;
}

Unfortunately, that valid line of CSS breaks in every browser I tried it on and results in the image not displaying at all. I ended up needing to define the background-size property separately after the shorthand declaration:

123
124
125
126

.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top no-repeat;
	background-size: 30px 30px;
}

The actual code will vary depending on what you’re doing but the important thing is to not forget to include the other background properties even if you’re not specifying them in your shorthand.

http://picturesofpeoplescanningqrcodes.tumblr.com/

Great tumblr blog showing all the people who actually scan QR codes in public.

http://blog.marketnet.com/index.php/2012/02/27/measuring-android-version-fragmentation/

My thoughts and some graphs on how bad of a problem Android’s fragmentation is for developers and users.

http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/

Code from the guys at the Filament Group that fixes that annoying bug where iOS incorrectly zooms your site when you flip from landscape to portrait and vice versa.

Moments after she came out of mommy here’s me and the new Baby E. Everyone is happy and healthy.

http://lokeshdhakar.com/projects/color-thief/

From the creator of the original javascript lightbox comes Color Thief, a jQuery plugin that analyzes the colors in a given image and returns the dominant color and the color palette. Has some incredible usage possibilites both from from a design angle and also in improving usability. Definitely looking for an excuse to use this on a project.

Shocked and saddened by the news of the passing of Apple CEO and founder Steve Jobs tonight. Despite his illness and his resignation as CEO just a few weeks ago, this still has affected me greatly. I had to excuse myself from dinner to compose myself and acknowledge my feelings when I learned of the news tonight, via a push message from CNN’s iPhone app of course. As US President Barack Obama put it, “There may be no greater tribute to Steve’s success than the fact that much of the world learned of his passing on a device he invented.”

From Apple.com:

Apple has lost a visionary and creative genius, and the world has lost an amazing human being. Those of us who have been fortunate enough to know and work with Steve have lost a dear friend and an inspiring mentor. Steve leaves behind a company that only he could have built, and his spirit will forever be the foundation of Apple.

http://www.infojocks.com/

I can only assume this chart is showing all Ohio State's various NCAA violations.

I love sports. I love designs. I lust infographics. What could be better than an awesomely designed poster that beautifully and nerdily displays detailed sports statistics? Designer Jeremy Yingling creates and sells great looking posters and prints that illustrate sports history through various types of data visualization techniques. The logo is great too. Definitely a Ohio/Pennsylvania area bias right now (Jeremey is an Ohio U grad), but hopefully Infojocks will add some Texas stuff so I have an excuse to give him some money.

Trent Walton has written (and designed) a great (and beautiful) article on dealing with content in responsive web designs that adapt to the width of visitors’ browsers. Content Choreography is a good discussion of content organization, changing designs too much between various widths, and the workflow needed when creating responsive web sites. Definitely a must read for any designer or developer.

http://mediaelementjs.com/

Great JavaScript script for HTML5 video and audio players with a Flash fallback. Includes plugins support and skins. Visitors get a good and consistent media experience regardless of what browser they’re using.