Popular posts

Tommy Hodgins

CSS & Element Queries

Mar 5, 2018

I think I'd do something like #2. I understand the virtues of using createElement() for a few, small elements that don't contain many elements, but by the time you get down to the level of a passage of text with links, <strong> tags and other markup - creating each element that way gets a little overwhelming.

I've been having a ton of fun using JS template literals for composing CSS stylesheets, and it makes it really nice to extend with JS functions that return strings.

Recently I was playing around with some JS helper functions that might help me compose HTML, but I don't really know when or where I'd use these - so for now they're just some explorations. I was trying to see if I could create some simple functions for writing HTML and putting some of my understanding about how sites were built into JS functions. I'm sure people have been doing stuff like this with PHP on the backend forever too :P

First we have our generic HTML tag assembler. This accepts a tagName, some content which can be a string or a function that returns a string ;), as well as optionally some attributes if we want to apply those to the element as well.

All HTML tags have closing tags except for 'void' tags, so rather than trying to whitelist all valid HTML tags we don't even need to know or care what those are. All we really need to know is the much shorter list of 'void' tags that don't have closing tags and if we notice our tagName is one of those we don't close it.

// HTML Tag Generator
function html(tagName, contentString, attributeObject) {

  tagName = tagName || 'div'
  contentString = contentString || ''

  let voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']

  let attr = attributeObject
             ? Object.entries(attributeObject).map(item => `${item[0]}='${item[1]}'`)
             : []
             .join(' ')

  return voidTags.includes(tagName.toLowerCase())
         ? `<${tagName} ${attr}>`
         : `<${tagName} ${attr}>${contentString}</${tagName}>`

}

Now we can create elements with code like this:

html('div', 'Hello World')

Now, if we combine our html() function with other functions it becomes easy to template certain types of things: wrappers, wrapped lists, sets of siblings, complex sets of HTML tags like video embeds, link helpers, etc.

Here's a little function that takes an array of content and creates 1 tag for each content item:

// Siblings helper
function siblings(tagName, contentArray) {

  return contentArray
           .map(tag => Array.isArray(tag)
                       ? html(tagName, tag[0], tag[1])
                       : html(tagName, tag)
           ).join('')

}

Now if we wanted to create a set of <li> elements with the texts "one", "two", and "three" and wrap that in a <ul>, we can write it like this:

html ('ul', siblings('li', ['one', 'two', 'three']))

Here's a link helper that will accept as much content as you have and return an <a> element, it wants url at a minimum, it would be nice if you also gave it link text, and if you also supply a title it will be very happy to use that as well:

// Link helper
function link(url, text, title) {

  url = url || '#'
  text = text || url
  title = title || text

  return `<a href="${url}" title="${title}">${text}</a>`

}

Now I'm not sure why I returned a template literal here rather than something like return html('a', …), but it works and it's simple. If we give it examples like this:

link()
link('staticresource.com/&)
link('staticresource.com/& 'StaticResource')
link('staticresource.com/& 'StaticResource', 'Visit StaticResource')

We will get this as the output HTML:

<a href="#" title="#">#</a>
<a href="staticresource.com/" title="staticresource.com/">https://staticresour…
<a href="staticresource.com/" title="StaticResource">StaticResource</a>
<a href="staticresource.com/" title="Visit StaticResource">StaticResource</a>

Lastly, here's a fun one - a responsive video embed container that outputs a wrapped <iframe> and the styles the wrapper and iframe need in order to resize and maintain its aspect ratio:

// Responsive Embed Helper
function embed(url, width, height) {

  url = url || '#'
  width = width || 560
  height = height || 315

  return html('div',
           html('iframe','',
             {
               src: url,
               width: width,
               height: height,
               frameborder: 0,
               style: `
                 position: absolute;
                 width: 100%;
                 height: 100%;
                 top: 50%;
                 left: 50%;
                 transform: translateX(-50%) translateY(-50%);
               `
             }
           ),
           {
             style: `
               position: relative;
               width: 100%;
               padding-bottom: calc(100% / (${width} / ${height}));
             `
           }
         )

}

Here I did make use of html() to return the HTML as a string and you can see how it let me store my CSS as template strings as well. Let's give it a little test with this JS:

embed('youtube.com/embed/LsoLEjrDogU&)

And this is the HTML we get back:

<div style=" position: relative; width: 100%; padding-bottom: calc(100% / (560/315));">
  <iframe src="youtube.com/embed/LsoLEjrDogU" width="560" height="315" frameborder="0" style="position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></iframe>
</div>

Anyway, I am not sure if that helps, or what this might be good for but I had a lot of fun passing functions as arguments and trying to figure out if I could encapsulate some of my HTML-building understanding into code logic that could be run.

Some projects you might want to have a peek at:

HyperScript: github.com/hyperhype/hyperscript

Seems similar in some ways - creating HTML from JS functions, but the way the arguments get passed in is a lot more verbose than the functions I came up with, it seems like it would be a hassle to write that much JS instead of just HTML.

Elm-lang/HTML: github.com/elm-lang/html

This is the HTML-creating part of the Elm language. It seems to 'do too much work' as well, like they try to whitelist all valid HTML tags: github.com/elm-lang/html/blob/master/src/Html.elm

lit-html: github.com/Polymer/lit-html

This project seems interesting, and they're all about using template literals in JS for extending HTML templating. I think these people will discover and develop some really useful techniques in this area!

Can't say I'm wild about all that string processing, but again I'm not one for really using innerHTML -- certainly not that much.

Some notes though:

Your style doesn't belong in the scripting. That's the stylesheet's job. :D
Your object declarations are invalid, there are no static constants named absolute or 100% -- probably a typo on a quick post like this, you forgot your quotes!
If it's 100% width and height, why in blazes are you pushing it around with translate and absolute? Did you mean to set max-width and max-height so it is forced to shrink to fit the DIV?

My elementals.js library would be capable of this in a very similar fashion, except it would use the DOM to do it instead of innerHTML and string processing.

The script would be something like this:

function embed(url, width, height) {

    var style = {
        "width" : (width || 560) + 'px';
        "height" : (height || 315) + 'px';
    }

    return _.make('div.frameContainer', {
        children : [
            [ 'iframe', {
                src : url || '#',
                frameborder : 0,
                "style" : style
            } ]
        ],
        "style" : style
    ]);
}

... and then the rest I'd handle from the stylesheet:

.frameContainer,
.frameContainer iframe {
    max-width:100%;
    max-height:100%;
}

.frameContainer iframe {
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}

Important since the style you are applying may not be relevant for non screen-media targets -- part of why using Element.style is something that should be avoided on 'content' elements.

NOT that what you have there is how I'd be styling a video container (given the lack of aspect handling), but to each their own.

I know the padding hack, you set the aspect ratio on the DIV. You didn't set the DIV. (you also didn't set it to position:relative)... oh wait, you set that at the bottom. Weird I use the same general format for building on the DOM and still didn't see it. Thought that was being set on the iframe too; and you used calc which I can't since I still have to support legacy browsers for clients. To auto-calc I'd have to set it on the fly and trap window.resize, which is why usually for this I'd just set a class and have the variable styles static in my monolithic stylesheet, so I'm not wasting time setting values from JavaScript that might not apply to all media targets. People are WAY to easily... how to put this... duped into using Element.style when they don't need to. I mean the "big four" usually has you covered, and realistically if you're encountering anything other than 4:3 or 16:9 these days, something's wrong or you're dealing with highly specialized video.

AGAIN doing that in the external stylesheet since that type of information may be gibberish to other media targets. Same reason failing to set media="" on your <link> is as big an epic fail at web development as media="all". Also why I think whatWG's / W3C's removal of projection and TV and making the presence of unknown media targets a warning level event in validation is bullshit that undoes much of why the media attribute EVEN EXISTS!!!

ALSO why so many scripts these days go bits up face down for users with accessibility needs. If you actually are focused on accessibility and usability there's a LOT of things out there right now you just can't use... like calc... like adding content to the markup using JavaScript with no graceful degradation fallback. Case in point if this were a gallery of videos, I'd have the anchor pointing directly at the video link then intercept the anchors from the scripting... scripting off the link to the video launches normally.

I also missed the opening ' for your passing the style as markup -- something I wouldn't be doing and be passing as an object to set it on the new element, but that's because I'd be creating the element instead of dragging the browser performance down (and risking security holes) with innerHTML.

I think it's mostly just that I'm a "say no to innerHTML" kind of developer, and have a different focus than the current hot and trendy "just slop JavaScript all over the place who cares how many users it pisses off" that's all the rage these days.

Search Hashnode