Articles Tagged ‘web standards’

CSS3 Object-fit Polyfill

TL;DR; I’ve made a polyfill for CSS3 Object-fit. Download it from Github here:

The need for object-fit

A month ago, I was looking into creating a responsive grid full of images for a client. The width of the columns would vary depending upon device, and the dimensions and aspect ratio of the provided images could not be guaranteed.

The issue for me is keeping the images looking great, without skewing the dimensions and distorting the results, but I also needed them to expand or shrink to fit the boxes that they had been provided with.

A skewed picture

Knowing CSS, the property background-size: cover|contain would do this perfectly (See this A List Apart article for lots more detail), but this is for background images, and semantically, the images in my grid are part of the content, so should not be background images.
Looking for an equivalent, I found Object-fit: part of the CSS3 Image Values and Replaced Content spec. Unfortunately, browser support for this is very poor; this is the current browser implementation of this property:

As you can see, as of September 2012, only Opera support this feature! Side note: there is one other browser (there has to be for this to be for the spec to reach candidate recommendation) which is the HP TouchPad, not very useful for the majority of users

This isn’t going to get anyone very far, given that over 90% of all browser usage doesn’t support this feature. So, whilst browsers catch up, we have to use a polyfill to re-create this functionality with JavaScript.

Object-fit polyfill

The polyfill is based on jquery-object-fit by Simon Schmid, to which I’ve made some improvements:

  • Added support for cover
  • Fixed the implementation for IE and Firefox
  • Added feature detection so it uses the native implementation where possible
  • Made it re-calculate on resizing the browser for responsive layouts
  • Added a more tests to the suite

The results

Object-Fit tests

Object-fit grid of images

A responsive grid of images with the correct aspect ratios

What you get is a simple polyfill for object-fit which follows the spec as closely as it can. There is one main difference:

  • In a native implementation the image size remains the same and the picture within the image changes its dimensions, revealing grey letterboxed content. In the poly fill, an extra div is created around the image to take its dimensions and then the image is resized within that to provide the effect.

The source code is on github so please contribute if you can. I’ll be keeping this up-to-date so follow me @steveworkman on Twitter for the latest updates.

My thanks to Chris Mills of Opera for his articles and helping to explain how on earth all this works, and to Tab Atkins and the CSS WG for spelling it out. Hopefully there will be some more work on this feature soon. You can track the status of its implementation in Gecko (Firefox) and Webkit (Chrome et al) on their bug trackers (see links).

Please, let me know what you think in the comments and on github.

Real World HTML with Marcus Alexander – #LWSWorld

This month, Marcus Alexander of EMC Consulting and Arran Ross-Paterson (of this parish) talk about HTML in the real world, dealing with clients, and what a quality project actually looks like.

LWSWorld - Real world HTML - Marcus Alexander

Everything is designed that way for a reason
Semantic HTML may be brilliant, but all those extra bits are in there for a reason. Until you understand them, don’t mess with them

The best solution is the one that meets the requirements
Clients don’t really care about the technology, just about getting things done on time and on budget. If a solution meets all the requirements, it doesn’t matter how hacky it is, it’s the right solution.

Ask the right questions up front
The client may not have thought of everything, so go through your standard checklist of questions and get everything agreed before you start.

Bugs happen, deal with it
100 bugs in a project is normal, most of them will be problems with other people’s code. Deal with them and try not to let the client get carried away. Products will ship with bugs, just deal with them.

Developers will build a rocket ship to get to Ikea
And then they’ll only leave room in the rocket for a hot dog and some light bulbs. Internal coding standards aren’t very useful, try code reviews and examples of structure instead.

Deployment scripts are your friend
They do all the grunt work for a release for you. Make use of ANT or MSBuild to speed things up.

Finally, thanks to Marcus for a great talk. Update: his slides are on slideshare: See my notes on this meetup’s other talk: Arran Ross-Paterson on Why validate