HTML test cases

This is handy—an up-to-date list of tests run on form fields with different combinations of screen readers and browsers.

Tagged with

Related links

Fine-tuning Text Inputs

Garrett talks through some handy HTML attributes: spellcheck, autofocus, autocapitalize, autocomplete, and autocorrect:

While they feel like small details, when we set these attributes on inputs, we streamline things for visitors while also guiding the browser on when it should just get out of the way.

Tagged with

A microdata enhanced HTML Webcomponent for Leaflet | k-nut — Blog

Here’s a nice HTML web component that uses structured data in the markup to populate a Leaflet map.

Personally I’d probably use microformats rather than microdata, but the princple is the same: progressive enhancement from plain old HTML to an interactive map.

Tagged with

drab

This looks like a handy collection of HTML web components for common interface patterns.

drab does not use the shadow DOM, so you can style content within these elements as usual with CSS.

Tagged with

HTML Web Components on the Server Are Great | Scott Jehl, Web Designer/Developer

Scott has written a perfect description of HTML web components:

They are custom elements that

  1. are not empty, and instead contain functional HTML from the start,
  2. receive some amount of progressive enhancement using the Web Components JavaScript lifecycle, and
  3. do not rely on that JavaScript to run for their basic content or functionality.

Tagged with

Light-DOM-Only Web Components are Sweet – Frontend Masters Boost

The main reason I’m so hot on Light DOM is that I find the styling story of Web Components using Shadow DOM annoying.

Tagged with

Related posts

Displaying HTML web components

You might want to use `display: contents` …maybe.

Pickin’ dates on iOS

Mobile Safari doesn’t support the min and max attributes on date inputs.

button invoketarget=”share”

An alternate route to a declarative version of the Web Share API.

Lost in calculation

A lazy option for responsive images is at hand.

HTML web components

Don’t replace. Augment.