This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Picturefill for Older Browser Compatibility" Lesson
[00:00:00]
>> Jen Kramer: Let me just do a quick search for Picturefill, visit the project site. Here we go. Okay, so this is scottjehl.github.io. So S-C-O-T-T-J-E-H-L, scottjehl.github.io/picturefill and so this is the responsive image polyfill. So he wrote this originally and has updated it regularly through the years to make sure that it's in sync with the picture tag.
[00:00:29] And one day, we won't need the polyfill anymore but the purpose of this polyfill is to make the picture tab work with older browsers. So the way to make this work is you can download the polyfill, I would recommend downloading picturefill.min.js. If you don't wanna download it, I've already given it to you in the end folder.
[00:00:56] So you have picture fields available to you there and you can copy that into your begin folder,
>> Jen Kramer: And then,
>> Jen Kramer: It will go ahead and tell you exactly how about to go about doing this. So the first thing to do is it says to put this little line of code, which calls the JavaScript file, put it in the head section of your HTML document.
[00:01:22] So unlike a lot of JavaScript these days that we put down just before the body tag, this is required to make the page display so it's gonna be better placed in the head of the document. So go on ahead and paste that in.
>> Jen Kramer: And this will be min.js.
[00:01:47]
>> Jen Kramer: All right, and then, if you need it even more cross-browser compatible, like the browser doesn't even know what the picture tag is, then there is this little bit of html that you can copy right here in the recommended usage. You don't have to copy the head tags, but copy everything or most everything else.
[00:02:07] I'm actually gonna copy the first script tag, and that will be a little bit of JavaScript that tells the browser what the picture tag is.
>> Jen Kramer: Simple enough that I even understand this JavaScript. Look, document.create a thing called picture. So that's what it's doing, it creates a picture HTML tag.
[00:02:32] And then the picturefill JavaScript will actually tell it what to do with it.
>> Jen Kramer: And then at that point, that's pretty much all you need to do. Look there's the URL that I was looking for right there. Line 13, so now I've added the polyfill to this. There's nothing I needed to tweak in the HTML because this is the HTML the way it's supposed to work and the polyfill is just making it cross browser compatible.
[00:03:02] Make sense, sweet. Feel free to take take your time and read through all of the things that he talks about in here. I've use picturefill in a very simple way. Picturefill is able to accommodate things like retina images and all kinds of other variations and so forth. There's a lot of stuff here, have fun reading through all of it.
[00:03:25] But I've showed you the simplest way to work with it, make sense?
>> Speaker 2: There is a comment on the picture.
>> Jen Kramer: Yes.
>> Speaker 2: The best part about picture is that you can load multiple image formats.
>> Jen Kramer: Yes.
>> Speaker 2: You provide a WebP version in the tag and Chrome automatically will use instead of jpeg, png.
[00:03:45]
>> Jen Kramer: Okay, so yes, that is absolutely true. You can use different image formats. The fact that I used all jpegs here appropriate to the picture that I'm using. But if you wanted to mix up whatever gifs and pngs and WebP and all the rest of it, you can do that crazy stuff.