X-Tag Web Components

By  on  

One of the awesome parts at working at Mozilla is being able to see and use projects from fellow engineers before they are shared with the world. One such effort comes from Daniel Buchner: X-Tag. X-Tag is a cross-browser web component library that uses custom tags and a bit of JavaScript to create components we've been creating for years:

There are even a few advanced components like:

Each piece of these components is completely styleable, allowing for the most flexible components possible. Let's have a quick look at how these components are created!

X-Tag Setup

Regardless of which X-Tag component you'd like to use, you must include the main x-tag.js script. For every component you'd like to use, you'll need to include it's Javascript and CSS file:

<script type="text/javascript" src="x-tag/x-tag.js"></script>

<!-- Accordion -->
<link rel="stylesheet" type="text/css" href="x-tag/elements/accordion/accordion.css" />
<script type="text/javascript" src="x-tag/elements/accordion/accordion.js"></script>

Using X-Tag Components

With the necessary JavaScript files in place, you can now use the X-Tag components!

<!-- create an accordion -->
<h3>Accordion</h3>
<x-accordion id="accordion">
	<x-toggler selected="true">Toggler 1</x-toggler>
	<div>
		This is the content.
	</div>
	<x-toggler>Toggler 2</x-toggler>
	<div>
		This is the content 2.
	</div>
	<x-toggler>Toggler 3</x-toggler>
	<div>
		This is the content 2.
	</div>
</x-accordion>

<!-- create a tab box -->
<h3>TabBox</h3>
<x-tabbox id="tabbox">
	<x-tabs>
		<x-tab selected="true">Tab 1</x-tab>
		<x-tab>Tab 2</x-tab>
		<x-tab>Tab 3</x-tab>
	</x-tabs>
	
	<x-tabpanels>
		<x-tabpanel selected="true">
			<p>
				This is tab content 1
			</p>
		</x-tabpanel>
		<x-tabpanel>
			<p>
				This is tab content 2
			</p>
		</x-tabpanel>
		<x-tabpanel>
			<p>
				This is tab content 3
			</p>
		</x-tabpanel>
	</x-tabpanels>
</x-tabbox>

<!-- create a map -->
<x-map data-key="Cloudmade/OpenStreetMaps-API-Key"></x-map>

So why X-Tag? Take a step back and think about one of the oldest JavaScript tricks in the book: INPUT placeholders. It took almost a decade to get that basic functionality into the spec. Think about how little has been done in the way of FORM child enhancements. X-Tag is a first step in pushing for native component support in browsers.

Browser Support

X-Tag supports all A-grade browsers. IE9 and Opera support is almost complete, IE8 support will be following shortly.

What Do You Think?

I love the X-Tag library. Simple, effective, customizable. There are many libraries which accomplish the components of X-Tag, but this approach is much simpler, and (hopefully) a step toward native support. I wouldn't mind seeing a sibling theme library though. What do you think of X-Tag? Have any ideas for more components that should live within X-Tag?

Recent Features

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Discussion

  1. Nice blog post. Hey Dave, typo in the last line:

  2. Alex

    The navigation x-tag is kind of cool.
    It seems very similar with the one of xenforo :)

  3. Within the next week or so, X-Tag will support IE9, many back versions of Opera (mobile too!), and very likely IE8. Stay tuned!

  4. Jesus Bejarano

    Amazing this will definetly will make a standart

  5. The navigation x-tag is kind of cool.Nice blog post

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!