Skip to content

Instantly share code, notes, and snippets.

@matatk

matatk/h.css

Forked from jonathantneal/h.css
Last active August 29, 2015 14:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save matatk/c2104358b3365366a5d4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save matatk/c2104358b3365366a5d4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. matatk renamed this gist Jul 31, 2014. 1 changed file with 0 additions and 0 deletions.
    0 test.html → index.html
    View file
    File renamed without changes.
  2. matatk revised this gist Jul 31, 2014. 1 changed file with 0 additions and 4 deletions.
    4 changes: 0 additions & 4 deletions test.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,10 +12,6 @@
    <p><strong>code:</strong></p>
    <pre><code>&lt;h&gt;Ramones: Hey! Ho! Let's Go&lt;/h&gt;</code></pre>
    </div>
    <div class="info">
    <p>This page uses the <strong>recommended, stand-alone</strong> version of <code>&lt;h&gt;</code>. You should use this if: you are working in a HTML5 environment; all your sectioning is done via HTML5 sectioning elements and JavaScript will be available.</p>
    <p>If any of these conditions are not met, we suggest you use the <a href="demo-fallback.html">fallback version</a>, which extends <code>&lt;h1&gt;</code> instead. More information can be found in the <a href="https://github.com/ThePacielloGroup/h#h">README</a>.</p>
    </div>
    <h>Heading text level 1</h>
    <section><h>Heading text level 2</h>
    <section><h>Heading text level 3</h>
  3. matatk revised this gist Jul 31, 2014. 1 changed file with 45 additions and 0 deletions.
    45 changes: 45 additions & 0 deletions test.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>h Demo</title>
    <script src="h.js"></script>
    <link rel="stylesheet" href="h.css">
    </head>
    <body unresolved>
    <h>Ramones: Hey! Ho! Let's Go</h>
    <div class="excode">
    <p><strong>code:</strong></p>
    <pre><code>&lt;h&gt;Ramones: Hey! Ho! Let's Go&lt;/h&gt;</code></pre>
    </div>
    <div class="info">
    <p>This page uses the <strong>recommended, stand-alone</strong> version of <code>&lt;h&gt;</code>. You should use this if: you are working in a HTML5 environment; all your sectioning is done via HTML5 sectioning elements and JavaScript will be available.</p>
    <p>If any of these conditions are not met, we suggest you use the <a href="demo-fallback.html">fallback version</a>, which extends <code>&lt;h1&gt;</code> instead. More information can be found in the <a href="https://github.com/ThePacielloGroup/h#h">README</a>.</p>
    </div>
    <h>Heading text level 1</h>
    <section><h>Heading text level 2</h>
    <section><h>Heading text level 3</h>
    <section><h>Heading text level 4</h>
    <section><h>Heading text level 5</h>
    <section><h>Heading text level 6</h>
    </section>
    </section>
    </section>
    </section>
    </section>
    <div class="excode">
    <p><strong>code:</strong></p>
    <pre><code>&lt;h&gt;Heading text level 1&lt;/h&gt;
    &lt;section&gt;&lt;h&gt;Heading text level 2&lt;/h&gt;
    &lt;section&gt;&lt;h&gt;Heading text level 3&lt;/h&gt;
    &lt;section&gt;&lt;h&gt;Heading text level 4&lt;/h&gt;
    &lt;section&gt;&lt;h&gt;Heading text level 5&lt;/h&gt;
    &lt;section&gt;&lt;h&gt;Heading text level 6&lt;/h&gt;
    &lt;/section&gt;
    &lt;/section&gt;
    &lt;/section&gt;
    &lt;/section&gt;
    &lt;/section&gt;</code></pre>
    </div>
    </body>
    </html>
  4. @jonathantneal jonathantneal revised this gist Jun 19, 2014. 1 changed file with 33 additions and 0 deletions.
    33 changes: 33 additions & 0 deletions h.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    h {
    display: block;
    }

    h6, h {
    font-size: 0.67em;
    margin: 2.33em 0;
    }

    h5, h[level="5"] {
    font-size: 0.83em;
    margin: 1.67em 0;
    }

    h4, h[level="4"] {
    font-size: 1em;
    margin: 1.33em 0;
    }

    h3, h[level="3"] {
    font-size: 1.17em;
    margin: 1em 0;
    }

    h2, h[level="2"] {
    font-size: 1.5em;
    margin: 0.83em 0;
    }

    h1, h[level="1"] {
    font-size: 2em;
    margin: 0.67em 0;
    }
  5. @jonathantneal jonathantneal revised this gist Jun 19, 2014. 2 changed files with 56 additions and 6 deletions.
    15 changes: 9 additions & 6 deletions h.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,16 +12,19 @@
    }
    }

    // define heading role
    node.setAttribute('role', 'heading');
    // IE9-11 DOMSubtreeModified needs a timeout
    setTimeout(function () {
    // define heading role
    node.setAttribute('role', 'heading');

    // define heading level
    node.setAttribute('level', level);
    node.setAttribute('aria-level', level);
    // define heading level
    node.setAttribute('level', level);
    node.setAttribute('aria-level', level);
    });
    }

    function defineHeadings() {
    Array.prototype.forEach.call(document.querySelectorAll(nodeName), defineHeading);
    Array.prototype.forEach.call(document.getElementsByTagName(nodeName), defineHeading);
    }

    // if heading is an unknown element
    47 changes: 47 additions & 0 deletions h.legacy.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    (function (nodeName, sectionRE) {
    function defineHeading(node) {
    // initialize heading level as 1
    var level = 1, parent = node;

    // while parent element exists
    while (parent = parent.parentElement) {
    // if parent element is a sectioning element
    if (sectionRE.test(parent.nodeName)) {
    // increase heading level
    ++level;
    }
    }

    // IE9-11 DOMSubtreeModified needs a timeout
    setTimeout(function () {
    // define heading role
    node.setAttribute('role', 'heading');

    // define heading level
    node.setAttribute('level', level);
    node.setAttribute('aria-level', level);
    });
    }

    function defineHeadings() {
    for (var all = document.getElementsByTagName(nodeName), index = 0; all[index]; ++index) {
    defineHeading(all[index]);
    }
    }

    // if heading is an unknown element
    if (document.addEventListener) {
    if (document.createElement(nodeName) instanceof HTMLUnknownElement) {
    defineHeadings();

    document.addEventListener('DOMContentLoaded', defineHeadings);
    document.addEventListener('DOMSubtreeModified', defineHeadings);
    }
    }
    // or this is Internet Explorer
    else {
    document.createElement(nodeName);
    document.attachEvent('onreadystatechange', defineHeadings);
    document.attachEvent('onpropertychange', defineHeadings);
    }
    })('h', /^(article|aside|nav|section)$/i);
  6. @jonathantneal jonathantneal created this gist Jun 19, 2014.
    34 changes: 34 additions & 0 deletions h.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    (function (nodeName, sectionRE) {
    function defineHeading(node) {
    // initialize heading level as 1
    var level = 1, parent = node;

    // while parent element exists
    while (parent = parent.parentElement) {
    // if parent element is a sectioning element
    if (sectionRE.test(parent.nodeName)) {
    // increase heading level
    ++level;
    }
    }

    // define heading role
    node.setAttribute('role', 'heading');

    // define heading level
    node.setAttribute('level', level);
    node.setAttribute('aria-level', level);
    }

    function defineHeadings() {
    Array.prototype.forEach.call(document.querySelectorAll(nodeName), defineHeading);
    }

    // if heading is an unknown element
    if (document.createElement(nodeName) instanceof HTMLUnknownElement) {
    defineHeadings();

    document.addEventListener('DOMContentLoaded', defineHeadings);
    document.addEventListener('DOMSubtreeModified', defineHeadings);
    }
    })('h', /^(article|aside|nav|section)$/i);