hfill

2.0.0 • Public • Published

hfill DOM Logo

NPM Version Build Status Tweet About This

hfill lets you use the speculative h element in HTML.

The h element would allow web authors to provide contextual headings without specifying an explicit level.

<body>
  <h>This is a top level heading</h>
  <p>....</p>
  <section>
    <h>This is a second-level heading</h>
    <p>....</p>
    <section>
      <h>This is a third-level heading</h>
      <p>....</p>
    </section>
  </section>
  <section>
    <p>....</p>
    <h>This is another second-level heading</h>
    <p>....</p>
  </section>
</body>

Try it right now using CodePen


hfill is a speculative polyfill which emulates a proposed feature of the web platform. Therefore, it should only be used in real production situations as x-h and not h, as the later would otherwise risk creating problems for the development of the Web if it became widely used prior to standardization and implementation.


Usage

Add hfill to your build tool:

npm install hfill --save-dev

Import hfill as a resource.

import hfill from 'hfill';

observe

The observe method watches contextual heading elements.

hfill.observe(
  document.documentElement // where contextual headings will be observed
  'x-h' // tag name of contextual headings
);

The observe method will assign a role of heading to the contextual heading, if it does not already have one. It will then assign an aria-level corresponding to the heading’s outline depth, which is its number of article, aside, nav, or section ancestors.

Example:

<body>
  <x-h role="heading" aria-level="1">This is a top level heading</x-h>
  <p>....</p>
  <section>
    <x-h role="heading" aria-level="2">This is a second-level heading</x-h>
    <p>....</p>
    <section>
      <x-h role="heading" aria-level="3">This is a third-level heading</x-h>
      <p>....</p>
    </section>
  </section>
</body>

style

The style method adds styles for contextual heading elements.

hfill.style(
  document.head, // where <style> will be appended
  'x-h' // tag name of contextual headings
  'font-style:italic' // optional styles (otherwise display:block;font-weight:bold)
  ['2em', '1.5em', '1em'] // optional heading sizes (otherwise 2em,1.5em,1.17em,1em,.83em,.67em)
);

Example:

<style id="hfill-style">x-h{display:block;font-weight:bold}/* ... level-based styles */</style> 

Level-based styles only use elements to maintain minimal CSS specificity.

x-h {
  font-size: 2em;
}
 
article x-haside x-hnav x-hsection x-h {
  font-size: 1.5em;
}
 
article article x-harticle aside x-harticle nav x-harticle section x-h,
aside article x-haside aside x-haside nav x-haside section x-h,
nav article x-hnav aside x-hnav nav x-hnav section x-h,
section article x-hsection aside x-hsection nav x-hsection section x-h {
  font-size: 1.17em;
}
 
/* etc. */

hfill is 665 bytes when ES5 transpiled, minified, and gzipped.

Package Sidebar

Install

npm i hfill

Weekly Downloads

2

Version

2.0.0

License

CC0-1.0

Last publish

Collaborators

  • jonathantneal