This Website: CSS

Dwayne Harris   ·   About 541 words

There were two things I wanted to try when I started on the CSS. CSS Animations and prefers-color-scheme.

CSS Animations

CSS Animations have been around for a while now, (Firefox first starting supporting @keyframes in 2011) but I haven’t seen that many websites using them so I just assumed people hated them. But I wanted to see if I could do anything interesting. One thing I wanted to do was to allow the user to turn off animations using their system setting. I also want users to be able to disable them with a button on the page, but I started with this.

On the Mac, you go to System Preferences, Accessibility, and then choose Display in the menu on the left. The setting is called Reduce motion.

Reduce motion in macOS
Reduce motion in macOS

On iOS, it’s in Settings, Accessibility, Motion, Reduce Motion.

Reduce motion in iOS
Reduce motion in iOS

In CSS, you can detect those kinds of motion settings by using the prefers-reduced-motion: reduce media query. I used that to set a CSS variable named --animation to none. All of the animations in my css file look like animation: var(--animation, ...) so it uses none if the media query matches.

prefers-reduced-motion media query
Media query for this website

Staggered Animation

I also wanted to have staggered animations for some of the lists on the site. I don’t think there are any built in CSS attributes for it, so I DuckDuckGo’d it. And then Googled it when DuckDuckGo didn’t find anything useful, which is pretty much how it always goes when I look up anything related to programming. I found an article about setting a css variable called --animation-order on each element in the list, and then using it my multiplying the value by some duration (like 200 - 400 ms) and setting it to the animation delay.

Animation order usage
Left: Using --animation-order; Right: Setting it on the element ($i is an integer index)

prefers-color-scheme

The other thing I wanted to do is set the colors based on whether the user is using light or dark mode on their device. Detecting the color scheme is done with a media query just like reduce motion. This time I used it to override the default theme color variables.

prefers-color-scheme media query

I didn’t know doing this on macOS automatically applies an animation to the color change to make it transition with the rest of the OS. I thought I would have to add something like transition-property: color, background-color; to get that to happen, but I didn’t, so that was cool.

Feedback
  ·   15 Likes
Last Updated

Contribute

Was this post useful to you? Want to support this website? Learn more. Thanks for reading!

Latest Webmentions

None yet.

Comments

No comments yet.

Add Comment

Add a Code so you can edit or delete this comment later. Using the same Name and Code for multiple comments will link them together. Learn more.
By posting a comment, you are agreeing to the Terms of Use.