As mentioned in the blog post about reducing motion, I'm sensitive to certain types of movement on the web. For a long time, I've been wondering if there is a way to access and change websites' styles and modify them to not include that kind of movement.

A few weeks ago, my colleague Fotis demonstrated how to do this with user styles. I finally found the missing piece - I already knew how to remove or change the problematic things, but didn't know how to inject new styles into the pages.

In this blog post, I share how I wrote some simple enhancements for Mimmit Koodaa's (a Finnish initiative for getting more women to tech) webpage. They have some animations and auto-playing videos as background. As those animations can make me a bit dizzy and nauseous, and videos that automatically play are just distracting, I wanted to remove these factors from the website.

Stylus

For injecting the user styles to the site, I'm using the Stylus Chrome extension. If you want to read more, here's their repository:

The basic idea with the Stylus extension is that users can use, edit and save user styles from either userstyles.org or self-hosted user styles (with postfixes .user.css and .user.styl). I'm self-hosting my code on Github, and you can find the link to the repository at the end of the blog post.

Writing the styles

As mentioned, I'm writing the styles with UserCSS. If you're interested in the syntax, or UserCSS in general, head to Stylus' docs about UserCSS.

Animation

On the website, on the page for this spring's launch event, there are animations behind the headings that shift horizontally when scrolling vertically. It's especially problematic for me, so that is one thing I wanted to get rid of.

I've fiddled with many websites to try to turn their animations off, and I've seen many different solutions. I was a bit afraid of what I would find. This time, animations were done with good old transitions, and I was happy. That is easy to fix.

I decided to go with the "remove motion"-solution for this instead of just reducing motion. All of the headings have a class of elementor-motion-effects-container, which wraps the heading-element and the image behind the header. That image is the one that transitions. Thus it's possible to target all the elements inside the container and set transition to none. Targeting all the child elements is done just in case if there ever appears something else that moves.

.elementor-motion-effects-container > * {
    transform: none !important;
}

Another problem on the launch website was the image gallery. I wanted to remove the animation from when images appear. They slide in, and it was a bit distracting.

Finding the correct class to set the properties wasn't easy. I went through multiple classes having different transformations and finally found the correct element.

Here's how I removed the animation:

.elementor-gallery-item__image.e-gallery-image {
    transition-duration: 0s !important;
    transition-property: none !important;
 }

Video

On the same page, there is an auto-playing video behind the hero/banner. As it's impossible to fiddle with the auto-playing attribute or pause the video with css, I decided to just remove the video. Luckily, there is actually a static background image behind the video, so the layout doesn't get messed up when removing something.

video {
  display: none;
}

Complete Styles

You can find the complete styles and instructions on how to install them from the repository:

Wrapping Up

I'm thrilled that I've found the tools to make the web more usable for myself by modifying the websites' styles. Of course, there are a ton of other use cases for UserCSS, and I can't wait to explore them.

However, this does not mean that the responsibility of making the web usable and accessible is on the users - accessibility is definitely a thing developers should learn and be concerned with when creating user interfaces. Even if I have the tools to modify the site for myself, it doesn't mean that most people have.

Have you ever tried out UserCSS or similar solutions?

Cover photo by Daria Nepriakhina on Unsplash