Nevertheless Published Mine
    Have ideas to improve npm?Join in the discussion! »

    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.

    Install

    npm i hfill

    DownloadsWeekly Downloads

    2

    Version

    2.0.0

    License

    CC0-1.0

    Last publish

    Collaborators

    • avatar