Tag: Trick

The :focus-visible Trick

Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element.

But if you use :focus alone for this, it has a side effect that a lot of people don’t like. It means that when you click (with a mouse) on an interactive element, you’ll see the focus style. Arguably, you don’t need that feedback as a mouse user, because you just moved your cursor there and clicked. Whatever you think of that, it’s annoyed so many people over the years that they remove focus styles entirely, which is a gnarly net loss for accessibility on the web.

What if we could apply focus styles only when the keyboard is used to focus something, not the mouse? Lea Verou put a finger on this a few years back:

That was in response to Chrome dropping the feature behind a flag. Clever clever.

Fast forward a couple of years, Chrome is releasing it without a flag. They are on board with Lea’s idea:

By combining :focus-visible with :focus you can take things a step further and provide different focus styles depending on the user’s input device. This can be helpful if you want the focus indicator to depend on the precision of the input device:

/* Focusing the button with a keyboard will show a dashed black line. */ button:focus-visible {   outline: 4px dashed black; }    /* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */ button:focus:not(:focus-visible) {   outline: none;   box-shadow: 1px 1px 5px rgba(1, 1, 0, .7); }

I might suggest trying those selectors without the button, making them globally applied!

There is more to dig into, so I’ll link up some more stuff here:

  • The Chromium Blog post covers the heuristics of the selector. It’s tricky. It’s like there is an algorithm to determine if :focus-visible is going to match or not, which you just largely need to trust. It also covers the idea that Firefox has long had :-moz-focusring, but the behavior is different enough that they don’t recommend using it if you’re shooting for consistent behavior.
  • Matthias Ott blogged about it with some good info, like using the official polyfill and how to look at the styles properly in DevTools (there is a new checkbox for it).
  • We’ve covered this before. In that, we noted Lea’s tweet that she thought usage would explode when it ships for real. Let’s see (and hope)!
  • Our almanac entry has a bunch of details.

The post The :focus-visible Trick appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

,

The GitHub Profile Trick

Monica Powell shared a really cool trick the other day:

The profile README is created by creating a new repository that’s the same name as your username. For example, my GitHub username is m0nica so I created a new repository with the name m0nica.

Now the README.md from that repo is essentially the homepage of her profile. Above the usual list of popular repos, you can see the rendered version of that README on her profile:

Lemme do a lame version for myself real quick just to try it out…

OK, I start like this:

Screenshot of the default profile page for Chris Coyier.

Then I’ll to go repo.new (hey, CodePen has one of those cool domains too!) and make a repo on my personal account that is exactly the same as my username:

Screenshot showing the create new repo screen on GitHub. The repository name is set to chriscoyier.

I chose to initialize the repo with a README file and nothing else. So immediately I get:

Screenshot of the code section of the chriscoyier repo, which only contains a read me file that says hi there.

I can edit this directly on the web, and if I do, I see more helpful stuff:

Screenshot of editing the read me file directly in GitHub.

Fortunately, my personal website has a Markdown bio ready to use!

Screenshot of Chris Coyier's personal website homepage. It has a dark background and a large picture of Chris wearing a red CodePen hat next to some text welcoming people to the site.

I’ll copy and paste that over.

Screenshot showing the Markdown code from the personal website in the GitHub editor.

After committing that change, my own profile shows it!

Screenshot of the updated GitHub profile page, showing the welcome text from the personal website homepage.

Maybe I’ll get around to doing something more fun with it someday. Monica’s post has a bunch of fun examples in it. My favorite is Kaya Thomas’ profile, which I saw Jina Anne share:

You can’t use CSS in there (because GitHub strips it out), so I love the ingenuity of using old school <img align="right"> to pull off the floating image look.


The post The GitHub Profile Trick appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, ,
[Top]

A Trick That Makes Drawing SVG Lines Way Easier

When drawing lines with SVG, you often have a <path> element with a stroke. You set a stroke-dasharray that is as long as the path itself, as well as a stroke-offset that extends so far that you that it’s initially hidden. Then you animate the stroke-offset back to 0 so you can watch it “draw” the shape.

Figuring out the length of the path is the trick, which fortunately you can do in JavaScript by selecting the path and doing pathEl.getTotalLength(). It’ll probably be some weird decimal. A smidge unfortunate we can’t get that in CSS, but c’est la vie.

Here’s the trick!

You don’t have to measure the length of the path, because you can set it.

So you do like:

<path d="M66.039,133.545 ... " pathLength="1" />

That doesn’t do anything by itself (as far as I know). It’s not like that only draws part of the path — it still draws the whole thing like as if you did nothing, only now the “math” of the path length is based on a value of 1.

Now we can set the stroke-dasharray to 1, and animate the offset in CSS!

.path {   stroke-dasharray: 1;   stroke-dashoffset: 1;   animation: dash 5s linear alternate infinite; }  @keyframes dash {   from {     stroke-dashoffset: 1;   }   to {     stroke-dashoffset: 0;   } }

Which works:

See the Pen
Basic Example of SVG Line Drawing, Backward and Forward
by Chris Coyier (@chriscoyier)
on CodePen.

High five to Adam Haskell who emailed me about this a few months back.


Hey, speaking of SVG line drawing: Lemonade made a landing page for their 2019 charity that uses scroll-triggered SVG line drawing up and down the entire page. They did a behind-the-scenes look at it, which I always appreciate.

animated GIF of line drawing on Lemonade page - as page scrolls down a teddy bear shape is drawn

The post A Trick That Makes Drawing SVG Lines Way Easier appeared first on CSS-Tricks.

CSS-Tricks

, , , ,
[Top]

The Trick to Animating the Dot on the Letter “i”

Here’s the trick: by combining the Turkish letter “ı” and the period “.” we can create something that looks like the letter “i,” but is made from two separate elements. This opens us up to some fun options to style or animate the dot of the letter independently from the stalk. Worried about accessibility? Don’t worry, we’ll cover that the best way we know how.

Let’s look at how to create and style these separate “letters,” and find out when they can be used, and when to avoid them.

Check out some examples

Here are some different styles and animations we can do with this idea:

See the Pen
Styles and animations
by Ali C (@alichur)
on CodePen.

Because both parts of the letter are regular Unicode characters, they will respect font changes and page zoom the same as any other text. Here’s some examples of different fonts, styles, and zoom levels:

See the Pen
Different fonts and zoom
by Ali C (@alichur)
on CodePen.

Step-by-step through the technique

Let’s break down how this technique works.

Choose the Unicode characters to combine

We are using the dotless “i” character (ı) and a full stop. And, yes, we could use other characters as well, such as the dotless “j” character (ȷ) or even the accents on characters such as “ñ” (~) or “è” (`).

Stack the characters on top of each other by wrapping them in a span and setting the display property to block.

<span class="character">.</span> <span class="character">ı</span>
.character {   display: block; }

Align the characters

They need to be close to each other. We can do that by adjusting the line heights and removing the margins from them.

.character {   display: block;   line-height: 0.5;   margin-top: 0;   margin-bottom: 0; }

Add a CSS animation to the dot element

Something like this bouncing animation:

@keyframes bounce {   from {     transform: translate3d(0, 0, 0);   }    to {     transform: translate3d(0, -10px, 0);   } }  .bounce {   animation: bounce 0.4s infinite alternate; }

There’s more on CSS animations in the CSS-Tricks Almanac.

Checking in, here’s where we are so far:

See the Pen
Creating the letter
by Ali C (@alichur)
on CodePen.

Add any remaining letters of the word

It’s fine to animate the “i” on its own, but perhaps it’s merely one letter in a word, like “Ping.” We’ll wrap the animated characters in a span to make sure everything stays on a single line.

<p>   P   <span>     <span class="character">.</span>     <span class="character>ı</span>    </span>   ng </p>

There’s an automatic gap between inline-block elements, so be sure to remove that if the spacing looks off.

The final stages:

See the Pen
Adding the letter inside a word
by Ali C (@alichur)
on CodePen.

What about SVG?

The same effect can be achieved by creating a letter from two or more SVG elements. Here’s an example where the circle element is animated independently from the rectangle element.

See the Pen
SVG animated i
by Ali C (@alichur)
on CodePen.

Although an SVG letter won’t respond to font changes, it opens up more possibilities for animating sections of letters that aren’t represented by Unicode characters and letter styles that don’t exist in any font.

Where would you use this?

Where would you want to use something like this? I mean, it’s not a great use case for body content or any sort of long-form content. Not only would that affect legibility (can you imagine if every “i” in this post was animated?) but it would have a negative impact on assistive technology, like screen readers, which we will touch on next.

Instead, it’s probably best to use this technique where the content is intended for decoration. A logo is a good example of that. Or perhaps in an icon that’s intended to be described, but not interpreted as text by assistive technology.

Let’s talk accessibility

Going back to our “Ping” example, a screen reader will read that as P . ı ng. Not exactly the pronunciation we’re looking for and definitely confusing to anyone listening to it.

Depending on the usage, different ARIA attributes can be added so that text is read differently. For example, we can describe the entire element as an image and add the text as its label:

<div role=img aria-label="Ping">   <p>P<span>.</span><span>ı</span>ng</p> </div>

This way, the outer div element describes the meaning of the text which gets read by screen readers. However, we also want assistive technology to skip the inner elements. We can add aria-hidden="true" or role="presentation" to them so that they are also not interpreted as text:

<div role=img aria-label="Ping">   <p role="presentation">P     <span>.</span>     <span>ı</span>   ng</p> </div>

This was only tested on a Mac with VoiceOver in Safari. If there are issues in other assistive technology, please let us know in the comments.

More Unicode!

There’s many more “letters” we can create by combining Unicode characters. Here’s a full outline of common glyphs, or you can have some fun with the ones below and share your creations in the comments. But remember: no cool effect is worth compromising accessibility on a live site!

First Glyph Second Glyph Combined
ı . i
ȷ . j
n ~ ñ
a e æ
a ` à

The post The Trick to Animating the Dot on the Letter “i” appeared first on CSS-Tricks.

CSS-Tricks

, , ,
[Top]