Articles in the ‘HTML5’ Category

CSS3 Object-fit Polyfill

TL;DR; I’ve made a polyfill for CSS3 Object-fit. Download it from Github here: https://github.com/steveworkman/jquery-object-fit

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.

LWS is 5 – Less on CSS and More on CSS!

This month was a very special meetup for London Web Standards – it’s 5th birthday celebrations! Yes, it’s hard to believe that 5 years ago in October three guys met up in a North London pub to talk about the web. To celebrate this momentous occasion, Imogen Levy baked us a massive 7-layer London Web Standards Cake (British Bake-off contender next year 2013 for sure). Imogen, thank you so much (from all of the LWS Organisers)!

It was also a big LWS for me personally, as I took the stage to talk about a pet topic of mine: Less, Sass and CSS Pre-processors. Gotta say, I had a lot of fun and got some really great questions and comments from the audience. I’ll definitely do it again.

So, the sketchnotes service is at half capacity today, it being quite hard to do sketchnotes of my own talk. The notes this month are of Peter Gasston’s talk on The CSS of Tomorrow, covering future specs that will bring some of the features from Less/Sass to CSS, and hugely improve the way we layout websites (finally!).

My Talk – CSS Pre-Processors: 21st Century CSS (HTML slides)

Peter Gasston The CSS of Tomorrow

My Sketchnotes from Peter’s Talk

The CSS of Tomorrow - Peter Gasston

The CSS of Tomorrow – Peter Gasston

Thanks again to everyone involved, we truly celebrated LWS’s birthday in style.

Sketchnotes from LWS Print

September’s London Web Standards Meetup featured UX designers and developers bringing print to life with their tales of making web apps for the FT (Matt Andrews) and an iPad app for The Week (Harry Brignall). Sketchnotes are below.

Sorry it’s not much of a write-up (and a month late) but better late than never.

CSS Bookshelf – now on github

My CSS bookshelf is now available on github as an easy download if you want one yourself. Given that the code is now 2 years old it’s showing its age somewhat, so I’ll give it a spruce up over the next few weeks. Things like:

  • Removing the jQuery dependency (as I know a lot more JS now)
  • Using a CSS pre-processor on the stylesheet
  • Adding CSS gradients for the spines of the books, because there’s no need for images for most of them

Take a look at the project and let me know what you think in the comments