Articles by

Geoff Graham

Read, write, coffee, web, repeat.

:future

: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

Avatar of Geoff Graham
Geoff Graham on

:past

: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 …

Avatar of Geoff Graham
Geoff Graham on

:current

: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 …

Avatar of Geoff Graham
Geoff Graham on

border-boundary

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 …

Avatar of Geoff Graham
Geoff Graham on (Updated on )

caret

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;
  
Avatar of Geoff Graham
Geoff Graham on