3 super small changes to improve your CSS

There are *very* simple and small changes we can make to our CSS to greatly improve the experience for many users, and in this video, I take a quick look at three of them.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:26 - outline-color: transparent
03:49 - prefers-reduced-motion
11:35 - focus-visible

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[RSTirendi]

Kevin is a rockstar! His knowledge, subject relevance, presentation skills, and quality of production are all top notch.

[ricksande]

I love that you're diving more into accessibility. Way underrepresented and way important! Thanks Kevin!

[leoMC]

I'm a backend developer learning Spring framework. But in my free time I'm working on a full stack project with MERN. This is perfect for my front end. Thank you very much. 😃😃😃

[MistSoalar]

that webflow's showcase page really exhibits the problem of the motion. maybe unintended, but your recording framerate highlights the problem quite well. We need to plan for the lower spec devices as well as slower connection.
thank you for the great content. I'm going to share this on our group chat.

[obsessedprogrammer]

Just the right time for one of these eye-openers. Thanks man!

[orhanmadiassani]

Accessibility topics are really interesting!

[aham_sammich]

Thank you for the tips. I'm working on an image gallery page and the concept of building with reduced motion first is great to have in mind before I overdo it. 😆 I've found, so far, that building for accessibility first is great as it makes me more mindful of creating necessary rather than superfluous features.

[dwarfbard]

I'm only in the first part and already YES. This is exactly what I needed to better accessibility on my websites.

We really need to not only make our part of the internet more awesome, but also more accessible 😊

[TheVentureaaron]

Hey, i came here for a "Hello my friends and friend"!! Appreciate your work, KP.

[KaitlinGaspar]

This video made me so happy- you are so considerate :)

[mohamadmhana]

Thanks a lot kevin 🤝
We want frontend mintor challenges 🔥

[penguinxed]

another useful tips, thanks sir Kevin! 😊

[CheshireSwift]

Huge amounts of what I have to drill into devs about both mobile and web is that you're running your code on other people's devices. You have to jump through a lot of hoops for that privilege, and take that responsibility seriously! That means things like being aware of memory constraints, variable screen sizes and flaky connections, but also being aware of what assistive tools they might be making use of to even access your site or app in the first place.

[RobMapes]

Big fan of your videos. I like the way that HTML and CSS gives me more control. I am moving away from WordPress, partially because of your videos. Perhaps it is also because I am an old mainframe ALC programmer. 😂

[capability-snob]

Thank you for calling out that scrolljacking.
Related problems include having a default focused textbox on a scrollable page, and having more than one scrollable div (how do I scroll the other one?)

[dannieh]

First thought after seeing the thumbnail is to stop with CSS and start with Tailwind instead. Sure it's CSS, but it just solves SO many problems I see people struggle with when using more "vanilla" styled CSS.

[renatomarxs]

So, I'm actually using { outline: 0; box-shadow: 0 0 0 2px #c47f17 } in my website and I tried to change it to `outline: transparent` but the outline isn't actually transparent in my normal windows settings... so there is a white line over my box-shadow ... any way to fix this?

[teppichkuchen]

Hi Kevin, i absolutely love your content! One question from my side, do you know or have a blank/boilerplate starter template ready for 2023?

[DN]

Exactly! Animate to enhance, not distract.

[SRG-Learn-Code]

I have hope in Web Components. There are many considerations that I tend to forget or not even consider, maybe I'll find some library with better taste and expertise than me. What are your favourites? Headless UI and Skeleton are my favourites.