So with this at prefers reduced motion media query, you can completely control who sees what animation, which is really handy. Now, if you have a lot of animation, it can be cumbersome to wrap every one of them in this reduced motion check. And also you're going to serve more code than you need to if someone doesn't want animation. So there's a way to make this check. Does the user opt in or out of motion at the CSS file level? We can use a link tag

Does the user opt in or out of motion at the CSS file level? We can use a link tag to conditionally load a CSS style sheet if the user allows motion. So what I'll do for the example here is move this part of the code that sets the party into its own file. So this app is a Laravel Blade basic startup app, and we are using V to generate the CSS. But here I just want a link tag. So I will go in the public directory

But here I just want a link tag. So I will go in the public directory and create a new file called Animations Do css. Just because I don't want to go through the whole V process, I just want to link to a CSS file so it's in the public directory and I will paste the square Hover animation party override. So now we want to conditionally load this style sheet, the animations that CSS style sheet if the user allows a motion.

the animations that CSS style sheet if the user allows a motion. So let's go in the layout, file layout that plays the PHP. So I'm doing some questionable things here to load different CSS file and GS files on different pages for my demo for this course. But what I wanna do is I want to have a link tag here. And so because it's in the public directory, I wanna point it to slash animations css. So now we should be loading this CS S so that should,

I wanna point it to slash animations css. So now we should be loading this CS S so that should, because it's loaded after override the square hover and we should have the party. So let's check it out and yep, party it is. So there's a problem here. Let's check the status of the reduced motion. Uh, it's not checked, so technically we are allowing it, but if I turn it on and say, Hey, I do not want motion, thank you, the party

but if I turn it on and say, Hey, I do not want motion, thank you, the party is still gonna be a party. So we need to actually bring the preferred reduced motion check to the link tag now. So here's another little gem from the web dev website. If I scroll, uh, you will see that eventually here there's the tip that we want to do. Now you can use a link tag

that eventually here there's the tip that we want to do. Now you can use a link tag and you can have media equals prefers reduced motion. No preference. So this is the query at the tag level. So we are going to steal that. And remember, we want to do this at the link tag level. So here I will paste this media query check directly on the leak tag. And since it's triggered on a hover, to make my life easier, I will enable the hover state by default by going in hover

And since it's triggered on a hover, to make my life easier, I will enable the hover state by default by going in hover and toggling it on. So you can see that now it's showing the, uh, pulse. Yes, we do have a reduced motion. Checked. Checked. So look at the square up here, up here, and uh, I will turn it off and we should go to party and we do, and turn it back on. We don't want motion. Reduce it to the pulse in and out. Pretty nice. So now you know how

We don't want motion. Reduce it to the pulse in and out. Pretty nice. So now you know how to detect if a user has opted out of motion with a CSS and with HTML. And guess what? You can also do it with JavaScript.