234: Design v18 and Responsive HTML Videos - CSS-Tricks

Design v18

I don’t think we’ve linked to this in the newsletter yet, but Chris wrote a fantastic post about the latest design of CSS-Tricks and there’s an awful lot to dig into here. Chris compares the previous version to the latest when it comes to visual design, typography, CSS, and the overall performance of the site. He also uses Project Wallace to analyze the CSS and see what improvements could be made in the future, too.

I particularly like what Chris has to say about design and systems:

Maybe in a perfect world, a perfect site would have a perfect content strategy such that every single article has a perfect featured image. A matching color scheme, exact dimensions, very predictable. But this is no perfect world. I prefer systems that allow for sloppiness.

This idea of a design system that can be moved and pushed is making me nod furiously as I read all this.

HTML Video Sources Should Be Responsive

It took years to propose, test, and implement a responsive image solution in browsers, but now we can benefit from all that hard work when we decide to load smaller images for certain devices. Just like this:

<picture>
  <source media="(min-width: 1200px)" srcset="image-large.png 1200w">
  <source media="(min-width: 800px)" srcset="image-medium.png 800w">
  <img src="image-small.png" alt="Image description">
</picture>

But earlier this month, Scott Jehl argued that we should be able to make the video element responsive, too:

Recently, I was adding a video to a website. Intuitively, I started to mark up the HTML <video>‘s <source> elements with media attributes to specify the viewport sizes that each of my video source files would best serve. As I was working, I vaguely recalled discussions years ago that made me question: “wait, is media support available for video?” A quick check over at MDN confirmed that indeed it was… NOT. Support was removed from browsers and the spec despite having no HTML-based alternatives to take its place (thankfully, Webkit browsers still support it, so browser support does still exist!).

As Scott argues, it’s sort of bonkers that you can’t change the size of the video file you’re sending over the wire the same way we can with images. His proposal looks something like this:

<video>
  <source media="(min-width: 1200px)" src="video-large.webm 1200w" type="video/webm">
  <source media="(min-width: 1200px)" src="video-large.mp4 1200w" type="video/mp4">
  <source media="(min-width: 800px)" src="video-medium.webm 800w" type="video/webm">
  <source media="(min-width: 800px)" src="video-medium.mp4 800w" type="video/mp4">
  <source src="video-small.webm" type="video/webm">
  <source src="video-small.mp4" type="video/mp4">
</video>

Scott then went ahead and made a repo on GitHub that explains everything in more detail.

You want `overflow: auto`, not `overflow: scroll`

This is a good reminder from Kilian Valkhof: overflow: auto is probably what we should use most of the time:

Every now and then a web developer using a Mac discovers that their beautiful design is littered with scroll bars on other platforms. Either because someone points it out to them or because they attach a mouse to their laptop, both of which make the scroll bars appear.
Often, macOS hiding scroll bars by default is blamed for this (I know I’ve done that in the past). But the actual culprit is developers using overflow: scroll when they mean overflow: auto.

The difference is subtle but important. overflow: auto only shows the scrollbar when it’s needed, whereas overflow: scroll always shows the scrollbar. I’ve forgotten about this a bunch of times and ended up shipping some pretty gnarly interfaces because of it.

Speaking of which, here’s a fun idea: what if we only show the scrollbar when hovering over an element? That’s what Thomas Gladdines did in this demo. It uses a mask to hide the scrollbar and then hides the mask on hover.

Animating with Lottie

Idorenyin Udoh wrote a tutorial about how to make lovely, complex animations with Lottie. He even shows how to use it with Adobe After Effects get some remarkable results. You can even get animations from archives — like this one with hundreds of animated icons available — and export the JSON file into Lottie. You don’t necessarily have to be an amazing animator to make your website really pop and wow folks.

Fading in a Page on Load with CSS & JavaScript

Louis Lazaris writes about why we’d want to fade in a webpage on the first view:

I know nowadays we’re obsessed in this industry with gaining every millisecond in page performance. But in a couple of projects that I recently overhauled, I added a subtle and clean loading mechanism that I think makes the experience nicer, even if it does ultimately slightly delay the time that the user is able to start interacting with my page.

The way he’s doing that is to…

Hide the body (with JavaScript) right away with a CSS class that declares opacity: 0
Wait for all the JavaScript to execute
Unhide the body by transitioning it back to opacity: 1

Typographica’s Favorite Typefaces of the Year

If you’re in the market looking for a new font then it’s worth checking out Typographica’s enormous collection of typeface reviews. Back in December, they published dozens of reviews that might be able to help you out if you’re looking to find that special something for your blog or a brand new project.

It’s bonkers how many typefaces came out in 2019 alone; blackletters, sans-serifs, display faces… the list just goes on and on.

Algolia

Build 💪 search into your product with our hosted search API. We maintain the infrastructure and API clients for all important languages, and give you extensive docs, tooling and support. Free plan for <10000 search requests.

Try us out, it’s free.

[Chris]: ButtonBuddy is pretty cool. You pick colors for the button, and it doesn’t just make sure the text and background of the button itself have enough contrast, but it factors in the background the button is on as well. And it factors in the focus style of the button, making sure you’re really getting it right.

The output? Just some CSS custom properties. The idea is you use them when crafting your button. ButtonBuddy doesn’t really care about your border-radius and whatnot. Although that’s a smidge funny, because if your button has borders or shadows or the like, you’d think that would factor into the contrast of them (although probably not in a testable way).

It reminds me of my own article A Whole Bunch of Places to Consider Contrast in a Single Paragraph in which the point is that contrast isn’t as simple as just looking at two colors and making sure it’s enough contrast. There might be a half dozen states or more, all of which have different styling that you need to consider (example: when the text is highlighted).