It’s said that the best way to learn about something is to teach it. I certainly found that to be true when I was writing the web.dev course on responsive design.

I felt fairly confident about some of the topics, but I felt somewhat out of my depth when it came to some of the newer modern additions to browsers. The last few modules in particular were unexplored areas for me, with topics like screen configurations and media features. I learned a lot about those topics by writing about them.

Best of all, I got to put my new-found knowledge to use! Here’s how…

The Session is a progressive web app. If you add it to the home screen of your mobile device, then when you launch the site by tapping on its icon, it behaves just like a native app.

In the web app manifest file for The Session, the display-mode property is set to “standalone.” That means it will launch without any browser chrome: no address bar and no back button. It’s up to me to provide the functionality that the browser usually takes care of.

So I added a back button in the navigation interface. It only appears on small screens.

Do you see the assumption I made?

I figured that the back button was most necessary in the situation where the site had been added to the home screen. That only happens on mobile devices, right?

Nope. If you’re using Chrome or Edge on a desktop device, you will be actively encourged to “install” The Session. If you do that, then just as on mobile, the site will behave like a standalone native app and launch without any browser chrome.

So desktop users who install the progressive web app don’t get any back button (because in my CSS I declare that the back button in the interface should only appear on small screens).

I was alerted to this issue on The Session:

It downloaded for me but there’s a bug, Jeremy - there doesn’t seem to be a way to go back.

Luckily, this happened as I was writing the module on media features. I knew exactly how to solve this problem because now I knew about the existence of the display-mode media feature. It allows you to write media queries that match the possible values of display-mode in a web app manifest:

.goback {
  display: none;
}
@media (display-mode: standalone) {
  .goback {
    display: inline;
  }
}

Now the back button shows up if you “install” The Session, regardless of whether that’s on mobile or desktop.

Previously I made the mistake of inferring whether or not to show the back button based on screen size. But the display-mode media feature allowed me to test the actual condition I cared about: is this user navigating in standalone mode?

If I hadn’t been writing about media features, I don’t think I would’ve been able to solve the problem. It’s a really good feeling when you’ve just learned something new, and then you immediately find exactly the right use case for it!

Let’s start this installment with a vocabulary pop-quiz! Everybody loves those, right? How would you define lens, frame and model?

Speaking of quizzes:

1. What does text-size-adjust do?
2. Do you need it in your CSS?
3. And if not, why not?

1. Allows you to control the amount an iPhone increases a site’s font-size when viewed in landscape.
2. Yes, most likely, cause without it, your stuff is, like, pro’ly blowing up…
3. Nope, wrong.

Kilian Valkhof explains in more detail…

It is not often that I open a website and stop in my tracks, in a good-way… But Brian Lovin‘s site layout is awesome… Read all about how it works.

I recently wrote about fuite, a CLI tool for finding memory leaks. And from the guy that wrote fuite, here’s a bit more about memory leaks, how frustrating they can be to find, and how addictive they can be to fix…

We all do it, assume something is safe to do because it only applies to “this” situation, right? Well, it’s encouraging to hear that even the Jeremy Keiths of the world makes such assumptions, and it’s inspiring to read about their solutions!

Who would have thought that watching boxes fold and unfold themselves could be so much fun? Apparently Jhey Tompkins did…

[I]n a year the web as whole uses more electricity than the UK. The internet is annually responsible for emissions equivalent to Germany (the world’s 7th largest polluter). That’s more polluting than the civil aviation sector.

Wait, what now???

Bramus Van Damme introduces us to CSS @Layers, which promise to be one of the biggest structural changes the language has seen in a long time… Define all your layers upfront, in a single line; the order the layers are defined creates their cascade specificity order:

@layer reset, base, theme, utilities;

Then, throughout your CSS, append rules to each of your layers:

 @layer reset { /* Append stuff to layer named "reset” */ } @layer theme { /* Append stuff to layer named "theme” */ } @layer base { /* Append stuff to layer named "base” */ } @layer theme { /* Append more stuff to layer named "theme” */ } 

Already shipping in Firefox and Chrome, in preview in Safari, and behind a flag in Edge… Tomorrow is nigh!

Sticking with Bramus for a sec, let’s also walk through the rainbow-farting Unicorn that is Container Queries! Although still behind a flag in Edge and Chrome, in preview in Safari, and apparently not even on the horizon in Firefox (?), there is a plug-and-play polyfill available that only loads if native support is lacking. And although the polyfill relies on ResizeObserver, MutationObserver and :is(), as discussed in a previous installment of Today’s Readings, support there is not a problem…

Now moving from tomorrow to today (or almost yesterday by now), Chris Ferdinandi guides us through setting up and installing a Service Worker. With only a few basic requirements, the benefits of adding a Service Worker are huge!

I love Chris’ idea of putting the registration right in his HTML to get it registered as fast as possible! I also love the inclusion of the bug-fix bit from Paul Irish! As always, great tips, Chris!

Turning a GitHub page into a Progressive Web App. Oh, that’s nice, Christian Heilmann…

And finally, sticking with Christian for a sec, as coders, what do we do when we need a tool but cannot find it? Why, we make it ourselves, of course! Bravo on solving the problem, Christian, and, as importantly to me, for re-instilling the thinking that, “yes, stuff should work without an Internet connection if it can, because… why wouldn’t it?”

Happy reading, Atg

Top⇪

Did you know about the display-mode media query ? Thanks @adactio for the tip ! adactio.com/journal/18762