Screwing the srcset
On This Page:
As much as I wasn't convinced with how the addition of srcset was included in the spec, what a difference a day makes.
At first I was not a fan of it's appaling syntax, but after a quick email from Jeremy in the WhatWG email list I was a little more convinced.
In Fact.
Before we go any further you should really read Jeremy's fantastic post of calmness and tranquility in explaining what has happened up until this point.
Back yet? You migh want to read Dr. Bruce's post to.
You there? Cool. Now my issue is with the current polyfill that 'showed itsself' in my timeline on the twitter this morning.
A srcset polyfill
Ok, There's quite a bit of the polyfill I don't like so let's make a start ok? Ready? Let's go.
Let's have a look at the polyfill's HTML
no ![]()
In the polyfill there is not an initial image file like there is in the spec. I don't think that's good at all, it's not very 'future friendly'. So to fix that, let's add it to the HTML. While we're at it, let's tidy it up a little too.
That's better, but that's not it is it?
Display: none; is utter filth
As you can see in the HTML above the polyfill has put display: inline; inline with the HTML rather than within the CSS. Let's fix that.
So first up let's remove it from the HTML
Now we've done that, let's add it to the CSS
img { display: none; }
Nice, sorted right?
Switching around the JavaScript
At the bottom of the JS file, where the original polyfill is hacking around the tag it does this -
// Remove the stupid display:none made to hide the alt-text img.style.display = ''
As we've now put display:none; in the CSS we need to change that by simply added 'block' where '' is (let's change the comment too) -
// Change the style of the element to display decided upon image
img.style.display = 'block'​
This now means that the polyfill will display the . Good? Well, just one more thing.
No, no, no, no,
At the end of the polyfill HTML code is the
noscript img { display: inline; }
Excellent, that's great, isn't it? We fixed the internet right?
Ta-Da!
So. Here's all the code for the polyfill that I've edited to this state.
But, Two images?
Unfortunately because how browsers work this polyfill has the bastard audacity to download two images when all we need is one. This is because of our using of display:none; and calling an image at first then, with Javascript, calling the 'appropriate' image. That's an extra http request that could be costly and also some more page weight that could be detrimental. For the short term, that's something that could be ok though right?
Well, not really...
That's about as far as my 'knowledge and understanding' can probably take it. I'm sure it can be improved upon, refactored, edited, fucked with and corrected. I do feel it's a little bit 'cleaner and meaner' than the original polyfill I've edited.
