:future is a CSS pseudo-selector we can use to style upcoming elements during media playback. Think subtitles in videos. We can use this to style subtitles that are coming up next to separate them visually from the currently displayed subtitle…
:past is a CSS pseudo-selector that matches elements that have passed along a timeline. Where you’ll see this come into play is largely with video subtitles created with WebVTT. When a subtitle is no longer the currently displayed text, it …
:current is a CSS pseudo-selector that matches an element or an ancestor of an element that’s currently in display. So, we can match items that have rendered on the screen like this:
:current(p, ul);…and that will select all currently …
One of the things I do when teaching beginning front-end development is ask students to describe what it’s like to read HTML. I give them pretty basic markup for a long-form article, and ask them to read it twice: first …
Bruce Lawson with the tip of the day, warning against the use of pointer-events: none on forms labels. We know that pointer-events is used to change how elements respond to click, tap, hover, and active states. But it apparently borks …
WordPress core is making the jump from jQuery 1.12.4 to jQuery 3.5.1! This is a big deal for lots of reasons — like modern features, better DX, and security improvements to name a few. Right now, the plan is to …
Look at that! The :focus-visible pseudo-selector is now supported in Firefox, as of version 85 which shipped yesterday. I had to rush over to the MDN Docs just to confirm, and yep, the :focus-visible page has been updated to …
The border-boundary property in CSS set constraints to the bounds of an element that affects how the element’s borders behave. It’s defined in the CSS Round Display Level 1 specification, which is currently in Working Draft status. That means things …
caret in CSS is a shorthand property that combines the caret-color and caret-shape properties into a single declaration. So, we get to write this:
.element {
caret: #ff7a18 underscore;
}…which is akin to writing this:
.element {
caret-color: #ff7a18;
The caret-shape property in CSS changes the shape of the text cursor inside editable elements that indicates a user is typing. It’s part of the CSS Basic User Interfaces Module Level 4, which is currently in Working Draft status.…
Back when I was 10, I remember my cousin visiting our house. He was (and still is) a cool kid, the kind who’d bring his own self-programmed chess game on a floppy disk. And his version of chess was …
