There’s a reason Apple and Wikipedia and MDN — there’s a reason they use CSS outline on their production sites (with an exception for Apple’s rounded buttons). But when you apply CSS outline to something, it creates an outline around that element. So. Are outlines just another term for borders or box shadows? Absolutely. Not at all.
In this lesson, we’ll cover ALL of it. How it’s different, how we can use the Focused (keyboard) state to make it work perfectly, how we can add an outline to a link. We'll cover some best practices when it comes to styling outlines on our sites (and a workaround Apple uses on Safari). At the very end, we’ll fix the tabbing behavior on Tiffany.com.
Part 1. Why outlines? In other words, why not borders or box shadows? Borders (this is standard CSS across the web) — borders can affect the size of elements and push things around. And box shadows don’t even show up on a lot of systems with High Contrast Mode turned on. Like in Windows, where another default outline will show up (which we'll get to in a bit). Those are a couple of the reasons these two properties are not like outlines.
Outlines are unique. Because outlines wrap around an element. So unlike borders, they don't affect size. And unlike box shadows, they're not ignored in High Contrast Mode (with the exception of the outline color, which is set in your High Contrast Mode settings). But there are very specific considerations around when to use outlines and when not to use outlines. And as a bonus, you can also add offset to outlines. And there’s no limit to the offset. Keep increasing, and increasing, until it goes so far beyond this display and ends up on Grimur’s display. Who’s not here today, because he’s visiting his family in Iceland.
Where it is 12:48 AM.
But outlines are more important than this. Because without custom outlines (this is just a plain site with no outline styles applied yet). Without outlines, if we use keyboard navigation to tab, moving focus through the page? Different browsers almost always produce inconsistent results.
Here’s tabbing focus on Google Chrome. Here it is on Safari. Here it is on Firefox. Here it is on Internet Microsoft Edge. And, of course, it’s different on the Arch Card from McDonald’s when you don’t forget to charge its battery before filming.
So the major note about CSS outlines is that we can override and really standardize the outline behavior on all browsers — so it’s legible and consistent. And it does this on the focused keyboard state.
So what happens if we go and apply the outline on the None state? (In other words, if we just add this property because we want the default look of things to have an outline like this?) Incredibly high risk. Here’s why. Setting CSS outline on the default (None) state? Here’s what happens if we tab through that page now. (It can really make even the default outline behavior in some browsers not very clear at all what's being selected.)
So let’s undo that, and frankly, we should light it on fire. Which we would actually do if we didn’t forget to charge the battery on our Arch Card before filming.
That leads us to using the Focused (keyboard) state.
And to be really clear: instead of applying the outline on the None state, we're going to go over to this dropdown menu here and make sure we're styling in the Focused (keyboard) state.
Now. Why the Focused (keyboard) state? Well we know the Focused state is what shows up when someone clicks on (or taps on) or tabs over to with the keyboard, but a lot of the time, designers and developers don't want that outline visible on every click or tap. Here, when we click, you can see before it goes to the destination, we see the outline even on click — not always ideal.
So, that’s where Focused (keyboard) comes in (or in CSS this is focus-visible). And styling here lets you control what things look like when you’re navigating with the keyboard. (But this won't affect what it looks like when you click with a mouse or tap with a finger.)
And this is where we can very clearly add our outline to a link.
So on this link button (we’re styling this button class), if we go in and select our Focused (Keyboard) state, we can go down and start configuring exactly what we want our outline to look like. (We can tweak the values to get them just how we want them — taking into account the contrast not only against the rest of the button, but against the content behind the button.)
And if we go to Preview this? We can click in and start tabbing through our links. (And this works on the fully published site, too, for tabbed navigation — but in Webflow in Preview mode, we want to make sure we’ve clicked into the canvas.)
We're starting here at the top (and obviously we haven’t styled CSS outlines on the nav links yet). But when we tab through our buttons, we can see that each button that has that class applied (it has the...)
Okay. It looks like the computer has to reboot because we did a macOS update.
But what you’d see if it wasn’t doing the update is that each button (with that class) — they each display the outline we just designed — as we tab (as we move focus) over each of them.
And it’s not just here. It’s on Chrome, Firefox, Microsoft Edge, Safari — you name it.
But if we click the button (or if we tap on it on an iPad for instance)? No outline styles are visible. In fact, nothing at all. Because macOS is still updating.
But fortunately, macOS has a keyboard shortcut that will bypass the install entirely, so we can get right back to our browser. Command, shift, cloverfield.
And there we go. And if we click on the button? (Or if we were tapping on a touch device?) No outline styles are visible. And that’s because we used the Focused (Keyboard) state — not the regular Focused state.
And leads us to best practices and this big question:
Does all of this mean we shouldn't use CSS outlines on the regular Focused state? In other words, should we only use the Focused (Keyboard) state when applying CSS outlines? And the answer is: it depends on your design preference. Wikipedia, for example, uses the focus state for their outlines, but MDN uses Focused (Keyboard) (or focus-visible in CSS). What’s the right way? What’s the wrong way? Is time travel even possible? There’s not always a clear answer. And that’s okay.
Regardless of your design preference, the process is simple: if you want your outlines visible on any click, or any tap, or any tabbing over things? Use the Focused state. BUT if you DO want your outlines accessible for keyboard navigation, but you prefer for your links to not show outlines on clicks or on taps? Use the Focused (keyboard) state.
Another best practice to cover here is about contrast. And this is where outlines shine. Because another reason default outline styles (browser defaults) aren’t ideal? The behavior (really the visibility) against different backgrounds (this is the default outline in Safari, for instance) it’s not always perfectly legible, especially if the outline blends in with the background.
So. How can we solve this and make it more uniform? In other words, can we just set all our links to the same CSS outline styling and forget about it? We absolutely can. But the reason we encourage testing is because we often have different looks. Maybe we do want the blue outline sort of like Apple has. It works great on a light or dark background. But if we do have a blue background? It doesn't work so well. So in this case, we might want to style the class or combo class on the button in the blue section and over in the Focused (Keyboard) state, we could set it to not blue. Maybe something like white. And that way, it's much more visible. Much more contrast against the background.
Now. Here’s an interesting observation. Pill-shaped link (it’s just a button with border radius to make its corners rounded). And in Safari (At least on 15.1 which we’re testing here)? If we tab through, 90-degree edges. What’s happening? Some browsers might (like Safari here) some browsers ignore border radius when showing the outline.
So on Apple.com, they get away with it by adding a SEPARATE style. Pill shaped boxes with rounded corners don’t use an outline at all; they use box shadow to achieve that effect. But we learned earlier that box shadows are IGNORED in Windows when you use high contrast. So does that mean Apple’s wrong? Is Google? For instance, on Windows, if you start typing in Google Docs with high contrast turned on, where’s the cursor? High contrast isn’t always perfect. So we want to do our BEST.
This is why it can be a really good idea to use CSS outline on ALL user navigable things. Links, buttons – anything clickable or tappable. Now: one caveat here. Windows will let users choose which color outlines show up as. So even though it’ll respect your CSS outline values, it can override the color itself.
So outlines work really well for clearly defining the currently focused element.
Again, none of these are absolute rules. And that’s the beauty (that's the flexibility) of CSS. We can do what works well for our design and someone else can do what works well for theirs. That means there’s going to be differing opinions, different conversations and debates — and that’s good. As long as we’re considering visibility and accessibility as we’re designing and developing — we’re going to have an infinitely better user experience than if we don't consider those things. And in the cases where we have something in between (or when something’s just a little off), there’s always Meg.
[Meg] Dear Tiffany,
It’s Meg again. Two things. First, your site uses borders when tabbing. CSS outlines would make this less janky. Second, Tiffany Blue isn’t blue at all; it’s turquoise.
Sincerely, Meg
[McGuire] So what’s going on here? On this page, as Meg said, they’re actually using borders when things are focused. And as we tab through, the images here are getting kind of resized. So if we go in and inspect the code, we can not only verify this (not only can we see that they’re using a border here when it’s focused — and we can toggle that on and off), but we just toggle it off completely. And we can add our own styling: “CSS outline” is not the name of the property. It’s outline: 2px solid #00a4b7. And to make sure it's getting prioritized, !important. Now, if we toggle that, we can see that unlike borders, it doesn’t mess with the size. Everything’s neatly preserved.
So. We covered a lot here. We covered what CSS outlines are: differences between borders — which can mess with sizing, like we saw on Tiffany.com; box shadows, which might not show up on high contrast devices; and outlines, which go around the element’s boundary. We covered the Focused (Keyboard) state, which shows its styling only when navigating with a keyboard. We covered adding the outline to a LINK. We covered best practices — how you can set specific higher-contrast outlines on a specific class. And we fixed Tiffany.com, so it uses outlines instead of borders.
But, that’s CSS outlines in the Webflow Designer.
