“Our work here is done” – the immortal final words of the web standards project. Please, read the post, for me it’s a tearjerker, and I’ll tell you why.
Before I left uni, when I still didn’t know what I wanted to do, I found the WaSP group online and thought, “that’s amazing – people from all walks of life and competing companies no less, all getting together to make possibly the world’s most important invention a better place. I want to do what they do”
Many years later, as the web standards project closes its doors, I help to run a web standards meetup group, speak at conferences on web standards and evangelise their use every day. Thank you WaSP members for inspiring me to be where I am today.
Thank you so much
Massively exciting news: I am going to be speaking at the Future of Web Design London conference on their Rising Stars track! I’m going to be talking about “Putting your site on a diet” – an educational/technical talk on reducing the size of web pages whilst keeping all of the great graphics and interaction that is possible with the latest browsers.
I’m really pleased to be doing this talk, if you’ve got any specific topics you’d like me to mention, put them in the comments or twitter @steveworkman
It’s been an amazing year, getting married, the olympics, doing my first public speaking gig, so many highlights. Here’s just a few in pictures
-
-
In March I was lucky to be one of the first 5000 to cross the finish line in the Olympic stadium. Incredible feeling – honestly nothing like it
-
-
Best. Day. Ever.
-
-
Our honeymoon, an incredible 2 weeks in Kenya and Zanzibar
-
-
We went to see the Olympics this summer – brilliant spectacle and amazing privilege to be there
-
-
I went to Istanbul with work – had to get 14 iPads through security in my hand luggage. Tough assignment, but amazing experience
-
-
I did my first talk @webstandards on CSS pre-processors (less/sass) – looking forward to doing many more
-
-
I was invited to the guardian mobile business summit. Great to be invited
-
-
Working on my current project www.paperfectcostgrid.com – planning world domination
2013 is already shaping up to be a landmark year, I’m hugely excited about it already and can’t wait to share the first bit of news in the next few weeks (no, my wife isn’t pregnant – see this: http://instagram.com/p/T5k0Nqv0TL/)
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.
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
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.
