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
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • 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
    Fullscreen API

    As we move toward more true web applications, our JavaScript APIs are doing their best to keep up.  One very simple but useful new JavaScript API is the Fullscreen API.  The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...

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!