h element would allow web authors to provide contextual headings without
specifying an explicit level.
This is a top level heading....This is a second-level heading....This is a third-level heading........This is another second-level heading....
hfill is a speculative polyfill which emulates a proposed feature of the
web platform. Therefore, it should only be used in real production situations
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
Add hfill to your build tool:
npm install hfill --save-dev
Import hfill as a resource.
observe method watches contextual heading elements.
observe method will assign a
heading to the contextual
heading, if it does not already have one. It will then assign an
corresponding to the heading’s outline depth, which is its number of
This is a top level heading....This is a second-level heading....This is a third-level heading....
style method adds styles for contextual heading elements.
hfillstyledocumenthead // 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);
Level-based styles only use elements to maintain minimal CSS specificity.
/* etc. */
hfill is 665 bytes when ES5 transpiled, minified, and gzipped.