Transcript from the "Progressive Enhancement" Lesson
>> Jason Pamental: So the notion of progressive enhancement is creating a good baseline experience for any device, any user, any browser. Everything else is an enhancement. So the core experience is the HTML document, that's really the basis. So no styles whatsoever, that's the core. Is it marked up semantically correctly?
[00:00:22] So, do you have things in a sensible order? If you were to turn off the stylesheet and load it on your phone, that's kind of the litmus test right there. If you can read the page and you can get the content, and you can understand the hierarchy of headings to give you an idea of what you should be looking at and what's more important than something else, that's the basis.
[00:01:33] I mean, it's a small percentage of a really, really big number, the people that go to the gov.uk site, it's still a very large number of users. So the whole premise of progressive enhancement is that you're delivering something that will still function, everything else is an enhancement. So CSS is an enhancement to make the layout better, start to add more definition and hierarchy and structure to the way things layout on the page.
[00:02:00] The fonts are another enhancement. So that, the CSS, should be there to style things and create greater levels of more intentional hierarchy. But then the font itself coming in is another enhancement that will add a little bit more tone of voice, a little bit more brand recognition, a little bit more emotional appeal.
[00:02:23] So, what we want to make sure when we are adding in our fonts, notice the first line is just linking to the CSS. So that could be linking out to Google Web Fonts, it could be linking to Typekit, it could be linking to fonts.com, doesn't matter. First thing is you're linking to a style sheet.
[00:03:35] And that's using the font loading API, that's at the browser level, but it's also using session storage. So there's a weird little thing that Chrome does. Even if a font is in cache, it's probably still going to repaint the screen one page to the next. This completely avoids that.
[00:03:53] So, it's one simple little thing that gets rid of this really annoying bug, where even after a subsequent page loads the content comes in, then it redraws the whole screen in order to flip it over to the web fonts. For whatever reason, instead of having it go look at the browser cache, using session storage is faster.
[00:04:12] So, you don't see all of the code here, but what it's doing is it's going through, and we're constructing a promise that will list each of the different fonts that are being loaded, and it will check if they have been loaded, it'll set that session storage variable, and it just works every time.
[00:04:31] So it really dramatically speeds up the shift from content loading and content now in the web font itself. In some cases it becomes totally imperceptible. Again, this is the important part here. We're backwards compatible and we are future friendly by using that link to the CSS, and then adding everything else beyond that.