#93: Accessibility Overlays and Calculating CSS Specificity

Hey ladies and gentlemen, thanks for joining us here on the Drunken UX Podcast. This is episode number 93 we’re gonna be talking about accessibility overlays along with CSS specificity, not together but separately in different parts of the show. They are related though they well, they certainly can be related much like me, myself and I. I am your host, Michael Fienen.

I’m doing well after standing up to record this episode and then immediately almost falling down because my back decided to say “Standing? That’s a young man’s game.”

Yeah, exactly. How is that even fair? You turn 39 and you suddenly realize you aren’t quite as invincible as you used to be. And let me tell you, nobody warns you about that in sex-ed class. If you’re enjoying The Drunken UX Podcast, go give a shout out to our sponsors over at live@Manning. Coming up next month on august 3rd they are doing another free live webinar coming up on APIs and API design.

If you want to get a free ticket to that event, it is streamed on Twitch and you can just go to drunkenux.com/apiconf. That’s drunkenux.com/apiconf. Speaking of Twitter, I went out before the show started and just kind of asked everybody what you wanted me to drink this week and when I last checked right before we started uh the Four Roses Small Batch was winning 4-1. So that is… we’re going with that.

Yeah I like it. I’m not gonna I’m not gonna give you the whole breakdown of it. I drank it on the show before but I had a brand new fresh bottle of it. I had something else. I had really honest to God planned on drinking a burglar or 12 uh for this episode and I opened it about three days ago and it’s gone now because hopefully because you drank it well. Yes I I did I drank it entirely too fast but it was incredibly good.

Like it’s not gonna blow your mind, it’s not like mind blowing out of this world like flavors or anything that it’s just incredibly drinkable and I fell prey to that a little bit. I’ve been working on my proton pack in the evenings and like sitting there with a nice glass of scotch while I’m putting in 1000 screws that take forever weight goes. So you picked it. I’m drinking at four rows of small batch this evening.

You can buy them. It’s allowed,

Well you can always uh in spirit, drink with us, that’s fine spirit. Or in

Aaron, did you happen to see earlier the well earlier this week when we’re recording this um this will be airing pretty quickly after we’ve actually recorded it. So this may still be in the twitter space, but um have you seen the excess A. B. Hashtag floating around the last few days?

Is this

it was like no, yeah, this is the same thing. I had to eat a little crow. Uh I think it was, it was a few months back, if not farther. And I try to remember, I think it was when we were talking about the US of campaign websites, political campaign websites. I think I may be remembering this wrong, but we were looking at a website and I remember they had an accessibility overlay tool. This is what an accessibility overlay is.

Is it’s usually a line of javascript that you add to your site that puts a little badge in the corner and you can hit that badge and it will do things like change the colors of the site, change the zoom, change the font, you know, invert colors, things like this with an idea that it helps solve accessibility problems on the page. Now, if you listen to us long enough, you know that we are huge fans of accessible design.

Like you should build it right from the start, ideally. We also understand that a lot of places don’t understand that concept at all. Um you know, they’re buying themes off the shelf or whatever, their little business just at mom and pop shop setting things up. They’re not even thinking about that and we get that.

And so at at that point in time I’ve gone on twitter and I had shared some of this and I said, hey, at least they’re thinking about accessibility and they’ve added this tool, it’s better than nothing to which I was very properly corrected by many people that yes, like these tools can frequently be worse than nothing.

Um and you know, that was Something like, say, I ate crow on it, and I immediately corrected myself after listening to the concerns because they were 100% right.

Yeah, yeah.

and that.

Transcript, Yeah. Accessibility and usability. We just proved it. We solved the internet. Ladies and gentlemen, I’m taking the rest of the night. We’re done. Thanks for listening. Um so what happened? Let me frame up what happened here and then we’ll talk about the act, the underpinnings and and philosophy of this. So accessible is one of these tools there there are a dozen, a half dozen of these different tools out there.

Uh you might have heard of things like audio I or user first or max access, like these are all tools that do very similar things. And what happened was accessibility is one of the more well known, I think platforms that does this and the reason that they have been doing this for quite a while, This is not a new tool by any stretch of the mind.

But what happened was in this last week they launched a national ad campaign that I I think it launched on hulu, I don’t know where else it might be running, but I know it was on Hulu for a fact and of course youtube and and what not the commercial itself, honestly. And I’ll, if I remember, I’ll throw it in the show notes if you want to give it a watch. It’s not a bad commercial. Like it was,

write. Well done, good. Uh, the problem, the problem isn’t the message. The problem isn’t the ad the ad drew attention to them and drew attention of accessibility advocates.

So what happened was all of these advocates, all these people with disabilities took to twitter and started tweeting about it. There were a couple organizations that had recently adopted the tool who sent out tweets over the last couple of days and people like jumped on those tweets and said, please drop this tool.

Here’s all the reasons why like there were a couple of folks and and again, we’ll have links to some of these articles and stuff in the show notes. There were some folks on some of these threads that went into extensive detail as to how these tools hurt their experience and their ability to use the website

affected. These are legitimate like blind users, people using screen readers, low vision, people with a motor motor impairment, things like that. So that that was yes. Part of it where really got interesting was there is a page called the overlay fact sheet dot com. Yeah. Overlay fact sheet dot com. This was created um earlier this year. I didn’t look at the get history to see exactly when it launched.

I like it was at least March if not earlier than that. It was created by Karl Grove. If you don’t know that name Karl is the CEO of Tenon.io and Tenon is one of the premier accessibility consultants in the country.

Dot I O. Um and Karl has well deserved respect in this field. He’s incredibly smart on all of this and knows his stuff inside-out. He’s worked at Deque. He of course started this company. He’s got a couple others – Level Access, I believe, he worked at at one point. This is a dude that lives and breathes accessibility. Karl is an absolute paragon in this industry.

As far as like somebody to go to when, when he talks about accessibility, you generally want to listen. Sure. So a friend that I know he was commenting and this is how I came to my attention. I saw them tweeting at one of these organizations and shared this. Um, and was like, hey, you should read some of these resources and people’s experiences because it’s not as, it’s not as helpful as you might think it is to which access A. B replied and I’m quoting

This is the first one here. There was a bunch of choice. Well, yeah, I’m going with this one. The fact sheet is an unofficial document created by our competitors and we ask that you refrain from sharing it as it is misleading. There are many accessibility professionals and advocates who support access to be and use it to access websites. Now, first off, we’re not, we’re not wrong. You’re wrong. Yes, exactly.

First off, tenant is not a competitor with accessible, at least not directly. Yes. They are both accessibility companies. But tenant does accessibility remediation and training and education access to be makes a product that they sell like it’s pretty different in that way. Also asking people that well, uh, unofficial document, what would an official document would have to be something from the W three C. Uh,

But

I don’t even know what that means. I don’t even know what that is that bad. That code. And my Emmanuel coder is, my code is not generated by ai I don’t, I don’t know what this means.

and, and the key, I think the key phrase there that was also attached to all of that is, well, Karl Grove’s does not have an accessibility so clearly he can’t do this disability, disability. Yeah, but the actions of the company can’t be ignored. And there, this isn’t even like the first kind of weird thing that has come up over WP tavern.

They noted a couple months ago that WordPress dot org had to go in and remove reviews from the access to be plug in because they detected patterns of fake reviews on, on all of their stuff and we’re not talking about two or three. We’re talking like it was like two dozen or something reviews that got pulled down because of it. Um, and reviews that also surprisingly unsurprisingly gave negative reviews to all the competitor plans.

One of the problems I think that happens in in this space in general. And when I say this space, I mean web not necessarily accessibility. They, because I say I made that mistake when when I talked about this originally and I said, well it’s better than nothing, right? There is.

I think a very reasonable line of thought that can bring you to that point that says it is better than nothing or you can have a completely inaccessible site or you can use it, we can make a tool that will try to make that better. Like there is a motivation factor there that is altruistic. It’s just misled.

The best marketed snake oil is still snake oil. Exactly. And that’s overlay tools in general are snake oil. Um, because you should always advocate for fix the base problem creating accessible product to start with and don’t get in the way of people’s tools. That’s really one of the core problems that we see here is the reason overlay tools are so ineffective is because what’s our favorite law of U. X.

Yes. People spend more time on everybody else’s site than yours. Right?

christ All right. Look, you got the answer, right? Take the win. Okay, you get a uh, but this extends to people’s experiences, you know, digitally in general. So when we think about if you are somebody who needs assistive technology, you already have that built into your computer, You already have that built into your browser. And so what these things do is get in the way of that.

They disrupt that they conflict with it and fight with it because they don’t know that you’re running a screen reader. There’s no, you know, there’s no connection between these things and that’s one of those realities that you have to come to realize. And I think the, there there’s a matter of humility here that I could understand building something and realizing, you know, hey, I’m trying to fix this problem.

I saw, I think I’ve got a good way to do it. I’ve got this idea, nobody’s doing yet. I’m gonna make it. And then at some point you have to realize, oh no, this isn’t good. Like we went down the wrong path, We need to pivot this and you have two choices at that point you lean in or out and they leaned in.

that’s leaning out though. I mean, okay, you’re either going to double down like they did and say no, we’re not wrong, you’re wrong or you acknowledge. And that may mean dropping the product, that may be modifying the product. Like I I honestly I don’t know how you would modify them to well like this, but

All they had, I’m sure all 10 listeners will be very, very pleased with this. There’s a survey accessibility practitioners survey over web aim and they asked this question specifically about um overlay plug in and widget effectiveness. Um and of the respondents, it came out to basically 67 um said that the tools were not effective or not not effective at all, or not very effective. 1/3 said they were either somewhat or very effective.

What’s funny about that is the way those responses change when the respondents have disabilities, at which point That unfavorable rating jumps to 72% and the effect, the very effective uh, Piece of the pie is only 2.4%,, wow. So if you wanna go check out first off overlay fact sheet dot com. Check that out. If you are at an organization where an overlay of some kind is being looked at as a solution that will give you some ammunition to push back on it.

Um, they’ve collected a ton of resources and links and articles, but they also collected a ton of personal experience stories that explain why these things don’t work out well. Um, as of earlier, there were 528 people, developers, designers. UX professionals. Accessibility professionals had signed on. They’ve got a little statement at the end of sort of commandments, so to speak, that you agree to adhere by in terms of accessible technology.

If you feel like signing it, go for the github repo and add your name to the list and make a pr back to the original. Um I signed it. I have no qualms saying that because I modified my thinking based on the information, I got new information, I adjusted my way of thinking very quickly. Like that was an easy thing for me to see. So go check that out. It will give you like, say it will be very useful to have a couple other articles as well.

There’s another one from WP Tavern that talks about this. Um Forbes and UX design has a really good breakdown of why um accessibility, automation technology doesn’t work well. So go check those things out, let us know if you have experience using those things either as a an implementation or as a user. I would be interested to know, you know, some firsthand stories, if anybody’s uh ran into those things, but um I’ll be interested to see what happens.

Um I do know a couple of the companies that got called out on this where they were like, hey, we just launched access to because I’m sure there was some agreement that we’ll, you know, we’ll promote you or something that we launched. Um and they, the company’s chimed in and are like, thanks. We’re going to review this information and and re evaluate for them our usage of the tool, which see that’s that’s

Yeah, Yeah. Like that’s, Yeah, it’s easy to understand why you would want it. And that’s, that’s where we get into the snake oil component. Right? And that you’ll have that 2.2.4% of people that say they are effective and they’ll lean on that in marketing and messaging and all of that to make you feel like yes, these are good products and because cognitively it makes sense to us, especially if we aren’t in that population.

It’s really easy to understand how you can get into this and say I can sell this, I could sell it like I’m a damn good salesman, like I could sell this the shit out of this product. But that’s when your market,

And all of the marketing is geared towards that one line at one line of code to your website and solve your section 508. Your policy 12, 10 problems. You’re you’re weak ag 2.1 double a. Like that’s if you can go read the marketing on any of these sites and they all claim variations on this same exact stuff. They really push the one line of code thing. Uh, interestingly,

Its company was an easy button. Yes. It’s when a ceo looks at an easy button and they can hit it for $15,000 or whatever. I don’t know if the companies charge, that’s not a reflection on them, but I’m just throwing a number out. But when they see an easy button and think, well, I’m gonna have to spend six months of salary, you know, that’s going to be 40 grand to my developers time or something like that to remediate all these problems.

Or I get a $15,000 easy button, right? I get it. Like that was a business decision. You think

And I was 100% guarantee you that every term of service, every contract you signed with these companies absolves them of any legal culpability. If you were to get sued, I guarantee it. Yeah, I can see that.

to build accessible products. Uh, okay, anyway, let us know what you think. We’ll be watching this unfold and see where it goes. Um, uh, and uh, Karl, Karl, we love you. So I sincerely,

Absolutely, yeah, never, never want bad for anybody, but I will laugh when they trip and fall because I grew up on America’s funniest home videos and that’s what you did got hit in the nuts. Gotta laugh at it. Oh God, okay, so the other topic for this evening, we want to look at CSS specificity, um, and dig into how it works and why it works and what it means when you look at CSS and are trying to understand why doesn’t something look the way I expect to.

this. Yeah. Because CSS specificity is a very concrete concept. It’s not abstract. It’s a very thought out. Like you’re going to realize that there’s a calculation you do to determine federal city early because here’s the thing, right? When you think about CSS, if I have a link in the body of my page and I wanted to look a certain way, I can in any given moment, right?

12 different ways to target that link guarantee. If not more ah for complex accepted. Well do it. It’s easy. Like I would argue that for any kind of complex page, there’s probably a nearly infinite number of ways to target any given element. Not truly infinite, but I mean you, you’re probably talking about because when you’re talking like expert exponents, it gets real big real fast.

to infinity. That’s just a teardrop because it made me cry when I first tried to figure out all this math originally back in back in the young beards days when the beard had no grey in it. Um Okay, so let’s let’s start with exactly what specificity means because there are three pieces of CSS that matter and sort of intermingled intertwine. You’ve got the cascade the sea of CSS, right?

That that word means something you have specificity, which is not one of the two ss after that. But don’t get confused and you have inheritance. There’s no I in CSS at all. But inheritances that that’s what the tv shows about. No. Uh uh Is that? But it isn’t C. S. I. Is that the one where they had like two people typing on one keyboard at the same time?

Or is that N. C. I. S. I had I don’t watch either of mine and I just I know the member, I just joked with a buddy of mine today about breaking out the tandem keyboard to let’s speed things up. So the cascade. Right? How do we are not cascade rather specificity? How do we calculate specificity? It comes from a four digit number that is used to resolve conflicts in the cascade? Right.

And so let’s start with the easy idea. Right, what is cascade? Mhm. I’ve got a style sheet and I have typed into it. A bracket color blue. Okay. And then 300 lines later I say a bracket color red. Closing. It’ll be read. Yeah. Are you sure

How sure are you of that?

because that’s the intact.

Yeah curly brace brace boy. Sorry. Yeah. I don’t mean I don’t mean square bracket. I didn’t, I was not trying to like spook you and mislead you on. I’m just do you want to be a millionaire about this? Is that your final answer?

the same. Just

because yeah, the cascade means when, when two selectors go walking. The last one does the talking.

just made that up. You can use it. So where specificity comes in is if I have to selectors, let’s say I have a uh colon blue or I’m sorry bracket. You know what I’m I can’t articulate this over and over. Color blue not attack. Yes. And then then I have a dot active. Yeah and its color green. Right? I have now written a more specific um I should have reversed those actually I should have a dot active is read and then later. Yeah.

Then later I say a color blue. Well the color would obviously be red assuming I have the active class on my A tag because it is more specific, more specific winds. So that brings us to the specificity model. This as I said, it’s a four digit number. Technically it’s a four number number because each number can actually be as high as it needs to be 99. Like it doesn’t roll over.

It’s not like it’s not like a base 10 number. It’s really like four numbers comma delimited, but it starts with from most specific to least specific any in line styles.

style tag on the html element. Yes. Right, Okay. I. D. S

or in in the syntax like CSS syntax hash round side. Um Then you have classes, attributes and pseudo classes

there. That’s all at the same level. And then you have elements and pseudo elements.

Class attributes,

so and then CSS in text that’s represented by like a square bracket and then Yeah, like square back bracket, Rehl equals. you’re talking. I know, I’m sorry, I was not trying to trick you. It’s, it’s holding classes over audio. I know it’s hard

and we’ll talk about those in depth here in a second

element. Oh yes. Now the one way to break all of this is to use the bang important exclamation point import that immediately overrides everything that restarts the cascade effectively. And the only way to override an important is with another important. That’s more specific. Yeah, you can’t,

Only one, Yes, only one everyone and you should use them very sparingly. I generally will make the argument that the only time you can really justify using it is when you need to override CSS, you can’t edit. So if you’ve got a wordpress plug in that brings its own CSS in and you don’t want to like fork the plug in just to edit their CSS or copy it or whatever.

You can write rules that are bang important and override those that way because it’s you’re trying to change default behavior that isn’t your default. So let’s talk here about pseudo classes and pseudo elements though and how they factor into all of this.

so let’s let’s start with the easy one with pseudo classes because you, you nailed him to a t write a pseudo class is a selector that defines state. So you’ll see these as colon, hover colon visited colon to say there is one exception to it. Not. Oh, so whatever you put into not counts, but then not itself does not count towards specificity, interesting.

Yeah, so that’s just something to kind of, you know, asterisk, that not is a pseudo class that does not count toward specificity, but what is inside, it does count towards it. And so pseudo classes that we said define state, they define like a quality about the thing that you want to target.

Links tend to be the really common one, but the other one where you’ll see this a lot is with like forms, um and form elements, because form elements tend to have a lot of states associated with them, like required uh disabled, things like that.

Placeholder, visible I think is one. Um and so those count though as if they were a normal class, but they are in addition to, so if you said like dot form field class named form field colon disabled, That has a specificity of zero,

I would not say like every single uh every single example of the pseudo classes will be definitely supported depending on what browser you’re using, but they are well supported and you can always go to can I use dot com and And check and see if what you want and all of them like the normal Hover focus active disabled. Like all of those are 100% supported across the board.

There’s no risk at all. Um so those are pseudo classes pseudo elements. That’s the one you said you weren’t as familiar with. So if it class targets a state, a pseudo element actually targets a space. So the classic example of this is before and after.

Right? So like if you’ve ever used like a colon colon after and then said, you know, content uh links right? Like got it. What you’ve done is you’ve you’ve said I want to target the space after this link. I want to target the space before this link. Similarly, you can target things like the first child. You can target things like the first line.

You can target selection, which is what you have when you see sites that have, like change the color of the highlight when you highlight text, they’re using the selection pseudo element. Because it’s targeting while you could argue that being highlighted is a state of the text for the purposes of styling, it’s it’s targeting an area, like a block of known stuff. So they, that’s considered the pseudo element.

So pseudo class is defined state pseudo elements define things. Cool, It’s kind of how that works, which is why the pseudo elements Are scored one point lower than pseudo classes. Got it. Uh, now here’s the real trick. Both of these use Coghlan’s when you write them in your CSS use Coghlan’s no matter what to define these elements. But sometimes you see single colon, sometimes you see double Coghlan’s tell me why um

uh incredibly close. I mean you might as well stick a star sticker on your forehead for that one. I mean the only the only difference between what you said, what the actual answer is is that single Coghlan’s should always be used with pseudo classes. Double colon should always be used with pseudo elements. That’s it.

I thought this would make a trick answer, practically the exact same thing you said. Yeah, basically the uh, the thing and the reason why this kind of comes up is it is a fluke of the browser that that is not strictly enforced anywhere. If you use one or two Coghlan’s interchangeably. I think for the most part, browsers will always interpret it correctly because the double colon syntax was added later.

a single oh, I have 100% made this mistake now, if you, especially if you do this with uh like SAs or something like that and you have babble installed and everything and you’re compiling your CSS, it’ll fix all that automatically for you, for what it’s worth. Uh but it’s one of those little just syntax things to know.

Um just for the purposes of, let me use my word, I got to use my word idioms, the CSS idiom in this case, and it makes it also makes it really easy to think about this in terms of specificity then, because if you’re scanning your code, you can you don’t have to stop and think, wait is first child pseudo class or pseudo element.

If you write it correctly with double and single quotes, you can just look at that and no, that oh no, that’s a pseudo element, we’re good to go, Mhm Okay, two more pieces to this puzzle. First is smarter just writing smarter queries and I want to talk about this because it doesn’t affect specificity at all sure, but it does part of making sure that your CSS behaves the way you expect it to. Is writing good queries?

This is the power feature selectors. I’m sorry, I’m using the wrong. I’m saying queries, selectors is really the right way of saying this is yes. Um It’s, I mean, yeah, it’s power user stuff, but is it um not not power

Because

possible. And so as a result, here’s the thing when you’re writing CSS you generally always want to try to write the least specific selector possible. It’s more efficient, it’s quicker. It compiles easier. It reads easier and it makes for smaller files. Um So it’s always good to try to write stuff as shorthand as possible. We have what are called Combinator is combined maters. I am the Combinator. I

It’s fucking ugly. Yeah

There are there’s an entire school you’re not going to say you should never use an idea in your CSS ever. Like that’s a thing. That is something people believe

and then

Um what I really like for CSS and I. D. S is using them as a poor man’s name, space as a way of saying like everything inside of this idea is a certain way and thing and then nothing outside of that I. D. Should be able to influence what’s inside of it. Um I

Um So okay so we’ve got these uh cops. I really, I genuinely don’t know how to say this word, I say combinations Combinator because I mean my brain wants to say combine a tours because it’s from the word combining Combinator Combinator is correct.

So there is one Combinator you use constantly and you don’t know you use it and that’s a space, any time you use a space in CSS all you’re doing is saying this is any non specific descendant of an ancestor. So when you say div a, you’re saying All the eight tags as long as it’s a descendant of a div,

anywhere at any point in its tree

The next one you can do is the right carrot, right pointing caret, right angle bracket greater than greater than. Thank you. That indicates an immediate child. So in this case if you did div Greater than a, what you’re saying is I want to target all the eight tags that are the immediate child of a div. So not what you just said. If it’s in a P. In an M.

That doesn’t count because it is not an immediate child, then the in this case the P tag would be the immediate child. Mhm. There’s the tilde the little squiggle boy. If you said Deb squiggle boy eh you’re saying any general siblings? What does that mean? So if I said div squiggle a I’m saying any A. That is at the same level of the dom as the div. So not inside of it, it’s a sibling at any point.

Okay. After after, I think you do, I think it is, this is one area I would have to look to be very specific about this. I do think it has to be after. It is the only condition

to this one. So then, yeah, the corollary for this one is the plus sign, which is a sibling, but it’s a sibling that is immediately adjacent to it. So if I did Divx plus, it would have to be a div that immediately has a link after it. A better example of that is not a dividend. A would be something like an H one plus P.

And then you can say, you know what I want my lead paragraph, I’m writing articles, I’ve got a blog, my blog has a headline and then content. And you could say I want the first paragraph of my content to be bigger and italics or whatever because it’s the lead paragraph. So I would say H one plus P. And then if I said H1 Tilda P, I would target all of the paragraphs. After the H one.

Yeah. I mean after after in the code, not December H1, like literally just after it in the code flow.

um

than great. Yeah.

nested menu behavior is a really good case because they are meant to be nested so. And because you usually invent them and margin them and all of this. Yeah. That that specific addressing of what is a child of what is very important.

I I should probably. Yeah I I guess we’ve got this whole way and I’ve never said how it’s calculated have I? You were supposed to stop me but the bourbon kept us going so the specificity is super easy. So I said it’s it’s four numbers. Can each each number is self contained technically it’s literally just counting. Okay so it’s the number of things that match those four.

Okay so let’s let’s go back let’s let’s review before the pop quiz. Right? It’s a four digit number. What do you count in those four digits?

so I give you just a div what’s that would just be an

correct? The zeros matt. I mean the zeros don’t really matter but they definitely help for cognition standpoint. Yes 0001 So let’s say okay so we got the Divx let’s say we want to style all the dibs are all the eight tags and a dip and I say div greater than a. What’s that specificity?

Well the specificities of the selector.

Combinator.

It doesn’t.

oddly enough Combinator is do not affect specificity at all even though you you would think they would but they do not.

two. Yes. Good job. Okay let’s make it harder now let’s say uh let’s say we want div but we want the only the first child. A we don’t want to style Althea tags. We just want to style the first one. Okay. Okay. So give a colon first child.

Yes, I guess 0012. So in that

So yeah, we’ve got to selectors here that will target a link inside and did. But this third one that we just said will override the one we just did because yes, now its specificity has gone up. Okay now we’re gonna get hard just give me a doozy here. I know. Okay, so follow along with me. Okay. Body live. Mhm Hash main

a colon, not colon visited. Okay. Dot first.

Maine under the space. Now keep in mind, space is a comparator. I’m sorry. Uh Combinator and commentators do not affect specificity.

Davis I. D. Made

but it would still have the exact same specificity if I put a space in there and said div space cash main specificity is still the exact same even though I have technically added a layer of depth in the dom selector that way.

The idea

Yes. I tried to trip you up. I tried to make you think that was something else.

0123 That is very good. I have trained you well. You will be a front end developer yet. Yes.

colon. Not does not count. Yes. Right. I tried to make it complex. So that’s how this works. That’s that’s the process that you go through there are we will have in the show notes a link to like if you want to see this in action, there is a colour, syntax highlighted specificity calculator. So you can type in your selector into their deal and see what the calculation of it is. Cool.

So you can test yourself on, it takes some selectors you’ve written, write down what you think the specificity on them is and then plug him into that tool and see if it matches. And then this all comes back to how you know, how do you make sure you’re writing CSS? Because the other thing is there’s no reason to write overly specific CSS as long as you are properly styling things that are descendants of other things.

One thing this gets into, we didn’t talk about it a lot because it doesn’t affect specificity is inheritance, but only certain CSS properties inherit frequently. That’s things like font size, color, font face, but not spatial things like padding and margin and borders for instance,

rule. Yeah, that’s when you see this gets into like a deeper talk about CSS and when you see auto completes that you’re typing in something like color colon. And one of the first options is like inherit or in this show or unset. Like there’s all these other like CSS properties, you can apply that. What these things do is they sort of, they deal with specificity because they will reset things to different states based on what you’ve selected uh or inherit.

Like if you’re inheriting something you’re saying, I want the value for this that my parent has. Uh And so like specificity is certainly involved in it, but it doesn’t directly impacted. That’s more just knowing your CSS, selectors, attributes and properties, right? So I hope that was helpful. I hope that that like explains a little bit about how specificity works and how it affects your CSS.

Um do check out the articles, there’s, we’ll have a couple of indian docks that explain this in really good detail. They will list out like when you get into pseudo classes and pseudo elements, there are lists of those so you can see exactly which ones are which and how then they would affect your stuff. And then definitely check out the specificity calculator um and check out the articles over at CSS tricks and sliced jack that will have linked as well. Yeah. Yeah.

I hope this was helpful. I hope you learned a little bit between either the specificity stuff or the accessibility overlay stuff. Normally we would have, this is like a warmer topic than the whole topic. But as I went into this I thought no this is going to be a two for like you’re going to get a double bang of different topics in this episode. So um I hope that was helpful.

Let us know your experiences with um whether it’s successfully overlays or accessibility in general and how you approach, you know, avoiding the need for them or how you may be tackled the subject if it’s come up at your organization and they said hey we want to deal, we want to go get this tool and you said please don’t, I would love to hear how you did that and let us know how you work on CSS and how you’ve dealt with the specificity and what your approach is, making sure you don’t overload your specificity

podcast

and don’t get like overwhelmed by things like specificity and it sounds like it’s a lot of math but it really isn’t. It’s just counting your elements. We lean really hard on the cascade part of things and the inheritance model of CSS but not as much on that specificity piece except when we are staring at the damn inspector. Trying to figure out why is my color not changing on this element that I want to edit?

forward. It’s easy to know like the abstract part that I. D. S are more specific than classes are more specific than elements. It’s when you really get these like hybrid compound selectors where these things are mashed up, that’s where it starts to get hairy when you run into these problems of stuff not overriding properly.

Uh So I hope that that’s helpful and I hope that you take some time to learn because it’s one of those things when you start to realize how the technology actually works it makes you better at using that technology.

So if there’s anything I can leave you with, I hope that at the end of the day that you think about this, you think about the accessibility overlays and realize that all these problems we talked about especially with the overlays can be solved by so many different approaches whether that’s dealing with CSS in the right way.

Thinking about the way you’re articulating those selectors and that code, Working with users doing your user research and making sure you keep your personas close and your users closer. Bye bye.