Articles by Chris Coyier

Say you want an element to be in one state for 9 seconds, and in another state for 1 second, on a loop.

No tweening between the state, just a straight swap.

(more…)

It's a perfectly reasonable to want to style the marker of list items. You know: blue bullets with black text in an unordered list. Or red counters with knockout white numbers in an ordered list.

There is a working draft spec that defines a ::marker pseudo-element that would give us this control.

/* Not supported anywhere; subject to change */
li::marker {
  color: blue;
}

It's possible to do this styling now, though, thanks to CSS counters. The trick is to remove the list-style, then apply the markers through pseudo-element counters.

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
li {
  counter-increment: my-awesome-counter;
}
li::before {
  content: counter(my-awesome-counter);

  /* Style away! */

}

See the Pen Styled List Counters by Chris Coyier (@chriscoyier) on CodePen.

A new interview series from Preethi Kasireddy and Vivian Cromwell, focusing on "how developer products are made". I was honored to be lucky number three, in which I overshare about CodePen.

Adobe explaining:

OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”.

Support so far: Firefox 26+, Edge 38+

(more…)

It wasn't that long ago where you couldn't programmatically copy text to the clipboard from the web without using Flash. But it's getting pretty well supported these days. IE 10+, Chrome 43+, Firefox 41+, and Opera 29+, says Matt Gaunt in writing about it on Google's developer site.

Here's the example from that article:

See the Pen Copy Text with a Button (Google Example) by Chris Coyier (@chriscoyier) on CodePen.

That article says it's not supported in Safari, but it is as of Safari 10, which only dropped in September.

You don't need a library to do this stuff, as evidenced by the above demo. But, there is one: clipboard.js. It's only 3kb gzipped. The purpose is to give you a bit of a cleaner API to work with, like success and error events, and configuration through data-* attributes. Here's a demo of that:

See the Pen Simplest Possible Clipboard.js by Chris Coyier (@chriscoyier) on CodePen.

The SVG we know and love today is "SVG 1.1 2nd edition". SVG 2 is in Editor's Draft status at the W3C, and it's at serious risk of never getting past that, as it's charter may not be renewed before it reaches recommendation status.

(more…)