HTML5 Ninja Techniques – Minimal HTML Markup Needed For Text

icompile.eladkarako.com_use_minimal_textSo we want to add some text, and style it,
but wrapping with span requires too much text adding: opening and closing tags + class="..." or HTML5’s data-*, this all so we can later “find” the node using CSS-Rules or JavaScript and style the hell-out of it :)


The idea is later to find the item, using CSS or JavaScript, in a very efficient way,
as fast as I know, I’m the first one ever implemented using this technique.. and in production (isn’t it the idea of every product eventually..?).

.. you have to think out of the box for this crazy trick to be seen reasonable to you.. (and there goes the 4’th wall..).

  1. you want a self-closing tag but one that will show you some text..
    # first attempt: <img alt=hello/>
    skipping the \" is permitted !!

    this works since the src is not specified, so the ALT kicks-in..
    but you’ll get the native border around which you should disable using border=0 attribute..
    but its MORE TEXT, so no-go

  2. that pesky border (CSS border is a different one) is there because we use W3C’s official ALT attribute, but we can do better,
    joining some CSS’s content and attr() and putting the text in one of the attributes.

    the HTML is:

    <img x=hello>

    and the CSS is:

    img{
      content:attr(x);
      font-size:30pt;
      color:darkblue;
      border:none;
    }

    but it won’t work, since the img tag’s text-content does not mean anything (unlike other tags, the img tag is actually just like rendering stuff with JavaScript new Image())

    lets change to something quite different either the :before or :after “area”, which technically uses same, still minimal self-closing tag of img, but just as a placeholder.

    ooopss… apparently you can only see the img :before if you’ll still place an ALT=".." non-empty attribute,

    hmmm.. so its not optimal since we’ve already adding quite a lot of text, and it is becoming a bit more complex than necessary.

  3. we can do better, using CSS we can cheat and use content="..." and attr()

    which is technically not in the HTML markup, and CSS are far more optimized than HTML, also, loaded parallel and optionally CPU-accelerated. so we’re good here..

    icompile.eladkarako.com_i_lv_minimal
    this was the result (works really well..)
    first is the html markup: <t x=hello> now the CSS markup which you can include in a separate CSS file

    /* minimal */
    t[x]:before{
        content:attr(x);
    }
    
    /* optional styling - very specific and easy to use */
    t[x=hello]:before{
      font-size:30pt;
    }
    
    /* optional styling - for all "minimal text tags" */
    t[x]:before{
        margin:4px 4px 4px 4px;
        padding:4px 4px 4px 4px;
        color:darkblue;
        background-color:lightgray;
        border:1px solid purple;
    }
    

    here is a little fun with http://jsfiddle.net/nra1jwjo/

  4. Fun!