CSS In-Depth, v2 Link, Locations & User Action

[00:00:00]
>> Estelle Weyl: Okay, then we have link location and user actions. You didn't realize we have so many selectors did you? But these you know, you know link and visited, right? We were going to have in selectors level 4, where we could have how deep is the link. Which was gonna be local link, with local link N but that was removed.

[00:00:23] But any link is the same as link in visited, its basically just match any link. And you notice that active and hover is not there, right? Because those can be on any element, they're don't have to do with links, right. They're usually used on links, but they're good for buttons, and when it's comes to hover it could be anything on your page.

[00:00:50] So those your action uplink pseudo classes. And that has hover active focus, and then focus ring, and focus within. And then drop places, so these two have always been supported. Whenever you style active always do focus and activate at the same time. Because some people get to your page via mouse and other people get towards it with a keyboard.

[00:01:21] And so if I'm gonna tab, I can't tab right now cuz it's gonna go over to the next slide. But if I'm going to tab I wanna know where my tab goes. Even as a sighted user, when I'm mousing over something I wanna know where I am. If I'm tabbing along I wanna know where I am, I wanna see the progress, okay.

[00:01:45]
>> Estelle Weyl: Wow, how do I have two slides in a row that say almost the same thing? So then you can bring them together. So a, visited hover, which is when you hover over a visited link it can be a different style than when you hover over a non-visited link.

[00:01:59] Note that visited has limited styles, so you can't add all the styles to visited and that was for security reasons. It came out in Safari 4 or something like that. I remember when it came out, but it's been a long time and the reason was, you could actually basically ask the browser what the color is this link.

[00:02:19] And then know that the user had gone to Wells Fargo and might have a Wells Fargo account. So for security reasons, this start in very limited support and I think 2010, so that's been around for 7 years. Button, active and focus and never do this, I already said why, right?

[00:02:40] But same reason, never remove all styling. You can do outline none if you add lots of good styles to tell the user that this has focus. Cuz that blue ring is hideous, and you'll see there's a deck I have where the next button is an error in the corner, a triangle.

[00:03:00] And when you go over it, it's square, and it's hideous. But I did not get rid of the focus ring, or the outline, because I want people to know that they've actually clicked the thing. And here is an element, a list of elements, that can be active if you're interested.

[00:03:16] Let's click on that, open link in new window.
>> Estelle Weyl: Button inputs, links, or A's rather, areas, and links that have an href attribute. So in your header, that link if you're gonna block, show it, you can do that. Okay, drag and drop pseudo classes, we have drop, drop active, drop valid, there should be a parenthesis right after the valid right here, and drop invalid.

[00:03:48] Other pseudo classes, target, target's a really cool one. When you put a pound sign like right here, my current target of this page is Slide 63. The browser knows that it's Slide 63. If I had an ID on my slide that said Slide 63 I could actually use it, but I don't.

[00:04:09] But let's pretend I do, if I did, I could actually target that slide because it had the ID of 63, the slide 63. I could target that slide with special,
>> Estelle Weyl: Look and feel. I have a deck, and so I told you I would probably end up showing it to you, so I'm going to show it to you, estelle.github,

[00:04:35]
>> Estelle Weyl: Actually it's just called wtf.
>> Estelle Weyl: Okay, so here's a deck that works, and there is not a single line of JavaScript in this deck. And this one I actually did this way, so there's a bunch of check marks throughout the whole deck and I can actually go directly to shapes, alright.

[00:05:06] But I did this two different ways, and I'm just gonna go to tittle slide right here, it says, with target. So this one, when I do next, it says check box, awesome, right. That's how I made this have focus, it basically says, the current target of the page, make it visible.

[00:05:29] Doesn't matter what that target is, whatever the target of that page is, it's visible. So those are things you can do with check boxes, with basically using selectors, right. I'm selecting things on this page, and there's not a single line of JavaScript and the deck works. And the animation to make them come in has changed but originally, it actually even looked better, okay.

[00:05:55] So target, that's one thing you can do with target. So it's basically when you have an anchor tag and an anchor matches the ID, right. So my ID and the problem summary ID and you'll go to that page, part of that page so that's what it matches. So you can say the first line of a div element that is the current target, make it bold, something like that.

[00:06:24] So Chris Coyier came up with this one, which is here, nothing is selected. But when I select Tab 1, Tab 2, or Tab 3, Tab 2 or Tab 1.
>> Estelle Weyl: I don't know what happened to the CSS on this but I'm gonna open it in a new window here.

[00:06:49] Yeah, I somehow broke it, I have no clue how I broke it. I probably did a global search and replace for some CSS feature and broke everything, why not? Okay, so Tab 1, Tab 2 and Tab 3, how did I select this? This is basically says any link that is the direct child of a section that is not the target, make it grey, background color.

[00:07:14] 2 and 3 are currently not the target. So they were all white, I made these two grey. Then it says the a, that is the target, make sure the border bottom color is white because it actually had a border bottom of grey. Because you see all of this has a grey border around it, it was all four sides before.

[00:07:35] So these have all four sides, but I don't want it to be on all 4 sides. So just the a, that is the direct child of the section that is the current target of the page. So why did I say direct child?
>> Estelle Weyl: Because there's a div here, and I can have links in here, and I don't want them to change, right.

[00:08:01] So then it says that is the direct child of the current section target, given a z-index of negative one.
>> Estelle Weyl: And then the div that is the child of the section that is not the child given the z-index of negative two. So the negative one is in front of the negative two.

[00:08:23] And why negative numbers, because there might be stuff on the page that needs to be above it and I definitely didn't wanna mess with that. I definitely want the Z index negative two to be hidden, it will definitely always be hidden. So that's how that works, that's basically target.

[00:08:39] So this is Chris Coyier's magic, not mine. And this is kind of a weird one that you don't really, who knows if it has to do with, we don't have scopes CSS yet. But it was basically, if we where going to have scopes CSS, this would be useful.

[00:09:06] So just, put it out there so that you know it's in existence if it ever shows up. And then we have grid structural selectors that might be coming and we're gonna cover grids later on. But we should at some point be able to match based on the columns that they're in because right now in grid.

[00:09:30] The things will change locations and you want to stay in the first column but you don't know what's in the first column, so once supported that's what will do. Then we have Time dimensional, current, future and past. And I can't tell you anything about this because I don't know anything about it because I don't really work with video or audio.

[00:09:50] So I don't know if this works or not, but if you are working with video and audio check to see if this works. Playing and paused, again, I don't work with video so I never needed this but I wanted to put it out there that it might be there.