Creative Blogging Tips | SeeBeeTee: HTML Imports and CSS Variables Lands

The wait is finally over, HTML Imports supported by Chrome 36 and Opera 23 (without enabling any flag) and CSS Variables supported by Firefox 31 (without enabling any flag).
- Looks like Firefox implementing the HTML Imports. (Embedded tweet)

HTML Imports are in @FirefoxNightly! about:config > dom.webcomponents.enabled http://t.co/lbRGegTfvz h/t @wilsonpage pic.twitter.com/er1sZ5u5XP
— Addy Osmani (@addyosmani) July 4, 2014

- I've made a demo which can be used for an example for HTML Imports
Click to see the Demo
- I've written a post in SeeBeeTee about CSS Variables which you can find here.
- HTML Imports are really awesome in my opinion.
- Actually I don't know(till now) how to use the HTML Imports Polyfill but I'm giving you the link to Polyfill which might come handy... Polyfill for HTML Imports from Polymer.

How to Get Started with HTML Imports?

1. First you've to import it with the <link> tag. How?

<link rel="import" href="import.html" onload="handleLoad(event)" onerror="handleError(event)">

# onload and onerror are just for logging the status of the page. (If the import page has been loaded or not.)
I've wrapped my import page into <template> tag to clone it in a Javascript Variable.
2. You've to use Javascript to use the imported page.

// Thanks to http://www.html5rocks.com/en/tutorials/webcomponents/imports/
var link = document.querySelector('link[rel="import"]');

// Clone the <template> in the import.
var template = link.import.querySelector('template');
var clone = document.importNode(template.content, true);

document.querySelector('#getting-started-info').appendChild(clone);

function handleLoad(e) {
  console.log('Loaded import: ' + e.target.href);
}
function handleError(e) {
  console.log('Error loading import: ' + e.target.href);
}

# Variables: link used to select the link, template used to select the <template> from the imported page and clone for cloning the <template>'s content.
# Then we're just appending the <template>'s Content to the id getting-started-info of <div>.
# There are two functions. handleLoad will log that page which is imported has been loaded, And handleError will log that page has not been loaded (means some error).
3. Then we're done.
- This code is from my demo, Therefore the link will be which I've given above... Again: Demo page
- So this will be working if you're using the browser which supports HTML Imports.