Snippets

Style List Markers in CSS

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.

CSS

/* 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.

CSS

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
li {
  counter-increment: my-awesome-counter;
}
li::before {
  content: counter(my-awesome-counter);
 
  /* Style away! */
 
}
Source link
Style List Markers in CSS | CSS-Tricks
Tags
Lists
CSS
Web standards
CSS - Counters
CSS - Generated content

Annotation is now a web standard

Many have tried over the years to bring us web annotations. The lack of standards has been one of the key things holding these efforts back– a need we highlighted in the first of our 12 original principles back in 2013 and have been working towards ever since.

Yesterday, on February 23, things took a giant leap forward when the W3C, the standards body for the Web, standardized annotation.

Twenty four years after Marc Andreessen first built collaborative annotation into Mosaic and tested it on a few “guinea pigs” before turning it off, annotations have finally become first-class citizens of the web.

From the W3C Web Annotation co-chairs, Rob Sanderson and Tim Cole:

“Many websites already allow comments, but current […] systems rely on unique, usually proprietary technologies chosen and provided by publishers. Notes cannot be shared easily across the Web and comments about a Web page can only be saved and viewed via a single website. Readers cannot select their own tools, choose their own service providers or bring their own communities.”

 

So what exactly does this mean for you?

Comment widgets may soon become a thing of the past.

The W3C standards (called Recommendations) are a key milestone towards a future in which all pages could support rich layers of conversation without requiring any action by their publishers—because that capability can be built into the browser itself and be available as a native feature, just like web search. The shared vision is that conversations will be able happen anywhere on the Web, or even on documents in native apps, and inline instead of below-the fold, in a federated, standards-based way.

Source link
Annotation is now a web standard – Hypothesis
Tags
Comments
Web Annotations
Web standards
IndieWeb

Send messages when you're back online with Service Workers and Background Sync

This example of using background sync looks like it’s specific to Twilio, but the breakdown of steps is broad enough to apply to many situations:

On the page we need to:

  1. Register a Service Worker
  2. Intercept the “submit” event for our message form
  3. Place the message details into IndexedDB, an in browser database
  4. Register the Service Worker to receive a “sync” event

Then, in the Service Worker we need to:

  1. Listen for sync events
  2. When a sync event is received, retrieve the messages from IndexedDB
  3. For each message, send a request to our server to send the message
  4. If the message is sent successfully, then remove the message from IndexedDB

And that’s it.

Source link
https://adactio.com/links/11931
Tags
Service Workers
Background Sync