[Robin]: One of the niftiest layout effects I’ve seen in quite a while has to be the footer that slides out from the bottom of The Markup. Chris calls this technique The Slideout Footer, and in that post, he looks into how they made this simple but rather lovely thing:
Here’s the trick:
- The main content area is at least
100vhtall. Most sites are anyway, but just to be safe. - The main content area has a solid background as well, which covers the footer we’re going to hide behind it.
- The footer comes after the main content area in the HTML, so to make sure the main content area sits on top, you’ll need a little relative positioning and
z-index. - The footer uses sticky positioning to place itself on the bottom.
Last week we published our complete guide to calc() which runs through everything you need to know. I reckon calc() is one of the most useful things in CSS land I use it all the time. Here’s one particularly useful thing it can do:
.element {
/* Percentage units being mixed with pixel units */
width: calc(100% - 20px);
}Skip to content links improve the accessibility of our websites, especially for screen readers, and Paul Ryan has written up a nice approach to make the,! There are a few examples he looks at before showing us one way to implement them ourselves.
On the CSS-Tricks site, you can find our skip link in DevTools just like this:
Also!Chris gathered a few sites together that let you grab a quick background pattern for your site — CSS3 Patterns Gallery, the ever-so-lovely Tartanify, and Hero Patterns are all pretty handy, for example.
I also really like this noise texture generator, too.
By default, a video on iOS will be fullscreen when you hit play (which is sometimes pretty annoying, to be honest). But, the playsinline attribute can be used like this:
<video src="..." controls playsinline></video>And that will prevent the default behavior. The browser will play that video just where it is without taking up the fullscreen. Very useful, as Chris wrote this week, because users can still expand the video if they want to, but it’s optional.
Bradley Taunt wrote a great piece about base64 encoding and how we can use it. He describes it as…
[…] an extremely overlooked process for displaying fonts, images, documents, spreadsheets, etc. […] Although it may not be the most efficient (or easy) way to display and include these elements it can be a lifesaver in certain situations.
Bradley shows an example of how to replace an image with a base64 image:
<img src="/path/to/image.jpg" alt="Cool image">Which can then be replaced with something like…
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAASwCAYAA...PnyMAAAAASUVORK5CYII=" alt="Cool image">That’s pretty neat! I can’t remember the last time I used a base64-encoded asset because of the caveats that Bradley mentions in that post, but it’s certainly been useful a few times in the past. Definitely a good trick that’s worth keeping around for when you need it.
Here’s a CSS property I had forgotten all about: isolation. It allows you to make certain elements ignore mix-blend-mode just like this:
Geoff wrote a great piece about isolation not so long ago that’s worth reading through.
Adrian Bece wrote about neuomorphism and CSS, noting a bunch of interesting trends in UI design. Adrian then walks us through how we can replicate a bunch of these trends with CSS, like a drop or inset shadow within cards and buttons.
Adrian’s final take is certainly interesting, too:
In practice, a full-scale neumorphic design system probably cannot be used on a website. It’s simply too restrictive in what colors can be used. Plus, the fact that it results in soft contrasts prevents it from being used on interactive elements, like buttons and toggle elements. Sure, it’s aesthetically-pleasing, modern and unique, but that shouldn’t come at the expense of usability and accessibility.
Here’s a mighty fine post about React’s new Suspense feature (that’s still not production-ready but is super interesting either way). Adam Rackis describes like this:
Suspense is all about maintaining a consistent UI in the face of asynchronous dependencies, such as lazily loaded React components, GraphQL data, etc. Suspense provides low-level API’s that allow you to easily maintain your UI while your app is managing these things.
Or perhaps the more interesting technical part is this bit:
What Suspense adds is the ability to have a component notify React at render time that it’s waiting for asynchronous data; this is called suspending, and it can happen anywhere in a component’s tree, as many times as needed, until the tree is ready. When a component suspends, React will decline to render the pending state update until all suspended dependencies have been satisfied.
Why is accessibility important and why should we care? Well, that’s just what Bruce Lawson digs into this bumper post where he lists the many ways we can improve web accessibility, too. Here are a few examples Bruce makes that I absolutely love (and need to remember myself):
- Don’t remove the focus ring
- Make links look like links
- Make form elements look like form elements
- Label all form inputs
- Left align text
- Make sure text contrast is good
Oh and here’s a great tool called Accessible colors that does just what it says on the tin: you can run it against your website to check if text has the right color contrast.
On that note about accessibility, it’s important to remember that although it’s a subject we should care deeply about, we shouldn’t feel bad about it. Zell Liew on overcoming his panic towards accessibility:
I’ve been afraid of touching accessibility for a few years now. This fear magnified when I began writing the accessibility lessons for Learn JavaScript.
Today, I want to share with you why I became afraid of accessibility, and how I overcame this fear.
I’ve definitely felt like this in the past and it’s a good reminder that we should teach folks about accessibility best practices without necessarily making them feel like an idiot.
Sponsor
TypeRocket
Meet the Laravel of WordPress frameworks. Designed for pro developers, TypeRocket brings 27+ custom fields, MVC, code sanity, and more into your workflow so you can get things done in half the time and without plugin chaos.
Louis Hoebregts has been messing about with the Web Animations API to help create particle effects and jumps into making this rather lovely bubbly effect when you click:
Not only that, but Louis then goes completely off the deep end with all these bonkers animations that I just love:
Have you ever seen a CSS selector that you didn’t understand in a codebase? I know I sure have! Kitty Giraudel comes to the rescue with this fabulous tool called Selectors Explained. It breaks down complex selectors by explaining them in plain English.
Here’s a simple example where we’ve written something like:
.card .header { }
Perhaps here’s a more realistic example. What if we add a little more complexity?
I really like that it shows you the specificity of a selector, too! That’s using the CSS specificity calculator which I had never seen before and it gives you a numeric value of a selector and it even has a standalone website for itself:
That makes me wonder if there’s a lint tool that could help us avoid writing CSS like this in our codebases and… please hold… [GASP] … there is! It’s called selector-max-specificity and you give it a number like the one above and it will flag violations as warnings. Neato!
Sponsor
Netlify
Netlify makes web hosting suuuuuuper easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live — all while running your build.
? A few hot links
[Chris]: Here’s a couple of good links I’ve saved recently.
- Lynn Fischer retains title as best and most interesting web designer in the universe with some fantastic TV-based projects like Dress David Rose (Schitt’s Creek) and The Food Place (The Good Place).
- HSL takes angle values for the hue, huh!
- Experimental Chrome feature: Tab Groups
- MonaLisa is the latest release in what seems like a sudden surge in fonts designed for coding. CodePen added three of them recently. MonaLisa isn’t open source or free like a lot of them, it’s $59 as long as you agree to link back to them or $279 if you don’t want to do that. Even pricier than the popular Operator Mono at that level. But that’s for web use. Not sure which one you buy if you just want to use it in your code editor… probably just the $59 one.
