The Dark, the Light, and the Inverted A developer’s guide to color modes with Nick Croft

Modern operating systems have given users more control over how their interface looks. This includes light and dark settings, inverted colors, and high contrast modes. Much like the early days of responsive design, the best web developers are adapting to offer styles that can leverage user preferences. This can improve accessibility for sites and accommodate a wider range of users.

In this session, Nick Croft demonstrated how to write media queries to make changes to the site and the advantage of using CSS variables with modern WordPress theme development in order to simplify color swaps to make the site most accessible to the greatest variety of users.

Watch the Recording

If you missed the meetup or would like a recap, watch the video below or read the transcript. If you have questions about what was covered in this meetup please tweet us @EqualizeDigital on Twitter or join our Facebook group for WordPress Accessibility.

Read the Transcript

Read the Meetup Video Transcript

>> AMBER HINDS: All right. So if you have not been before, I just want to start with a couple of announcements. We do have a Facebook group. You can find it if you just search WordPress accessibility or it’s facebook.com/groups/wordpress.accessibility. I think we have a link for that in the chat as well. It’s a great place to connect with other attendees between meetups, share things you’re working on, get feedback, ask questions, and answer other people’s questions.

I will fully admit that I am not always on Facebook every day and so I very much appreciate it when I see other people answering questions, and providing value. And I’ve asked questions in there and gotten some great answers. So please join the group if you’re interested in connecting between meetups.

We will always get a question at every meetup. Is this being recorded? The answer is yes, it is being recorded. We will have the recording available between one and two weeks. We take it and we get corrected captions and a full transcript and then that will be available.

The fastest way to find recordings from past events, there are two. One is you can just watch our page. If you go to equalizedigital.com/meetup, that’ll redirect you to the much longer URL. You can find all of the upcoming events and recordings from every past event there. The other way is you can join our email list and we’ll send out emails that include links to the recap videos when they are available. You can join that directly by going to equalizedigital.com/focus-state.

This is sort of new, but we are releasing audio recordings of the episode on our podcast because we had a couple of attendees say they just wanted the audio. They don’t want to have to watch a YouTube video. Maybe they want to walk around their house, fold laundry, wash dishes, listen, or maybe they want to sit at their computer and just listen and not have to look at a video. So if you go to accessibilitycraft.com, that’s our podcast, and we’re every other week releasing audio from Meetup recordings. We’re going to try and go back through some of the back ones and get those on there as well.

So that’s another way to find recordings from Meetup. And there’s other info there too. We’re also doing some other conversational episodes. So it’s not just Meetup recordings, but it is a great place to get Meetup recordings. We are seeking sponsors for the Meetup.

Unfortunately, the WordPress Community Foundation doesn’t have a budget to cover the cost of live captions or our post-event transcription. We currently do not have a sponsor or I am your sponsor for live captions and post-event transcription. So if your company would be interested in learning more about sponsorship and sponsoring a Meetup, please reach out to me and let me know or Paula. We’d be happy to share information with you. You can also find more information on that Meetup page on our website.

We don’t profit off the Meetup. We literally charge the cost that the vendors charge us. It’s just a way to help us spread out the cost and keep ensuring that we’re able to make this Meetup as accessible as possible to everyone. If you have any suggestions, if you’re interested in speaking, if you have questions or comments, or if you want to contact us organizers, you can email meetup@equalizedigital.com. That goes to me and Paula.

And we can help you or follow up, however makes sense, but that’s the best way to contact us. So who am I? If you haven’t been before, I’m Amber Hinds. I’m the CEO of Equalize Digital. We’re the organizer.

And as I said, we happen to be the sponsor today for the meetup, for our captions, and for our transcription after the fact. We are a certified B corp. We build WordPress websites, and we also have a plugin called Equalize Digital Accessibility Checker. There’s a free version of it on Wordpress.org, and we also have a premium version that can help you speed up your accessibility testing. And I’ve said our website about a million times, so I am not going to say it again, but that’s who we are if you’re interested in our background.

There are a couple of upcoming events that I want to shout out and make sure everyone is aware of. So our next meetup will be on Thursday, May the fourth. I’m pretty sure there will be Star Wars jokes at this meetup, but Stefano, who is on the WordPress Accessibility Team, will be presenting on accessible fluid typography in the Block editor. We’re really excited to have him present. He might also be present, but I’m not sure. So just in case he’s not giving that talk there, this is a great time to get that talk.

And then also in May, one of our friend organizations down here in Austin, Texas, where I’m located, is Nobility. Nobility is a nonprofit organization, a 501(c)(3), that focuses on website accessibility. And they have done a lot to try and advance accessibility education and provide jobs for people with disabilities on the Web, and they run an annual conference called AccessU.

It is a hybrid conference, so you can either attend from home or you can attend down here in Austin. It takes place on a college campus. It is a fabulous conference, and they very generously offered a discount to WordPress Accessibility meetup attendees. So if anyone is interested in attending, you can use the coupon code WP 20 – the number two and zero – to get a 20% discount on your registration, which is super cool.

They’re not giving me anything to say or share that with you. It’s just I like them and they’re a nonprofit, so I figured I would promote the event and let you all know about it. If you have questions about the event, feel free to reach out to me. And I can tell more because I’ve attended it since like, 2016. I really like it.

And then the next meet-up in this time slot will be on Monday, May 15th at 07:00 p.m. So the same time slot. And Colleen Gratzer will be talking about the missing component in your branding and design work, and how accessibility fits in with branding and design. So we’re very excited about those meetups.

I am also super excited to introduce our speaker tonight. Nick Croft has spoken for us before and he is a wealth of knowledge. He is the lead developer at Reactive, which is a WordPress VIP partner. He does a lot of development on very complex and custom websites, and he did a lot with plugin development in the early days. That’s how I got to know him because he built a lot of plugins and did work on the Genesis framework.

So, Nick, we’re really excited to have you. I’m going to stop sharing my screen, and I will let you take over, sharing. If there are any questions, I’ll try and watch the chat, but it is most helpful for me if you all can put them in the Q&A module in Zoom. And then we’re not going to ask them during, but we’ll, at the end, go through questions with Nick.

>> NICK CROFT: All right. Just want to say thank you very much, Amber. Great introduction. I noticed one small thing in the bio I shared with you. It said “… the lead developer” should be “… a lead developer”. That’s not your fault, that’s my fault. So we have another great lead developer that works with me at Reactive.

Speaking of Reactive, that is who we are. You see it on the screen. It does have a ‘K’, I don’t know what to do with that, but it is what it is. I also want to say real quickly that I am very jealous that I’m not speaking at the May the fourth meet-up.

I am hugely into Star Wars. My daughter got adopted by the Mandalorian Mercs costume club. They made her a Bo-Katan costume. I’ll talk a little bit about some of that in a minute. And it was just a really amazing opportunity for her. And we’ve been going up to Baltimore about once a month to hang out with them and work on stuff for me to wear.

I’ve got my lightsaber back here. And this is like an actual, combat lightsaber, they call it. So you can actually hit it and it won’t just break apart. And I have my own Mandalorian stuff, and I would totally have worn all that on May the fourth, but I am excited…

>> AMBER: All right. So next year…

>> NICK: So next is it…

>> AMBER: (Laughter) So next year, we’re either going to have a special meet-up on a Friday or I will just make a note that whatever, I don’t know. Is it going to be in seven years? It’ll be on Thursday again. And that is Nick’s speaking spot.

>> NICK: It is my speaking spot, but I am excited about the topic. The fluid typography is really cool. The last project I just wrapped up a couple of weeks ago was our first one where we really leaned hard into fluid typography and it solved so many problems. So it’s going to be a great topic.

>> AMBER: Yes, I’m super excited about it too.

>> NICK: All right, well, without further ado, let’s get into it. The Dark, the Light and the Inverted: A Developer’s Guide to Color modes. So before I jump into that, I’d like to introduce myself. I know that Amber did a great job of that.

Here on the screen, it says just a bit about Nick. And then it has got a picture of me. I’ve got some sunglasses on. It’s actually these glasses, they just turn into sunglasses in the dark. And I am smiling with San Diego Beach behind me. This is just a few weeks ago when I got to go hang out with all my coworkers. There at the bottom, it says decades of experience, lots of A11y letters, and family.

Family is at the end because I want to end talking about that, not because it is less important. So decades of experience, we’re going to be getting into that a little bit today. And that’s one of the reasons I want to bring it up. I actually got started doing web development in pure HTML.

And when I say pure HTML, I mean before CSS actually existed way back in the 90s. So it was actual HTML with inline attributes on the HTML. Not inline styles, but inline attributes on the HTML, to arrange placements, doing tables, all those terrible things.

I worked in GeoCities for a bit while I was learning on some of that stuff. So I did have one of those horrible, horrible websites, if you were familiar with that. But I did get into doing more stuff, building actual sites later on that did some really cool things, and then finally got into WordPress about 15, or a little over 15 years ago and then continued my journey.

I really got into Genesis as Amber mentioned, and got into accessibility. Amber was actually one of the first people that I started learning accessibility from. So I got some great tips on how to do things. Watching some of the stuff that was done in the accessibility audit for Genesis and the changes that were made. I got really excited about going to a WordPress camp, WordCamp DC, and heard somebody talking about screen reader testing.

And so I’m like, OK, I can do this. And I thought that I did a great job on a plugin that I had built and I ran and tested the screen reader once I got home. And bad things happened. And I realized all the stuff I did wrong. And so I was working on fixing a lot of things.

And so even though I’ve got these accessibility letters, I call them W, A, S, C, P, W, A, whatever, those things are great, but what I want to stress is the important part is not what letters follow your name, it’s the attitude that you have.

If you’re willing to learn and get better, that’s the best thing ever, knowing that you’re going to make mistakes, but you’re going to do better. And that’s what I really want to encourage everyone in. I still make mistakes, but I still get better. I still try and do more for everybody as I’m learning. And that’s kind of where this particular talk comes from.

And finally, I want to talk about my family. I am married, been married for about 25 years. I’ve got four children. My youngest is 14, and my oldest is 19, going to be 20 this summer. So we’ll be down to three teenagers again, which will be great.

I also have an 18-year-old and a 17-year-old. We have two dogs. We are in the North Shannon Doe Valley. I really enjoy it here. We’re right at the edge of the mountains, right at the edge of a bunch of stuff. We’re not too far from the beach.

We can get into DC in about an hour. So we’ve got access to a lot of stuff. But my house is right in the middle of the woods. If it wasn’t dark outside, I could show you and you’d be like, oh, I wish I lived there because it’s a beautiful place to live. Again, speaking about family, I’ve been passionate about accessibility for a long time.

We had a tragedy in our family. In September 2021, my daughter had a heart attack. I took her to school, dropped her off, was driving home, and got a call from the school. She had collapsed in class, they didn’t know what was going on. So I turned around and was driving back rather recklessly. Got there and I literally pulled into the parking lot, and got a call that EMS had taken over and was taking her to the hospital.

Rushed into the ER, I actually beat the ambulance to the ER. I don’t know how it happened. They took the interstate and I took the highway and I definitely would have gotten pulled over if somebody showed up. But I beat the ambulance there and so I had to wait and it was a very scary time.

They ended up having to resuscitate her off and on for over 2 hours. At the two-hour mark, one of the doctors said, “Someone’s going to need to talk to the family, it’s been over 2 hours”. They got a consultant with cardiology, and ended up putting her on ECMO.

And about 4 hours later we’re able to say that she was stabilized enough to transfer. Because of that long time, she ended up getting some brain injury, hypoxic brain injury affecting her vision, affecting a few other things, and motor control. But that led to some things as she began recovering. She was in a coma for three weeks and lost her leg, so additional disability. Through all of that, we’ve learned a lot more about what it is to have to struggle with a disability, have to adapt our home, having to adapt to going back to school.

And I want to brag on my daughter a little bit. She’s doing amazingly well today. She actually got cleared by PT to use her crutches without us directly touching her or holding her gate belt. So she’s able to use her crutches around the house without direct supervision, and we’re really excited about that as a huge step for her.

I also want to brag on her. She is in the band, and they have a crosswalk that they would go across to the parking lot where they had their practice field, but there were no curb cuts, and she’s a wheelchair user currently. She literally just got cleared to be able to use her crutches. She’s been wheelchair-mobile this whole time.

And so I contacted the special services director and the principals and superintendent, all these different people, to try and get them to put curb cuts in. I’m like, legally, you have to put curb cuts in. And I’m not trying to threaten a lawsuit or anything like that, I’m trying to be nice about this. I know these people, and I thought they would get behind me.

And after going back and forth for months, they basically were like, “We just don’t have the budget for it. We can try and do it next year, but we can’t do it this year”. And I was disappointed, but I’m like, OK, that’s what life is like. You fight for these things. You try and get accessibility in place, but it’s not the priority to people because it doesn’t affect them. I even tried selling them on the fact that, you know, the band students are lifting expensive equipment up and over this curb every time they go out to this practice field.

And if they did something wrong and one of the keyboards or marimbas or any of these other expensive equipment fell over, that could cost them tens of thousands of dollars in damage. But it wasn’t enough to sell them on that. And so my daughter was having to go way down along through the parking lot and it was kind of weird. But she kept contacting people. I didn’t even know she was doing it. She’s reaching out to everybody and doing all this stuff.

And all of a sudden I get a phone call one day and she’s contacted these organizations, they’ve agreed to fund it, have contacted the school, said we’ll fund this, two different organizations. And they put in the curb cuts at the crosswalk. And I’m like, that’s a really amazing story. So just because things are not always going well, if we keep pushing, we can make change for the better. And that’s what I’m talking about when I say the important thing is that we keep pushing to get better.

So hopefully that’s clear. So moving along today’s agenda, we’re going to talk about eight different things. If you are blind or have low vision, it’s got eight sections here, 1 2 3 4 5 6 7 8 little circles. Next to them, we’ve got history of responsive design where I’m talking about a little bit of the background on where we were and where we’ve gotten to for responsive design. And then, I’m going to be talking about media query basics, how media queries work and how to build them, how to combine them.

The future of responsive design. That’s the things that are really on the cutting edge just now being adopted and new media queries that we can start using. And next, we’re going to be talking about CSS variables and how using CSS variables will make it a lot easier for us to make some changes with less code. Then finally we’re going to look at some examples and optimization and we get to our Q&A at the end.

So jumping in, we are going to talk about the history of responsive design. I got a nice teal slide here with the big text – “history of responsive of design”. And remember that I was going to be looking at kind of the background as we come through everything up to where we are now. The slide that I just brought up says “history of responsive design” on a teal background.

And then on the other side on a white background, we have heading Fixed Layout. The oldest layout format content was created at fixed widths and maybe, broken on some devices. If you were a computer user back in the 90s you may remember this. You probably had this really large CRT monitor on your desktop and that monitor may have been like 640 pixels, 800 pixels, or maybe if you were like really fancy 1200 pixels.

You also may have had to access this over something that had more like 480 or even 320 pixels, even though it was a large monitor, it was really clunky.

And so if you bring up websites that were designed for 640 or 800 when it showed on there, on your old clunky out-of-date monitor, it did not show up well. Things overflowed, and things got crushed. It didn’t look right.

And so people started trying to figure out how to make that look good, which brings us to the next heading – Liquid Layout. This layout was achieved using percent-based widths. This fit most common devices but didn’t translate to mobile. At this point, we weren’t really at mobile so people hadn’t thought to solve mobile. It was not a common interface.

Mobile phones were used for calling and then eventually texting and eventually some really clunky browsers before we got to our first smartphones. That’s just for some of the younger folks that might be here that may not know the history of mobile phones that some of us grew up with.

Liquid Layouts would have maybe a container that said “Ideally, I want the width to be 800 pixels wide, but I want a max width of 100% so it won’t overflow anything”. And then you might have a section that was 60 or 70 percent and then a section that was 40 or 30 percent for our sidebar. And as that scaled down, that would get smaller and smaller and smaller. So as you got to really small devices you ended up with long thin columns of text and it didn’t work super great on smaller devices but it did help some across a larger variety of screen widths.

And so somebody came up with something resolution-dependent. And this was JavaScript that was used to load different style sheets at different resolutions. And this allowed the most flexibility but required the most work to maintain. You had to literally have complete style sheets that would change the layout of the page. You had all the same content but the layout was completely rewritten, and then you had to maintain all those style sheets. So it was a lot of work to handle.

The next thing I think a lot of us will be familiar with this was mobile URLs. This was right when smartphones were really taking off. The Apple iPhone had released, everybody was just enamored with being able to do stuff and so a lot of companies created a mobile URL that would detect at the server level that they were a mobile request and then redirect it to this mobile URL. And then they usually had something at the bottom of the page – Would you like to view this on a desktop?

And a lot of the stuff that was available on desktop wasn’t necessarily available on mobile. And so you had to kind of deal with limited access. In the WordPress community, we had a lot of plugins that were available that gave us the mobile site and they had their own separate theming issues and it was kind of awkward to work with but it was the best thing that we had available until we got to responsive design. Media queries and a lot of tricks to clear floats, adapt max width and other issues allowed each page to adapt to the device itself.

And responsive design, as it began to grow and mature, people started talking about this idea of mobile-first responsive. We’re going to design for our mobile. And the reason we started designing for mobile is that the mobile market actually became larger than the desktop market for a lot of websites. And so people were accessing websites on their phones instead of using their computers.

Even right now, a lot of times I’ll be sitting at my computer and I still pull up a website on my phone because I’ve got two monitors and I still want to use another monitor. I don’t know if I’m alone on that. But we use our phones for everything constantly. We’re super connected. And that makes responsive design very important because it’s adapted to the way people use their access to the Internet.

And then the last heading is Next Gen Responsive. This is new CSS and HTML features allowing the building of grid and flex layouts that can more easily adapt to devices. This is the natural progression of liquid layout and responsive design. We are able to use new HTML tags and new CSS flexing grid being the biggest part of it. But there’s a whole host of CSS 3 stuff that’s been made available to us that allows us to create these amazingly adaptive layouts that will automatically begin stacking as it goes back down.

And then when we reach certain device points, then we can actually do stuff. We can use Fluid Typography, which is amazing. And it lets you get basically the exact same number of lines of text across a given space because as the space face gets smaller, the typography will get smaller down to your minimum size. And then you say, “OK, it’s not going to get any smaller than 16 pixels or one REM. And as it gets bigger, it’s going to get to a maximum size. I don’t want this to get any larger than 1.5 REM, 24 pixels.”

So it’s a really amazing way of creating this experience that adapts to what people are using on the Internet, their devices that they’re using to access it. And the next kind of phase of that is what we’re going to be talking about today.

But before we get there, we’re going to talk about Media Query Basics. This is a bright orange background and it says “Media Query Basics” on it. There’s not a lot to using media queries, but we have to make sure they’re used correctly. And so up here we’ve got Media Query Basics and that’s also on the orange background. On the other side there’s an image at the top, it says @media and then Media-Type and (media-feature-rule).

And then our curly brace CSS rules go here in a comment and then the close curly brace. Next down we have a heading that says “Media Types” and under that is “All Print and Screen”. There are a few other media types that are available but we are not going to get into them too much today because we’re going to be focusing mostly on media features as we’re going.

Basically, media types are the type of media that it appears. So “All” is everything, and then “Print” is when you print it uses those rules. And then “Screen” is if you’re viewing it on a screen, it uses those rules.

Now our next heading is Media Features and there I have bullet point size and then examples there; width, min, max, width, height, min, max, height. Next is layout with examples of orientation and aspect ratio. Next is device features with examples of hover and scripting. And then next is preferences with examples of reduced motion and contrast.

These have evolved over the years, and we’ve gotten more and more ways of expressing what we want to do based on the browser and what the browser might support. For example, as we get down to device features, if the browser has scripting turned on, we can target that. If the browser is hover, which means you can hover over something, we can target that. The opposite of that would be if it’s a touch device or something like that. And so you can’t really hover over something because your finger touches the screen, and that’s your interaction. So you can have different experiences based on all of that.

As things have evolved, we’ve realized that we can start to do a lot more, especially in this last category of preference, of targeting what our users want to experience. And this is a huge benefit for accessibility because we can say somebody is… the example I give here wants reduced motion, and so we don’t show them a lot of motion on the screen, or they want to have a different contrast experience, and so we can alter the contrast that they get to better serve their needs.

But the cool thing is, there are a lot of great parts. I always say accessibility improves the user experience for everyone. If you’re ever having trouble selling accessibility to somebody, first off, you’re improving the experience for 25% of the population. Just saying that’s kind of a big market share that most people would like to get access to. But even if that’s not enough, 75% of the population also benefits from it.

As I mentioned, when my daughter got those curb cuts put in, she benefits from that as a wheelchair user, but everybody in the band benefits from that, because when they’re moving all that heavy equipment, they don’t have to lift it off the edges, they can push it right up. It’s a huge benefit for it.

People in our community that use that as a running path, [which a lot of people use that as a running path. It connects to two different trails] have a much safer transit across the parking lot as they go across there, using curb cuts versus curb step-off.

So there are huge benefits for everybody in the community. What we’re going to be talking about today really benefits everybody. But our target audience is people with disabilities that have been able to take advantage of what operating systems are allowing them to specify for their personal preferences that now we can reflect on their websites.

The other cool thing about media queries is that we can combine them. So now we’re on a new screen, it says combining media queries. And then on the other side, I’ve got three images. The top image has @media screen and min-width 600 and Orientation Landscape.

So this combines a device media type which is the screen, and min-width, which is kind of one of our layouts and orientation landscape. So this will apply and say if it is at least 600 pixels wide and is in landscape as opposed to portrait mode, I want to change the body background.

That’s the rule. It has body as a selector and then color blue. I want to apply a background of blue to my body. This other one, the next one down is media screen and min-width 600, comma screen and orientation landscape.

And so this is joining two media queries. Essentially this would be like saying media screen and min-width 600, body color blue, and then having a second media query that says Media screen and orientation landscape, color blue.

So in this case, it would be at least 600 wide or orientation landscape. So we’re allowed to join these media queries and begin doing some really cool stuff with it as we’re building it out. And then we can do a not query. So the last image on there says @media not all and orientation landscape.

So this will be everything but All and orientation landscape. So print and orientation landscape. You switched your print mode to landscape, it’s not going to do a blue background. If you are doing orientation portrait, it’s not going to be that background.

If your orientation landscape, no matter what the width is, it is going to show the blue background. If you’re doing orientation landscape, it will not show the blue background. It allows us to exclude landscape mode. So that’s a great way to realize that we can do a whole lot while we’re building out these.

It doesn’t have to just be two. We can link together two, three, four, however many things we want to, we can join them together with commas, which is going to give us a kind of that or statement that allows us to build these out. We can even build… As you see here, there’s a media type and a media feature. So we can actually join together in kind of the or format with the comma on there, screen and min-width 600 and orientation portrait, or screen and orientation landscape, so that we can really build complex media queries and target very specifically what we want for our users.

So now let’s talk about the future of responsive design. I switched to a really dark blue background. Still got the white text. Over there it says, “Future of responsive design” with the dark blue background. On the other side, we’ve got a list of bullet points that say, “layout, display quality, color mode, interaction, and preference.”

So we talked a little about kind of this layout idea and we’re getting more and more options for layout like being able to address orientation landscape. We can address aspect ratios now. So if it’s like a 16 x 9 device or if it’s whatever other devices, we can address those aspect ratios and change things based on that. Display quality is another one where we’re getting more information available to us.

We can start targeting high-res things separately from low-res things. We can start targeting things that use different ways of measuring pixels. Because sometimes if you really need to get that pixel-perfect design, when they measure pixels in certain ways, then it throws off your design just a little bit.

And so you can make a rule to nudge things around with the device. There’s a different way of measuring the pixel and we can get a lot of that information. Color mode is another thing that we can do. We can see what the devices’ color modes are. So if they are mixing colors in a different kind of color palette or method, we can actually address that to make sure our colors stay on brand. And there’s a ton of information we can get with that.

The ways that people interact. I kind of mentioned already that you can get that hover details. You can find out if it is a point device, and you can find out a lot of other information about the device and provide an experience that’s tailored to that.

And the last one is we’re getting a ton of information about preferences and this is the one that is what we’re really talking about tonight because I feel like addressing the preference of users is kind of the next generation of responsive design.

Everything in responsive design that we had was about recognizing that the mobile experience was taking over. But as more operating systems and that is on the mobile device and the desktop device begin sharing this information and begin giving users experience, what’s going to happen is apps are going to start giving users experience.

And we already see that if you have dark mode enabled on your phone, more and more apps will recognize that and enable dark mode for you. Now, we can recognize that in a browser. Used to be we had to give them a little icon that they could toggle the dark mode on and off and then we stored it in a cookie and we used some scripting and made it work.

Now if they’ve got a dark mode enabled we can use a media query to identify that and serve up a website that’s based on their preference if they have prefers reduced motion enabled.

I always like to tell folks our number one goal is to make sure that nobody gets sick when they look at your website. I’m just saying that is paramount. If we’re using a lot of movement and we’re making people sick… If we’re using parallax effects. I always push back hard against parallax effects because that can make people sick that don’t normally get sick and don’t realize that they can have the option to turn that off. So I push back hard on certain things.

Anytime you have movement that’s coming in one direction and another direction at the same time, it really ruins their experience for a lot of users. But as soon as we can detect that they have turned this on, we can absolutely turn all those things off or switch them over to opacity changes instead of movement changes and create a much better experience. And so importantly, don’t make people sick when they use your website. And there’s a ton of this stuff and we’ll talk about it in more detail. So let’s look at some of these new media queries.

I’ve got now white background tilt text for the header. It says New Media queries. And then my next level heading is Media Query level five. I want to talk a little bit about that real quick. So this level five thing is kind of interesting. It also implies that there were four levels before we got to level five, which there were.

And so when Media queries first came out, they just had media queries and then they had the next change in media queries. And so that was Media queries level two and it was making them actually work. And then you got to Media queries level three where they started simplifying how things worked and made it much easier.

And then Media queries level four did a lot of the same stuff where it simplified things, it deprecated a few features that people just weren’t using and it wasn’t adding a ton of new media features that we could target. But Media Queries level five added a lot of new features that we can target. And so here’s a list of them. One is light level and so we can detect if somebody is in a low-light or high-light environment.

Now if you’re a designer out there, you’re a developer out there, maybe right now you’re already going, “That’s super cool”, because that is super cool. Imagine somebody is using their phone and they’re outside at the beach.

Remember that picture I had at the beginning of me at the beach? I used my phone out at the beach and I was sending texts out at the beach and my apps were adapting. But then when I opened up a website, my website was not adapting.

It didn’t really make things better contrast for me automatically. That’s what we’re shooting for – to give that app-like experience to our users that recognize their preferences or in this case their phone, telling us that they are now in a highlight environment, bright light.

Every time I say bright light, I think of Gizmo from Gremlins. I don’t know, it’s just me.

So anyways, we can suddenly improve the contrast and make this site easier to see in a bright light environment. If they’re in a low light environment, it’s late at night, their spouse is trying to sleep over there, and they’re on their phone, I’m sure nobody’s ever dealt with this in their house. You’ve got to turn your dimness down and it’s really dark. And now it’s hard to see things, we can adapt to that environment as well.

The next one is inverted colors. This is an option that is in the OSX and iOS operating systems. It lets you select inverted colors which can help certain people detect what’s on the screen easier with different low-vision experiences. And we can now detect that sort of. I’ll talk about that in a little bit.

Prefers color scheme. This is where we can decide if they want the light scheme or the dark scheme. We can design our site for dark, but if they have prefers color scheme light, then switch it over to light color scheme. Or what a lot of people do is design their website for light and then detect that they want a dark color scheme. And we address that with a media query.

Prefers contrast. We can detect that they want more or less contrast. We always think more contrast is better. But some people can have very adverse experiences to high contrast. And so you can detect if they prefer less contrast. And you can avoid white on black, which is really difficult for a lot of people. And prefers reduced motions we already talked about, so I’m going to move on.

Prefers reduced transparency is similar to prefers reduced motion because when you have transparency and things are moving behind it, it is a very awkward experience. If you have things that you can see behind it like this modal that pops up, and you can see the website behind the edges of the modal, it can cause a lot of overstimulation, emulation, and a lot of difficulty for people processing that information. And so you can use that preferred reduced contrast to say instead of having a semi-transparent modal, you can just turn that modal fully opaque. And now people don’t have a contrast problem.

And then, prefers reduced data is another really cool idea. Imagine if you would, that somebody accesses your site and they have preferred reduced data and you have this huge page that has all of this information on it and it’s overwhelming, and they can’t handle all of that stuff to make decisions or do what they came to your website to do, you can reduce that, turn off your sidebars, you can turn off your related posts features and all this other stuff that is just adding extra data and focus down on why they came to your website.

What are they there for? To read a blog post? To take an action? To sign up for a form? What is their reason for being there? And we can give them that experience based on their own selections.

Now I want to talk a little bit about CSS variables. This slide here says, “Using CSS variables”. On the left, it says, “New theme JSON…” Sorry, bullet points there, not using directions.

“New theme JSON-based themes get several for free.” And then we have CSS variables can be changed without fighting selector specificity applied to rules. And CSS variables can change many rules at once, requiring less CSS to update layouts colors, and more.

We’ll talk about the theme.json bit here. In a little bit, I’m going to show you what that looks like. This is very much a WordPress-specific feature. But basically, when you use the theme.json file, a lot of new themes have this built in. It’s outputting CSS variables already for you. And then those variables, if it is a new FSE theme, can actually be updated by the users and it gets output on the screen by them.

It allows for updating colors and changing things. It automatically builds out certain features inside the block editor and on the front end of the site. And most of that is done through CSS variables, which also means that we can do this next part. You can change them without fighting selector specificity.

If you have ever dealt with trying to custom-style WordPress core blocks, you’ve probably run into this issue because they will have this really specific selector and then they have the important keyword added to their rule.

And so now you have to have an even more specific selector with important added to your rule, but then it starts causing problems somewhere else and so you have to override that and it just turns into a big fight. On the other hand, with all the stuff that’s starting to use CSS variables, we can actually change it without fighting all of that stuff, without having to fight specificity and we can target also changes to things using selectors, using media queries.

So it is a great way to update and change the look of a site with minimal code. And the other cool thing is if you have your CSS variable set up right and you’re using the same variable in a bunch of different places, you can actually change it in one place and it changes it everywhere. So if you are using a gap padding margin rule and it’s using some standard stuff, and you drop down to your media query and say, this size, I want to go from 32px down to 24px, you can do that now with one line of code instead of having to go and change it everywhere that you are using that rule, which is a great feature.

Again, we’ll be looking at some actual examples here in a moment, speaking of examples. So I switched to an orange background. It says examples. In the next few slides, I’m going to be showing you some images and then hopping over and looking at the code.

I was hoping to share this actual website with you and show the changes, but I found that some of the changes, especially inverted colors, did not translate across. I tested this. By looking at it as I was sharing it and I could not get it to actually show you what I see on my screen and what users would see on their screen.

>> NICK: So we’re going to work with images instead. So the first image that comes up says light mode underneath and then the image at the top is a picture of the website that I created to show this off. This is the default experience that users have. There is a teal page header, it has white text on it that says the dark, the light, and the inverted. And then over on the right, there is a menu that says home block, list, style guide, and example page.

Below that is a WordPress cover block that’s set to full width. It has a wood-fired pizza oven and over that is light-colored text, white text, it says thin crust, a lightweight starter theme. I apologize if it says very very smally, a lightweight starter theme. That is small text. It actually looks OK on the screen but I’ve got it shrunk down for this picture. So it looks much smaller than it is in real life.

Below that is a section with a white background and it has a teal call out that says this page has hide title turned on. And that’s in white text. Below that is black text that says the recent post is a header, with more text below that says this is the card grid gallery with a pattern with a very loop block. And the last part that’s visible is three cards that are aligned side by side. The first one has a pizza in front of a wood-fired oven. We see a text below that says “September 23rd, 2022”, on a blue background.

The next one is a sliced pizza with the same text below it on the blue background. And the last one is somebody holding a ball of dough. And this picture is a little taller, so it is cut off at the very bottom, and no text below it. So this is what users will see and if they have light mode and they don’t have any other preferences enabled, that’s the experience they have.

Let’s see if I’ve got the right direction. Yes, I went in the right direction. So hopefully everybody is seeing my code editor. I have opened a theme.json file. If you aren’t familiar with it, they have several things that are in here. I’m not going to spend time going through all the stuff, but what I am going to do is come down to the color section because that’s one of the big things we’re going to focus on today.

And so I’ve turned off the default palette. There are no custom gradients. Default gradients are off. Duotone. There’s no custom duotone and the duotone palette is off. But we do have a palette. And so there’s an array here with objects built inside of it. This is all written in JSON, by the way.

And I’ll give a full description of this first one and then we’ll do just partial descriptions of everything else. They’re laid out the same way. So the first one, I’m highlighting it on the screen right now to show exactly what we’re talking about. It is an object that has properties name, and that is black, and then a property slug, and that is black with lowercase, and then the property color, and that is #000000 which is black.

Now the remaining ones are white with FFFFFF, blue with 0052A7, dark blue with 00008B, teal with 00646E, and red which is ED3A3A. Now what this will do is create a custom palette. When you’re in the WordPress block editor, you’re able to select all of those different things. You can also get a bunch of custom variables from this. And if we scroll down to the very very bottom of this file, it is outputting some stuff. And so Elements is another section that you can define. You can also define blocks and use this in your blocks.

And so the element link, this is using again an object, so the property link and then another object. And inside that is the property color which has an object. And inside that is text, which would be text color. And it is using VAR with a (–WP–preset–color–blue). And what that will do is make all the links use that blue color.

And so it’s going to output that HTML and that HTML is going to output that CSS, but it’s going to output it using the color preset. But it also is creating another CSS property that uses all that stuff. So you can change all of it very easily. You don’t have to change color blue. You can actually change that property directly without having to override the rule or fight it out or anything like that.

And so we can actually create a bunch of stuff inside the theme.json file to do all those things. And that’s kind of the default that we create. And then we override that using our media queries and changing them.

We’ll see if I can go in the right direction again. Yes, I did. OK. So moving on, I’m on a new slide that says dark mode. And in the image on this, I’m only going to call out the differences. The header on this instead of the teal color is a dark blue color. And then the background, instead of the white background, it is a charcoal gray background. And instead of black text, it now has white text. And so we did this in just a couple of rules of CSS. And so I’m going to jump back to my editor.

In theory. Here we go, back to my editor. So first thing, let’s look at the header.scss. If you’re not comfortable using build tools, this is using SAS to build this out. That’s OK. I’m also going to be showing you the compiled CSS from this, and I made sure that it did not minify that. So it’s going to be really easy to see, this is just plain CSS.

So in my header CSS, at the very top of it, we have @root, and then there’s a body tag. And that is going to allow us to define this at the very top level of everything, which makes it easier to override it at lower levels. And we have header color background, –header-color-background. So that’s what it looks like when we’re defining a CSS variable or a CSS property.

And then this is var–WP–preset–color–teal. And so that’s one of those custom colors that got output because of the theme.json. And it was why on the default it was teal. But if we scroll down just a little bit, I have a mixin. So it’s using @include MQ-dark, and then inside of that it goes the –header-color-background, and then it uses var–wppreset–color–blue dark, which is a dark blue color that was set through the theme.json file.

If we look at our MQ file, this is just some presets that I created. It allows us to set custom breakpoints and use those. It’s not the MQ that is the NPM package. This is one that we made, it’s much simpler and easier for us to use because we found that the other one just had way too much. But the MQ dark mixin. So it’s @mixin MQ-dark() and then a bracket. And then inside of that is the media query itself. So @media and then the (prefers-color-scheme: dark) and then our brackets, inside the brackets it has @content which is everything that appears inside of my mixin when I do that.

And so the way that outputs is exactly what it has there. So I’m on the main.css file and it has @media prefers color scheme dark and then inside of that body class with a bracket. I showed you before on the CSS how the header was set. This is showing you how the body is set. So that was white. But for this now it is going to be –body-color-background with var–color–neutral-800 which is a color scheme that we created. 000 is white, and 1000 is black. So this is going to be a dark charcoal color that we create.

And then the text color is –body-color-text with the variable –color–neutral-00. So that’s white and it allows us to do that in one spot very very quickly without having to fight any of the specificity or other things like that. We’re in the right direction again, yay man.

So our next one is increased contrast and this is very very similar to the original. The only thing that’s changed is the header is using blue which had a higher contrast than the teal did and that’s the only difference on this. And if we go look at our code, we can go and see our header and we have @include MQ-contrast-more and it’s setting the header color background to wp preset color blue.

And again, if we go look at that mixin to see what the actual selector looks like… That’s going to be @media and then it says prefers-contrast and it’s more. And so if the system is set to have more contrast for the preference, which is something that you can do inside of OSX and iOS, and you can do something similar in Windows.

In Windows, you actually have to do MQ force colors, which is going to be a limited color palette that is provided. And so you could identify that for Windows and ensure that you are providing an experience that will work well with [Unintelligible 56:27] color palette. And then that just outputs the CSS as we saw with the MQ dark, how that outputs the exact same thing with the @media prefers color scheme dark and then the rules there. So it’s going to be @media prefers contrast more and the rules there. And that’s how we’re able to change that with just a couple of lines of code very easily without having to fight all of that.

Getting to the fun one. So inverted colors is probably the trickiest one that I had to learn to work with for a couple of reasons. I brought up the new slide, it says inverted colors. The image has several differences. So the header is white with black text, which is not actually the color the header would be with inverted colors. I’ve changed that and we’ll talk about how that worked.

I left the teal alone on that call-out box and on that call-out box, instead of teal, it’s kind of an eraser pink color. And this is one that I had a client… they had some testing done with some disabled users who were able to use the site in their natural environments.

So this person was using inverted colors. I’m assuming there was a low vision. They didn’t give us the details there. But she had said that this particular thing that was teal with white text when it was switched to inverted colors, became this eraser color with dark text and it was difficult for her to see. But I went and I actually measured it and the contrast was sufficient on the technical sense.

But I think we all know that just because something might pass for .5 to one contrast doesn’t mean that it’s actually visible for everybody because it’s not the best way to actually measure things. And so I learned that we could target this and make it better.

So in the header, I made this white with black text which would definitely be visible. And then the other thing that I found is white backgrounds with black text which a lot of users are very comfortable with, when you flip that to inverted colors, becomes black background with white text and that is actually a bad experience for a lot of users. It’s much better to go with a dark charcoal background with white text which is slightly lower. Instead of like twelve to one, you get down to like nine to one contrast.

And as people are looking at this twelve-to-one level contrast and it’s scrolling by, it can literally cause some people to have seizures, it can cause some people to have migraines. And as I said before, one goal is to not make people sick when they come to your site. And if you give them a seizure or a migraine, they don’t want to go back to your site, they don’t want to use your site. I know I don’t because I suffer from migraines and I get angry at things that give me migraines. So we’re able to change this. Instead of pure black with white text, we can make it dark charcoal with white text.

So let’s look at our code and see how we did that. First one, we’re going to come up to the header and see that I have this media query that says @include MQ-inverted, and then we’re changing the header color background to the variable –color–neutral-1000. Now if you remember I described this, that’s going to actually be 000 for our hex code which is black. But our header appears as white, and that’s because it’s inverting that header color.

And so what we put inside of our inverted media query still gets inverted. And that’s important for us to realize, because if we put it inside of our media query and we’re like, oh well, I’m going to make it white and it’ll be fine, you’re going to end up with black. That’s tricky. And you have to remember that when you’re dealing with that inverted color.

If we look at our main.css, we have MQ inverted. And for that, the body color background is –color–neutral-200. If I had left this alone, it would be –color–neutral-000 which was FFF, pure white, which then gets inverted to 000, pure black, which is not what we want. So I picked a couple of steps above pure white. It’d be a light gray.

And then this gets inverted to a dark charcoal instead of a light gray. And then I don’t have to do anything with my color because that’s already black. And so it’s going to get inverted to pure white and we get the correct experience. So probably the hardest thing that we have to remember when we’re working with this, is the inverted is not going…

OK, I saw a couple of questions come up. We’ll circle back to this. The biggest difficulty is going to be the overall inversion and remembering that those colors are going to flip on you when you change this. All right. Wrong direction. Right direction.

>> AMBER: Do you want to address a couple of those questions?

>> NICK: I can.

>> AMBER: Yes, sure. So Bhutan asked, what is a good color scheme for links on a white text and dark charcoal background site?

>> NICK: OK. Sorry, I had to think through what the question said.

>> AMBER: Oh yes. So in that dark mode example you have, what color would you make the links?

>> NICK: Yes, if your text is white on dark charcoal, your links can be light colors, light blues, things like that. Pink is a fun color that I know Amber used to love. But one of the things that I love to point out is color is really hard to do for links. You have to have a significant color difference for that to be the call out, for it being a link.

And so if you don’t have enough contrast and even on literally pure black with pure white, that’s going to be your biggest color contrast. There’s a very small number of colors that are going to also be enough contrast against pure black and enough contrast against pure white to be valid by itself.

So what I recommend is focusing on colors that show up well and look good on that and put an underline on your link. A lot of people are like, “Oh, I don’t want to have underlines on my link, I don’t want to have text decorations.” It’s going to tell people that it’s a link. You can make them bold or do other things like that that allow a non-color-based difference. But an underline is a great solution and it is ubiquitous.

Everybody associates. This doesn’t look like the same color, it’s got an underline. It is a link. Where it being a different color, it might not be a big enough contrast; it being bold text, it might not be a clear answer. But if it’s got an underline, that’s ubiquitous, it means it’s a link. That’s my personal experience.

I know that we get designs that aren’t that and we have to push back and sometimes that pushback doesn’t work and it’s difficult to gain traction on it, and we have to do our best to find something that is going to be sufficiently contrasting and then still try and get bold text or something else into the design that’s going to show up differently. But the first press is to try and get an underline because that is the most ubiquitous definition of it being a link.

>> AMBER: Yes, I think that’s what we try and do too; always make sure there’s an underline. I mean, I love the idea of pink. I know there are a couple others from people, but sort of a follow-up on that and maybe you’re going to get there, do you factor client brand when you’re deciding on these colors at all into these alternatives? Or are you just trying to get the best for accessibility?

>> NICK: I start with client colors, but I try especially as we get into inverted colors and things like that, to do a much more limited color scheme. So client colors are great to use for accents and highlights in that, but really focusing on the dark gray, the white, and things like that to get the contrast ideas there. But yes, dark modes are a great one to really lean into different parts of the client color palette because it’s not as important to address some of those accessibility concerns.

When somebody’s switched on inverted colors, I feel like it’s safe to assume that there is low vision involved and so we should address that by making it easier to see. If somebody’s got dark mode on, a lot of people just like dark mode, it’s easier on your eyes in certain environments and people do it.

I’ve got dark mode on right now. So it’s not safe to assume that. And there’s low vision involved and stuff like that. It’s a preference at that point, but we can still make sure that everything is in there with proper contrast and is going to show up well, and is not going to cause problems like pure black background with white text or something like that.

We can work within those kinds of gray scales and then bring up the colors in accents, using it in like we saw when I brought up the dark mode right here, presumably for this client, that dark blue because it was part of my theme.json, was one of their colors and so it was appropriate to bring that in and use that.

>> AMBER: Yes. So Bhutan just said a follow-up. “In addition to underlines and changing the color, do drop shadows help at all?”

>> NICK: So drop shadows are cool but they can cause some problems. For one, they usually are not sufficiently contrasting because by definition they’re spreading out and they have opacity things going on with them.

The other problem with drop shadows, if you aren’t careful, they actually make text harder to read because it sort of makes the letters look like they’re spreading out and they wash out. Even if you’re trying to use it to create contrast, you have to be really careful and make sure you don’t have too much spread and different things.

I almost feel like, with the tools that we have, text shadows – which I feel is really the question there – work better in photo editing, and print editing software where we can dial things in and have a little more controls than what we have currently available to us.

But I have had experiences where we can use it. We can also put a full-on background on a link. I’ve had that come up with clients where their links literally just have a blue background behind them or something like that. There’s a background color that’s there, and then when you hover it over the background color kind of slides off and an underline comes in and it’s sort of a weird thing, or the background color just kind of shrinks down and it’s just an underline.

It’s kind of a cool experience, but there are ways to do it that aren’t just underlines. It’s just that underlines are the experience that we were trained to recognize.

It’s kind of like people nowadays see the three-by-five floppy and people that are kind of the younger generation, like my kids’ age are like, “Oh, that’s really cool. You 3D printed a save icon” because that’s the save icon in their life. And that’s what everybody knows it as that’s in the younger generation. They’ve been trained to that. And even people that are in my generation and older know that that’s a save icon. And so we can understand what they mean when they say that.

So there are certain things that have become ubiquitous. Maybe there’s a point where some other thing becomes the way that links are. But underlines, to me, is the first place to start.

>> AMBER: Yes. We have a few more questions that I’m going to kind of hold to the end, but maybe a good one, which was more in the chat than in the Q and A. But do you want to expand a little bit on… Richard was asking why grays? Like, why wouldn’t you do a dark blue or something else? And then I’ll kind of pop off and I’ll let you move on and we’ll save some of these other questions till the end.

>> NICK: I did grayscale on this because I was working with an existing color palette that I had from our starter theme and I did not go and mix in a full brand because I didn’t want to. I worked with a lot of clients that you would recognize their brand colors and I didn’t want to have to come up with a full-on brand campaign for this.

So using this gave me specific color palette that I worked with. You will see that I used dark blue in the header in the dark mode. In inverted colors, you could do the same thing as long as you were focusing on having a higher contrast.

So I could have gone to this dark blue, and so I would take the colors in the dark blue and I would find the opposite color for that and put that in for my background color. And so then that dark blue would be in my header instead of the white with the black text. I would also at that point, have to remember to change my text to white because it’s going to have black text on it if I don’t change my text color to white for the header.

>> AMBER: Yes. It’s not that it necessarily has to be gray. That’s just what you chose for the specific demo. ‘

>> NICK: Yes, it was literally for the demo. As long as you’ve got good contrast without – again, too much contrast. Black background with white text is kind of the big no-no that we want to always avoid. You also want to avoid extreme colors, like a huge block of vibrant orange, like this background I have on the slide. You have that with scrolling happening with text. That is a very bad color experience. Super high contrast, assuming you’re using white text on there. But it’s going to cause problems for people that don’t do well with extreme contrast and extremely bright colors.

So you do have to think about how that works a little bit and deliver that experience to the users. That’s going to be a good, comfortable experience. And again, working with brand colors where we need to, working with grayscale where we need to so that we can highlight brand colors, all that stuff that comes into play.

I do want to answer Richard’s question here about why I have small text. I apologize for that. I did not think this through when I was putting the slide together because I had it on my bigger monitor when I was putting the slide together. But the text on the screen is actually larger. It just looks so small because when I took my screenshots and then shrunk it down, it ended up probably 30% smaller than it actually is.

Just looking at the borders around the screen, you can imagine if that was stretched to fill that whole thing, it would be a good 30% larger. So it looks like it’s tiny text. In reality, it’s actually good size text. This is a late-minute thing because I could not get things to show up across Zoom when I was sharing it. It didn’t apply all of my changes the way that it should have.

All right. Where was I at? I was on inverted color. This is going to be my content warning for everybody. On my next screen, I have a video. The video does not play automatically. I think it may. But it’s going to have a section where on mouse-over, something gets larger and smaller like that.

So if that’s the kind of thing that maybe make you sick, this would be a good time to look away for a few minutes. I’ll let you know when that’s off the screen. Or you can minimize your screen so you’re not looking at the full screen. If it’s smaller, I know that a lot of times that’s easier for folks, that sort of thing. So just a warning. I’m going to be hopping over to the slide. I’m going to give you a countdown. 5 4 3 2 1.

OK. It’s happening automatically. So the mouse is moving across, it’s causing those cards to expand a little bit and get smaller a little bit as it moves across. It’s actually 5% larger in size. Now it’s selecting system preferences and I’m collecting reduced motion. It’s back on the screen, and things are not expanding on it as I hover over things. I don’t know if you caught it as it moved across one of the links that showed an underline. Folks, if you were looking away, it stopped at that. So now you can look back and don’t have to worry about seeing things moving on you.

OK, so that effect was applied on hover on the cards and also focus within. So anytime that that happens, it potentially could be a problem for somebody. If you’re scrolling down the screen and the mouse happens to be over it, it might cause things to get larger as it’s scrolling. So that’s the sort of thing that we don’t want to do whenever somebody specifically says, “I want reduced motion”.

And coming back over here, if I come to my pattern card query. So this is the container and on the container, I have a transition transform of 300 milliseconds. And then on hover focus within, I have a transform scale of 1.05. And so that makes it 105% size. So 5% larger.

What I’ve done is @include MQ-reduced-motion. That’s my mixin for the media query. And it just has the rule Transform None. So it removes that transform effect. A lot of times I might do something like this as just kind of a general rule. Instead of Transform None, I might say Transition None. And as a general rule, that works a lot of times just to turn off the transition so things will just pop into being or pop out of being.

Also, if it was something that was coming into phase and it was like scaling into phase, we could change the transition to opacity instead because opacity is safe and there are a lot of things we can do with that.

But in this case, it would be kind of awkward. You hover over it and all of a sudden it just pop pop, pop pop. That’s not a great experience. So I turn off the transform in this case instead of messing with the transition. And it’s a great way to handle that. If we look at the MQ – I think a lot of us are familiar with this particular one – it’s @media prefers reduced motion and then all the content that is inside of there. And that was the end of those slides.

I’ve got one more section to talk about and that is Optimizing. So we switched back to the dark background with white text. I have Optimizing there as our title. And I’ve got three bullet points. Custom Media Queries, Conditional Imports, and Media Query Style sheets.

All right. So this is the Optimizing section. I’ve got the custom media queries as the title. And then on the other side, I have @custom-media–medium-devices and then (min-width: 50rem); to finish that line out. The next line is @custom-media–large-landscape (min-width: 70rem) and (orientation: landscape);

And so that’s created two custom media queries. I have an example of using that below. So it’s @media with (–medium devices) which applies the first media query. So that would be like writing @media (min-width: 50 rem). And then inside of that is container max-width. The .container class is the selector max-width. 40 rem is the rule applied to that. We could put it in there instead of –medium devices –large landscape.

This potentially can cut down on the size of your files if you have a lot of complex media queries that you’re using over and over. The biggest problem with this is it’s currently not supported. So this is really something to look for that’s on the horizon that can help us cut down the size of our files within a single file. The other two options make use of additional files. And so that would change the way that I have to build this.

So I’m going to pull this next slide up. Again, we’re still on optimizing. We’re talking about conditional imports. And so this is inside of the CSS file, @import URL reduce-motion.css. This will use a relative URL to the file itself. So it’s great if that’s in the same folder or if it happens to be in a subfolder, you just put your subfolder in there. And then after the close parentheses, it says Screen and (prefers-reduce-motion);

So what this will do is if somebody has prefers-reduced-motion enabled, it will import the reducedmotion.css and load that. And the great thing about the import rules is it allows you to do that all in a self-contained way. If you’re using some kind of compiler SASS, you would have to use a plugin of some sort that would pull out all of your media queries into separate files and load them that way and then put in imports in one place.

I’ve never set up a plugin that does that. I would probably end up having to do this manually into separate build processes and I wouldn’t love it super much, but it would be a way to optimize it. Especially if you find that you’ve added more than a kilobyte, maybe even several kilobytes, as you’re starting to address multiple different preferences, this could be a great way to cut down on the size of a file, but only load those extra kilobytes of data if somebody is using that.

And then the last one here, still on the Optimizing title, is Media Query Style Sheets. And on the other section there it has an HTML link, [inaudible] style sheet media = screen and preferred-reduced-motion. And then the pref is our reduced motion.css. In this case, you would probably want to put a full URL to that end because it’s not going to be relative to your style sheet, it’ll be relative to the URL that’s being loaded.

Our next heading is in WordPress and this is using a WordPress function WP-MQ style. So if you’re a WordPress developer, you’re probably familiar with this. It has a few arguments that are being added to it. The first one is reduced motion. So this is the handle for that particular style sheet.

The next one is the function, get style sheet directory uri that gets the URL for the style sheet directly. So this would be a child theme or the parent theme with no child theme that’s being pulled in. The file is reduced-motion.css. So this creates that full URL to this. So no matter what page you’re on, it’s going to load this correctly.

The next one is shorthand array. This is shorthand PHP array and inside it is main. And so that is kind of assuming the idea that your main style sheet is got the handle main. So this will load after that style sheet when you set that up. Then I have a version as our next argument, 1.0.0.

If you’re using WordPress MQ style, always provide a version. There are some great ways to do that. I’m running at the same time talking about that. But don’t default your version. Always provide something because then you can change it and invalidate people’s cache and serve your new style.

And then finally, this is one that people often don’t even know about in WordPress. This is the media argument. And so if you provide screen and prefers reduced motion, what it will do is output HTML for the link, very similar to the one that I have above this, where it has media = screen and prefers reduced motion. So any of those media queries that we talked about, combinations of media queries, built out complex things, all of that can be created and used inside of this to load custom style sheets that are specific to user preferences.

So that’s going to allow us again, as we have large things that we begin building, taking advantage of this. Even though individually we may only be changing one or two lines here or there, it ultimately can output a lot of CSS as we’re taking advantage of multiple rules; dark mode, light mode, contrast, inverted colors, and reduced motion. All of these different rules that we’re taking advantage of, is going to add to the size of our style sheets. So we want to make sure that that is optimized for everybody.

This is everyone’s favorite part of the day. I know it’s mine. I mean that absolutely seriously. I am Gen X. I speak in sarcasm as my first language, but I truly mean this seriously. I love the Q and A portion. I always tell folks the only stupid question is the question not asked. I was a youth pastor for 14 years. I guarantee people tried to prove me wrong. If you tell that to a teenager, they will come up with the dumbest question they can think of. And I love that about them. So please don’t be ashamed to ask your questions. I’m not going to make fun of you. I think it’s great.

Before we hop into that, I do have a couple of links up on the screen. I have slides, this is my first bullet point and that’s https://bit.ly/3zWN1qe – that’s a bitly link. I’m going to copy that right now and drop it into Chat. Can I just @ everyone? Is that OK?

>> AMBER: Yes.

>> NICK: Good. All right. The next one is Nick’s link tree. I set that up for this. It has a few links about me. It is https://linktr.ee/nickthegeek and I’m going to copy that one and also drop it into chat. And now, let’s get on to Q and A. Did you have anything else flagged maybe from the chat, Amber?

>> AMBER: I don’t know if I saw anything else specifically on the chat. I’m sort of scrolling back through. There was some commentary about people agreeing with you on the animation. Peter had a nice comment. He said that he thinks animation is one of the most overused unnecessary features, ‘features of web pages’, more work, and more code to make something less appealing to many of us. He says I don’t think anyone really rates the quality of a site by how many text boxes can slide in during a scroll.

>> NICK: That is my least favorite animation by the way.

>> AMBER: Yes. Or the fade out too.

>> NICK: I think there are a lot of things that you can do with animation that’s subtle, it’s not overwhelming, that requires user interaction. I know this isn’t the topic, but I read this great article about micro-interactions and the whole idea of it is basically like when you’re in an app and you touch things, it’s going to slightly expand. It’s going to bring the thing open. Everything feels like it’s interactive and is working and I feel like that is what animation should be. It’s just to make it feel like it’s this interactive working thing, not “whoosh whoosh, whoaaaa.” It should not feel like a 1996 PowerPoint is all I’m saying.

>> AMBER: Yes, I’ll give a slight shameless pitch here. We did an episode on our podcast called Your Website Makes Me Want to Puke, where we talked all about animations and a lot of things that you talked about and there are some links in the show notes for that episode to actual research studies where they don’t actually help. There’s a whole bunch of research on does parallax help with conversions. No.

So sometimes if you need ammunition to sell clients on that, why they should not have animation, there are some good links there. There was a question, do you have a repo that contains any of this code?

>> NICK: I do and I’m going to grab the URL and drop it in here.

>> AMBER: OK.

>> NICK: I will get that on my link tree as well for anybody that may be viewing this. I’m sorry. I meant to put that actually on this slide and I did not.

>> AMBER: Yes, no problem.

>> NICK: Give me 2 seconds, maybe more.

>> AMBER: There was one other question. Richard was wondering if you knew of a plugin that can make the text actively squiggly like an early Simpsons episode so the designer can synthesize with macular degeneration. So do you know of any browser extensions that simulate different sorts of vision experiences on websites with text?

>> NICK: I actually don’t, but I think that’s a really cool idea. And if somebody has not done that, maybe I can look at it. Like text easier for autism. There’s a lot of text out there that helps with dyslexia, with different things, but it’s the really interesting thing and this is one of the things I feel is probably in the near future for this whole preferences idea and addressing things.

What we have learned is when you use a text that is for dyslexia… My daughter, when she had damage to the vision cortex of her brain… And I would love to talk just a whole hour about just the process of that healing that happened as her brain remapped stuff. And it was so cool. But one of the things that she ran into, I’m like, oh well, I’m going to turn on because you’re having difficulty seeing. I’m going to turn on a reading mode on your computer that’s going to actually turn on text that is easier for you to read because it’s for people that have dyslexia. And she hated it and said it was so hard for her to read with that and we had to turn it off.

That’s what happens. People with different kinds of disabilities struggle with different kinds of text. And I’m hopeful for a future where we can actually say prefers dyslexia text and we can serve that text up, prefers Macular Degeneration text. They won’t call it that. They’ll call it something else, but some way that we can target what their preference is for some of these kinds of things because other text really doesn’t work well for them. But I do love this idea. So you’re suggesting if text kind of does a thing, it’s easier to see?

>> AMBER: I guess so. Yes. I’m not as certain about that.

>> NICK: [Crosstalk ]

>> AMBER: Yes. I do know as far as simulating things for developers to sort of show that experience that… I think it was Anne Bovalette when she gave her talk, there’s something that’s built into Chrome dev tools but now I’m spacing on what she said, like how to get to it. So everyone, go look at her talk.

But there was a drop-down that would allow you to simulate different… So you could do colorblindness simulations, but there were also different low vision simulations that would blur the whole website or something and I think it’s just built into dev tools.

>> NICK: I have seen some of those.

>> AMBER: Yes and that’s what Greg was saying. There’s something in Chrome and Firefox Dev Tools to simulate some vision issues. Yes. And I was digging around in my dev tools while you were talking, trying to find that and I couldn’t find that. So I feel like that’s a follow-up for all of us to go figure out where is that setting.

>> NICK: But like I said, I love questions, especially when I don’t know the answer, because I’m excited to look into that question, and who knows, maybe that’s a future talk.

>> AMBER: Yes. So I think we have time for one more question because we only have our caption until 45. So Hosuh was asking, is there a reason why you named your variables with -100, -1000, etc. instead of a color name?

>> NICK: So some of our variables get named with color names, especially when they’re brand colors because we are relying on those things. For our grayscale stuff, we have decided to name from zero to 1000 for two reasons. One, it lets us insert any resource we need to use, it’s halfway between 500 and 600. OK, it’s 550, problem solved. We don’t have to keep coming up with light, medium, dark, and gray stuff like that. It works really well. And it also kind of ties into things that we’re already familiar with as developers, using font-weight and stuff like that, where it’s already using that sort of scale. Does that make sense?

>> AMBER: Yes. So then you could just throw any number in there and it would mathematically find the right hex code, basically? Is that the way that works?

>> NICK: You would have defined each one of those. So those don’t get automatically defined anywhere. I didn’t show it on my thing, but we have a section that defines them. It’s actually using HSL to create them. So you can define your color base and then a percentage of the darkness of it and so it will take that and just make it darker as it goes. And so we just do it that way. But if you have a hex code that needs to fit in between these two, you can also just write a new CSS variable for it and then you can use it.

>> AMBER: Great. Well, that was actually the last question, so I think it worked out. If anyone wants to follow up with you, I know they have your link tree, but just for the sake, also of the video, is Twitter the best place? Where are you these days on social?

>> NICK: Twitter is the best place for the near future. I don’t know what’s going to be the future of Twitter, but the link tree gets you to a lot of my other things. So that might be the best place to really look. But yes, I am Nick_the geek on Twitter. So somebody got nickthegeek and I’m bitter about that because they don’t use it.

>> AMBER: Yes, well I’m HeyAmberHinds because there is a different Amber Hinds. So I feel you. All right, well thank you everyone, and thank you to our captioner for doing a little bit extra here.

And thank you so much, Nick, for a great presentation. I gave you a shout-out because you did a phenomenal job with reading out the code for people who can’t see it or just listening, which will be super helpful when we release this as a podcast episode. But I thought you did a great job and I definitely learned a lot. And I know we’ve been talking about getting better, about having more color schemes in the websites we built. So I appreciate this.

>> NICK: All right, well, I just want to say thank you for the opportunity. I really enjoyed this. And thank you everybody for your amazing questions and feedback.

>> AMBER: All right, well, we’re going to do a little wave and smile at the end because I just want to make sure that the captions catch up before I end this. But thank you everyone and we’ll see you soon. May the fourth.

View Presentation Slides

Links Mentioned

About the Meetup

The WordPress Accessibility Meetup is a global group of WordPress developers, designers, and users interested in building more accessible websites. The meetup meets twice per month for presentations on a variety of topics related to making WordPress websites that can be used by people of all abilities. Meetups are held on the 1st Thursday of the month at 10 AM Central/8 AM Pacific and on the 3rd Monday of the month at 7 PM Central/5 PM Pacific.

Learn more about WordPress Accessibility Meetup.

Article continued below.

Stay on top of web accessibility news and best practices.

Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.

Email(Required)

Name

First Last

Name

This field is for validation purposes and should be left unchanged.

Summarized Session Information

In this session, Nick Croft presents an in-depth look into the evolution and future of responsive design, focusing on color modes. He covers the history of responsive design, starting from fixed layouts to the latest advancements in CSS and HTML that facilitate highly adaptive layouts. Nick delves into media query basics and the power of combining media queries to create specific CSS rules.

He explores the future of responsive design, highlighting the importance of layout customization, display quality, color modes, interaction methods, and user preferences. New media queries introduced in Media Query Level 5, such as light level, inverted colors, prefers color scheme, and reduced motion, offer advanced customization options for developers to create more responsive and accessible web experiences.

Nick also explains the benefits of using CSS variables, particularly in WordPress development, and provides practical examples of implementing light mode, dark mode, increased contrast, and reduced motion. He concludes with optimization techniques, including custom media queries, conditional imports, and media query stylesheets, to enhance performance and manage large stylesheets effectively.

Session Outline

History of responsive design
Media queries basics
The future of responsive design
New media queries
Using CSS variables
Examples
Optimizing

History of responsive design

Fixed layout

In the early days of web design, fixed layout was the norm. Websites were created with fixed widths, often designed for specific monitor resolutions such as 640 pixels, 800 pixels, or even 1200 pixels for high-end setups. However, this approach had significant limitations, as content would overflow or get crushed on different devices, particularly on the smaller screens of the time. This resulted in poor user experience, prompting developers to seek better solutions.

Liquid layout

To address the limitations of fixed layouts, developers introduced liquid layouts, which used percent-based widths to create more flexible designs. These layouts adjusted to fit various screen sizes but were still not fully optimized for mobile devices.

As mobile phones primarily served as communication tools with limited browsing capabilities, liquid layouts were an improvement but not a comprehensive solution for the emerging mobile web.

Resolution dependent

The next step in the evolution of responsive design was resolution-dependent layouts. This approach utilized JavaScript to load different style sheets based on the screen resolution. While this allowed for greater flexibility and adaptability, it also required significant maintenance, as each resolution needed its own complete set of style sheets, making the process cumbersome for developers.

Mobile URLs

With the advent of smartphones, companies began creating separate mobile URLs to serve mobile users more effectively. These URLs detected mobile requests at the server level and redirected users to a mobile-specific site.

Although this approach provided a better mobile experience, it often resulted in limited functionality compared to desktop versions and involved managing separate themes and content for mobile and desktop sites.

Responsive design

The introduction of responsive design marked a significant milestone. Using media queries and various CSS techniques, developers could create layouts that adapted to different devices seamlessly. This approach led to the concept of mobile-first design, prioritizing mobile user experience as mobile web traffic surpassed desktop traffic.

Responsive design became essential as users increasingly accessed websites on their phones, requiring designs that could dynamically adjust to various screen sizes and orientations.

Next-gen responsive

The latest advancements in responsive design include new CSS and HTML features that facilitate the creation of highly adaptive layouts.

Grid and flex layouts and other CSS3 innovations enable developers to build layouts that automatically adjust and stack based on device size. Features like fluid typography ensure consistent text presentation across different screen sizes, enhancing the user experience.

These advancements represent the natural progression from liquid layouts and early responsive designs, allowing for more sophisticated and adaptable web designs.

Media query basics

This section explores the fundamental aspects of media queries, a critical component in responsive web design.

@media media-type and (media-feature-rule) {
/* CSS rules go here */
}

The primary media types are “All,” “Print,” and “Screen,” each targeting different mediums of content display.

Media features allow developers to tailor their CSS rules to various device characteristics. Key media features include:

Size: width, min-width, max-width, height, min-height, max-height.
Layout: orientation and aspect-ratio.
Device features: hover and scripting.
Preferences: reduced motion and contrast.

Combining media queries

Combining media queries offers powerful ways to create highly specific CSS rules. Three examples illustrate this concept:

Basic combination: @media screen and (min-width: 600px) and (orientation: landscape) applies styles if the screen width is at least 600 pixels and in landscape mode.

@media screen and (min-width: 600px) and (orientation: landscape) {
body {
color: blue;
}
}

Joined queries: @media screen and (min-width: 600px), screen and (orientation: landscape) combines two conditions using a comma, applying the styles if either condition is met.

@media screen and (min-width: 600px) screen and (orientation: landscape) {
body {
color: blue;
}
}

Negation: @media not all and (orientation: landscape) excludes styles in landscape mode, applying them to all other orientations and media types.

@media not all and and (orientation: landscape) {
body {
color: blue;
}
}

These combinations allow developers to fine-tune the user experience based on multiple criteria, ensuring that websites are adaptable to various devices and user preferences. Complex media queries can be created by joining multiple conditions, enabling precise targeting of user needs and device capabilities.

The future of responsive design

Layout

The future of responsive design offers increasingly sophisticated options for layout customization. Developers can now address orientation (such as landscape or portrait) and aspect ratios (e.g., 16:9). This allows for more precise adjustments to layout based on the specific characteristics of the device being used. These advancements help optimize the website layout for various devices and screen sizes, providing a better user experience.

Display quality

Improvements in display quality detection enable developers to target high-resolution and low-resolution screens differently. Developers can create pixel-perfect designs that maintain visual integrity across various devices by understanding how a device measures pixels. This capability is crucial for fine-tuning the appearance of web elements, ensuring that designs look sharp and consistent, regardless of the display quality.

Color mode

With the ability to detect device color modes, developers can ensure website colors remain consistent and on-brand across different devices. This includes accommodating devices that use different color palettes or mixing methods. By addressing these variations, developers can maintain brand integrity and visual consistency, which is essential for a cohesive user experience.

Interaction

Responsive design is evolving to understand better and respond to user interaction methods. This includes detecting whether a device supports hover (e.g., a mouse) or touch input. By tailoring the user experience based on the interaction method, developers can provide more intuitive and accessible interfaces. For example, hover-based interactions might be replaced with touch-friendly device alternatives.

Preference

Addressing user preferences is considered the next generation of responsive design. As operating systems on both mobile and desktop devices share more information about user preferences, developers can create experiences tailored to individual needs. For instance, if a user has dark mode enabled on their device, websites can automatically adjust to dark mode without requiring manual toggles. Similarly, preferences like reduced motion can be detected, allowing websites to disable potentially nauseating animations and replace them with more subtle effects like opacity changes.

The ultimate goal is to enhance accessibility and user experience. It is paramount that websites do not cause discomfort, such as motion sickness. By leveraging user preference data, developers can create more inclusive and enjoyable web experiences, recognizing the diverse needs of their audience and adapting accordingly.

New media queries

Media Query Level 5

Media Query Level 5 represents the latest advancements in responsive web design, building upon the foundations of the previous four levels. Initially, media queries enabled basic responsive functionality, with subsequent levels refining and simplifying their usage.

Media Query Level Five introduces many new features that significantly enhance the ability to tailor web experiences to user environments and preferences.

These new media queries empower developers to create more responsive, accessible, and user-friendly web experiences, accommodating a wide range of user needs and preferences.

light-level

One of the notable features of Media Query Level 5 is the ability to detect the light level in the user’s environment. This capability allows websites to adjust their contrast based on whether the user is in a low-light or high-light setting.

For instance, a user browsing outdoors in bright sunlight could benefit from increased contrast for better visibility. In contrast, a user in a dimly lit room might prefer reduced brightness to avoid eye strain. This adaptation mimics the responsiveness of modern apps, offering a more seamless and comfortable browsing experience.

inverted-colors

Another feature is detecting inverted colors, which is particularly useful for users with specific vision impairments. Inverted colors can make content more readable for those with low vision, and now, websites can detect and respond to this setting in iOS and macOS operating systems. This ensures the content is accessible to a broader range of users by accommodating their visual preferences.

prefers-color-scheme

The prefers color scheme media query allows websites to align with the user’s preferred color scheme, whether in light or dark mode. By detecting this preference, websites can automatically switch to the appropriate color scheme, enhancing the user experience. This is particularly beneficial as more users adopt dark mode to reduce eye strain and save battery life on their devices.

prefers-contrast

Websites can now detect whether users prefer higher or lower contrast. While higher contrast is generally considered more accessible, some users might find it overwhelming. Detecting a preference for reduced contrast allows websites to adjust their design accordingly, avoiding the starkness of white-on-black text, which can be difficult for some users to read.

prefers-reduced-motion

The prefers reduced motion media query caters to users who experience discomfort or motion sickness from excessive animations and movement on websites. By detecting this preference, websites can disable or minimize motion effects, providing a more comfortable browsing experience.

prefers-reduced-transparency

Similar to reduced motion, prefers reduced transparency addresses the potential overstimulation caused by semi-transparent elements. For instance, a modal window with a transparent background can be challenging for some users to process. By detecting a preference for reduced transparency, websites can render these elements fully opaque, reducing visual complexity and enhancing readability.

prefers-reduced-data

The prefers reduced data media query is particularly useful for users with limited data plans or those who prefer a streamlined browsing experience. This feature allows websites to simplify content, turning off sidebars, related posts, and other non-essential elements. By focusing on the core content, websites can provide a more efficient and less overwhelming experience, catering to users’ data preferences and improving overall usability.

Using CSS variables

CSS variables offer a powerful tool for modern web design, allowing developers to streamline their code and enhance flexibility. This section explores the benefits and applications of CSS variables, particularly in the context of WordPress development.

New theme JSON-Based themes

The introduction of theme.json in WordPress themes marks a significant advancement. This JSON file enables themes to automatically output CSS variables, simplifying the process of theme customization.

New themes, especially those based on Full Site Editing (FSE), come with built-in support for CSS variables. This allows users to update colors and other design elements directly from the block editor. This seamless integration between the theme.json file and CSS variables empowers users to customize extensively without delving into complex CSS coding.

Ease of CSS updates

One of the standout features of CSS variables is their ability to change styles without the struggle of selector specificity. In traditional CSS, developers often encounter issues with highly specific selectors and the use of the !important keyword, leading to conflicts and cumbersome overrides.

CSS variables alleviate this problem by allowing global changes that cascade through the stylesheet, minimizing the need for repetitive and conflicting rules.

Efficiency in rule changes

CSS variables significantly reduce the amount of code needed to update multiple styles simultaneously. For instance, if a variable is used to define a common property like padding, margin, or color, changing the variable’s value updates all instances where it is applied. This efficiency is particularly beneficial when implementing responsive design through media queries. Instead of modifying each individual rule, developers can adjust the variable, and the changes will propagate throughout the entire stylesheet.

By leveraging CSS variables, developers can create more maintainable, scalable, and flexible stylesheets, enhancing both the development process and the end-user experience. Integrating CSS variables into WordPress themes through theme.json further simplifies theme customization, making it accessible to a broader range of users.

Examples

Light mode

This section begins with an example of a website displayed in light mode. The default experience for users includes a teal page header with white text, a full-width WordPress cover block featuring a wood-fired pizza oven with white text overlay, and a section with a white background and a teal call-out box.

The site includes black text for body content and a card grid gallery showcasing images of pizza and a dough ball.

This setup represents the standard appearance without any user-specific preferences applied.

Dark mode

Switching to dark mode, the website’s appearance changes to accommodate users who prefer darker interfaces. The header background color shifts from teal to dark blue, and the overall background changes from white to dark charcoal gray. Text colors invert accordingly, with black text becoming white to maintain readability.

This transformation is achieved using a few CSS and media queries lines, demonstrating how CSS variables and media queries can effectively manage such changes.

Increased contrast

The website adjusts its colors to offer better contrast for users who prefer higher contrast. In this example, the header background changes to a higher contrast blue instead of teal, enhancing readability.

This adjustment is managed through media queries that detect the user’s contrast preferences and apply the necessary CSS rules to ensure a visually accessible experience.

Inverted colors

Inverted colors present a unique challenge. The example shows a white header with black text, an intentional adjustment to improve visibility for low-vision users who use inverted colors. By carefully selecting background and text colors, the website ensures that content remains readable even when colors are inverted.

For instance, a pure black background with white text can be too harsh, so using a dark charcoal background with white text offers a better experience. This careful consideration helps avoid issues such as migraines or seizures triggered by high contrast.

Reduced motion

To accommodate users who prefer reduced motion, the example includes a video demonstrating removing hover effects that cause elements to expand. Initially, hovering over cards causes them to grow slightly, but with the “prefers reduced motion” setting enabled, this effect is disabled. Instead, the transform property is set to none, ensuring a stable and comfortable experience for users sensitive to motion.

Optimizing

text

Custom media queries

Custom media queries are a powerful tool for optimizing CSS. By defining custom media queries, developers can reuse them throughout the stylesheet, reducing redundancy and file size. An example of a custom media query is:

@custom-media--medium-devices (min-width:50rem);
@custom-media--large-landscape (min-width:70rem) and (orientation: landscape);

These custom queries can then be applied as follows:

@media(--medium-devices){
 .container {
   max-width:40rem;
 }
}

However, custom media queries are not yet widely supported, so this method is something to look forward to for future optimization.

Conditional imports

Conditional imports allow CSS to be loaded only when specific conditions are met, optimizing load times and performance. For example:

@import url(reduced-motion.css) screen and (prefers-reduced-motion);

This rule will load the reduce-motion.css file only if the user has the prefers-reduced-motion setting enabled. This approach helps keep the primary CSS file lightweight while accommodating various user preferences. While implementing conditional imports may require additional build processes or plugins, the performance benefits can be significant.

Media query stylesheets

Using separate stylesheets for different media queries can further optimize CSS. In HTML, this can be done with:

<link 
rel="stylesheet" 
media="screen and (prefers-reduced-motion)" href="reduced-motion.css">

For WordPress, the wp_enqueue_style function can be used to conditionally load stylesheets:

wp_enqueue_style( 
'reduced-motion',
get_stylesheet_directory_uri() . 'reduced-motion.css', 
[ 'main' ], 
'1.0.0', 
'screen and (prefers-reduced-motion)' );

This function ensures that the stylesheet is loaded only when the specified media query condition is met, such as prefers-reduced-motion. This method helps manage large stylesheets by loading only the necessary CSS for specific user preferences, thus enhancing performance and user experience.