Articles by

Geoff Graham

Read, write, coffee, web, repeat.


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

(Updated on )


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 …

(Updated on )


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 CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box are calculated automatically as a ratio. It’s a little math-y, but the idea is that you can divide one value …

(Updated on )