jQuery: creating Wikipedia links from acronyms

Writing about web standards, I usually got a bunch of acronyms that could be better used. How? By wrapping and turning them into Wikipedia links. Here's the jQuery code:

function wrapAcronymsWithLinks() {

    $('acronym').each(function() {

        var $acronym = $(this);
        var text = $acronym.text().toUpperCase();

        $acronym.wrap('<a href="http://en.wikipedia.org/wiki/' + text + '"></a>');

    });


}

Really simple.

jQuery: image resizing and containing

I'm currently restyling my main website which is full of wide screenshots and images that usually are larger than 600-700 pixels (or even more). Since my new template uses a central column whose width is set in percentages, it's a little bit hard to predict in advance if those images will actually overflow the overall width of their container.

A CSS solution is to add a class to each image that is larger than the aforementioned column, like so:

img.wide {
    width: 100%;
    display: block;
}

This solution works fine only when the intrinsic width of the image is equal to or greater than the width of its container. But since I'm using percentages, things get more complicated. So I decided to use jQuery:

function setImageWidth() {

    if($('img').size()) {
    
        $('img').not('a img').each(function() {
 
     var $img = $(this);
     var parentWidth = $img.parent().width();
     var imgWidth = $img.width();
     
     if(imgWidth >= parentWidth) {
     
         $img.addClass('wide');
  
     }
 
 
 });
    
    } else {
    
        return;
 
    }



}

The tricky part here concerns images inside hyperlinks. jQuery usually calculates the width of an element depending on whether if it's a block or inline element. For example, if you have a structure like this:

<div>
  <a><img/></a>
</div>

and the image is just a little small inline graphic (e.g. a '>' sign), then you will see the image just as big as the div element, because this ancestor is a block-level element. To use the above function, you should make sure that the link/parent that contains the image is actually a block-level element by checking if its display property is set to block. Otherwise, you can use this function as it is.

jQuery: associative arrays

Unlike PHP, JavaScript has no true notion of associative arrays. A quick-and-dirty way to get this kind of result is as follows:

var assocArray = new Array();
assocArray['CSS'] = 'A stylesheet language.';
assocArray['DOM'] = 'An interface for web documents.';
assocArray['HTML5'] = 'The future of HTML.';

A more elegant solution is to use object literals:

   
    var assocArrObj = {
    
        CSS: 'A stylesheet language.',
        DOM: 'An interface for web documents.',
        HTML5: 'The future of HTML.'
    
    
    };

jQuery allows us to iterate through this kind of objects with the $.each() method:


$(document).ready(function()
    
    $.each(assocArrObj, function(key) {
    
        alert(key + ' ' + assocArrObj[key]);
    
    });
    
    

});

The above code will alert each key followed by its value. As you can see, this is a more elegant way than the usual for...in loop.

CSS: differences between CSS 2.1 and CSS3

CSS 2.1 is still a work in progress, although this specification has been on the run for years. However, CSS3 is the natural evolution of CSS 2.1, providing several enhancements and improvements to the previous version, which include:

  1. New selectors for a better pattern matching

    CSS3 includes new attribute selectors, pseudo-classes and pseudo-elements which allow us to select an element based on the presence of string segments, element UI states and more. The major difference here is that now CSS3 pseudo-elements use a double colon instead of a single one. For example:

    h1:before {} /*CSS2.1*/
    h1::before {} /*CSS3*/
    
  2. Full XML namespace support

    CSS3 fully supports namespace selection through the @namespace media rule. Further, CSS3 now are able to select a full qualified XML element thanks to the syntax element|suffix.

  3. Layout enhancements

    CSS3 supports multiple background images, rounded borders, color transparencies, multi-column layouts, new text properties, box shadows, animations, transitions and more.

  4. Media queries

    CSS3 is now able to target specific styles to specific devices and under specific environment conditions through the improvements added to the @media at-rule.

  5. Print layout

    CSS3 controls print pagination better than CSS 2.1. Now we're able to specify headers, footers, footnotes, indexes and much more.

jQuery: using DOM methods and properties

All the jQuery's architecture is based on the concept of a wrapped set, that is, a chain of jQuery's selectors and methods starting with the '$' sign. Although this is really useful for chaining together methods and routines in a compact way, sometimes it's preferable to use DOM methods and properties instead. Why? Basically, DOM methods and properties are usually implemented in C/C++, which is considerably faster than jQuery's implementation. To use DOM methods and properties in jQuery you have to move away from the wrapped set. For example, the following code won't work:

$('#test').getElementsByTagName('p');
// you get undefined

This is due to the fact that you're still inside the jQuery's wrapped set. To get the desired result you have to write:

$('#test')[0].getElementsByTagName('p');
// you get a NodeList of p elements

There's also another way: using the jQuery's get() method, like so:

$('#test p').get();
// you get a NodeList of p elements

To summarize: both $(element)[0] and $(elements).get() allow us to exit from the wrapped set. But there's also another case: the difference between the $(this) and this notations. Example:

$('#test p').each(function() {

    alert($(this).attr('class'));  // inside the wrapped set
    alert(this.getAttribute('class'));  // outside the wrapped set

});

If you use the this keyword wrapped by the '$' sign, you're actually working inside the jQuery's wrapped set. Instead, if you use it without the '$' sign, you're outside the jQuery's wrapped set and you can use DOM methods and properties.

jQuery: turning a definition list into a table

There are two ways to display an HTML definition list as a table: using CSS floats or replacing the definition list with a real table using jQuery. Let's see the CSS way:

#deflist-1 {

    height: 100%;
    overflow: hidden;
    margin: 0;

}

#deflist-1 dt {

    float: left;
    width: 190px;
    margin: 0;
    padding: 5px;
    background: silver;
    clear: left;

}

#deflist-1 dd {
    
    float: left;
    width: 190px;
    margin: 0;
    padding: 5px;
    background: orange;

}

This solution doesn't work as it is in Internet Explorer 6 and 7 (it works well in IE8, though). The main problem with this solution is that IE needs a container for both the dt and dd elements on each row. More precisely, this solution will work only if we give some additional styles to IE through conditional comments.

Instead, with jQuery the problem is easily fixed. Here's the code:

$(document).ready(function(){

    var html = '<table id="deflist-2">';
    
    $('#deflist-2 dt').each(function(){
    
        var $dt = $(this);
        var $dtContent = $dt.html();
        
        var $ddContent = $dt.next().html();
        
        html += '<tr><td class="dt">' + $dtContent + '</td><td class="dd">' + $ddContent + '</td></tr>';
    });
    
    html += '</table>';
    
    $('#deflist-2').replaceWith(html);

});

With this solution, you avoid any CSS hacks or conditional comments. Anyway, the choice is up to you. You can see the final result here.

jQuery: turning a list into a table

In order to create a basic image gallery with CSS, we're usually accustomed to use floats to get the desired effect. However, floats sometimes can be really buggy in Internet Explorer and require a lot of workarounds to get them fixed. On the other hand, tables are a safer way to accomplish our task. However, since tables should be used only for tabular data and not for presentational purposes, we stick to a basic unordered list in our markup:

<ul id="gallery">

<li><img src="img/1.jpg" alt="Image" />
<p>Caption</p></li>

<li><img src="img/2.png" alt="Image" />
<p>Caption</p></li>

<li><img src="img/3.jpg" alt="Image" />
<p>Caption</p></li>

</ul>

Then we want to turn this list into a table by using jQuery. First of all, we need some basic styles to keep our gallery organized:

#gallery {

    width: 456px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;

}

#gallery td {

    width: 147px;
    padding-right: 5px;

}

#gallery td img {

    display: block;
    width: 100%;

}

#gallery td p {

    margin: 0;
    padding: 0.3em 0;
    text-align: center;
    text-transform: uppercase;

}

Now we can add jQuery:

$(document).ready(function(){

    var html = '';
    html += '<table id="gallery">';
    html += '<tr>';
    
    $('#gallery li').each(function() {
    
        var $li = $(this);
        var imgSrc = $li.find('img').attr('src');
        var imgAlt = $li.find('img').attr('alt');
        var caption = $li.find('p').text();
        
        html += '<td><img src="'+imgSrc+ '" alt="'+imgAlt+ '"/>'+'<p>'+caption+'</p></td>';
    
    });
    html += '</tr>';
    html += '</table>';
    
    $('#gallery').replaceWith(html);
    

});

You can see the final result here.

CSS: extending the border-collapse property to all elements

border-collapse is an useful property which applies to tables. It allows us to make table borders collapse into an unique border. It accepts two values: collapse and separate. The former value, as its name says, makes borders collapse, while the latter keeps them separate. Unfortunately, this property can be applied to tables only. For example, if you have some floated boxes like these:

body {

  margin: 0 auto;
  width: 306px;
  padding: 2em 0;

}

div.float {

    width: 100px;
    height: 100px;
    border: 1px solid red;
    background: orange;
    text-align: center;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    float: left;
    line-height: 100px;

}

you will see something like the following picture:

Screenshot

As you can see, borders don't collapse. It would be extremely useful for web developers if the CSS Working Group would take into consideration the possibility of extending this property to all elements. Well, we'll see.

jQuery: normalizing CSS inline breadcrumbs menus

Suppose that you have a breadcrumbs menu like this:

<ul id="breadcrumbs">
<li>
    <a href="#">Home</a>
    
    <ul>
    
        <li><a href="#">Articles</a>
        
            <ul>
            
                <li><strong>Article</strong></li>
            
            </ul>
        
        </li>
    
    </ul>
    
</li>
</ul>

If you try to apply some styles to this menu, for example by turning each item and unordered list into inline elements with CSS, you'll probably notice that some mysterious gaps will appear between each item. That's due to the indentations applied to the source code. Unfortunately, CSS provides no way to fix this problem. In this case, we should use jQuery to turn the above code into this:

<div id="breadcrumbs">
<a href="#">Home</a>
<a href="#">Articles</a>
<strong>Article</strong>
</div>

Here's the jQuery code:

$(document).ready(function() {

    var html = '';
    
    var a = $('#breadcrumbs')[0].getElementsByTagName('a');
    
    for(var i=0; i < a.length; i++) {
    
        var href = a[i].getAttribute('href');
        var text = a[i].firstChild.nodeValue;
        
        html += '<a href="' + href + '">' + text + '</a>';
    
    
    }
    
    var $strong = $('#breadcrumbs strong').text();
    
    html += '<strong>' + $strong + '</strong>';
    
    $('#breadcrumbs').replaceWith('<div id="breadcrumbs">' + html + '</div>');

});

We're using DOM core methods and a for loop because they are considerably faster than jQuery methods.

jQuery: a tag cloud with CSS classes

We want a tag cloud with different CSS classes applied to links. To start with, here is a basic structure for our tag cloud:

<ul id="tag-cloud">
<li><a href="#">CSS</a></li>
<li><a href="#">DOM</a></li>
<li><a href="#">ECMAScript</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">SVG</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">XSLT</a></li>
</ul>

We're using an unordered list to preserve the fundamental semantics of our tag cloud. Now we can add our CSS styles:

body {

    width: 50%;
    margin: 0 auto;
    font: 62.5%/1 Arial, sans-serif;
    background: #fff;
    color: #333;
    padding: 2em 0;

}

a:link, a:visited {

    color: #338;
    text-decoration: none;

}

#tag-cloud {

    height: 100%;
    width: 60%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-size: 1.3em;

}

#tag-cloud li {

    display: inline;
    padding-right: 0.3em;

}

/* jQuery classes */

a.css {font-size: 2em; color: #c60;}
a.dom {font-size: 1.4em; color: #c00;}
a.ecmascript {font-size: 1.1em; color: #555;}
a.html5 {font-size: 1.8em; color: #0df;}
a.javascript{font-size: 1.9em; color: #393;}
a.php {font-size: 1.8em; color: #933;}
a.python {font-size: 1.3em; color: #00f;}
a.svg {font-size: 1em; font-weight: bold; color:fuchsia;}
a.xml {font-size: 1.9em; color: purple;}
a.xslt {font-size: 1.6em; color: green;}

Finally, let's add jQuery:

$(document).ready(function() {

    $('#tag-cloud li').each(function() {
    
        
        var $a = $(this).find('a');
        var text = $a.text();
        
        
        
        switch(text) {
        
            case 'CSS':
            $a.addClass('css');
            break;
            case 'DOM':
            $a.addClass('dom');
            break;
            case'ECMAScript':
            $a.addClass('ecmascript');
            break;
            case 'HTML5':
            $a.addClass('html5');
            break;
            case 'JavaScript':
            $a.addClass('javascript');
            break;
            case 'PHP':
            $a.addClass('php');
            break;
            case 'Python':
            $a.addClass('python');
            break;
            case 'SVG':
            $a.addClass('svg');
            break;
            case 'XML':
            $a.addClass('xml');
            break;
            case 'XSLT':
            $a.addClass('xslt');
            break;
            
            default:
            break;
        
        }
    
   });
    

});

That's simple: we iterate over each list item and find the text contained within each link. Then we use the switch construct in order to apply the appropriate CSS class depending on the text node of the links. You can see the result below.

Screenshot

CSS3: the nth-child pseudo-class

The CSS3 nth-child pseudo-class is a powerful CSS3 selector that solves many problems encountered by web developers while trying to stylize certain elements based on their position in the DOM tree. As its name says, this pseudo-class selects an element if this element is the nth-child of its parent. This kind of selector accepts four types of values:

  1. the keyword even (for even elements)
  2. the keyword odd (for odd elements)
  3. the n index, starting from 1
  4. the an+b formula, where n is a literal constant and a and b are numbers.

Some examples:

tr:nth-child(odd) {
  background: #eee;
}

The above code selects all tr elements that are odd. But we can also selects other indexes, like so:

tr:nth-child(4) {
   background: #eee;
}

This code selects the 4th tr element. If we want to perform a repeated selection, for example by selecting all tr elements that are multiples of 3, we can write this formula:

tr:nth-child(2n+1) {
  background: #eee;
}

jQuery: performing per-page actions

jQuery allows us to perform many actions on web documents. However, sometimes we want to perform only certain actions on a given page. Given that we're actually working on DOM elements, an obvious approach would probably be to check whether an element exists or not:

var elementExists = function(element) {
    
        if(document.getElementById(element) !== null) {
 
     return true;
     
 } else {
 
     return false;
     
 }
    
    };

Here we're only testing a given string against the value of an ID attribute. But there's a catch: an ID element can actually occur on several pages, though it can't never occur on the same page. We must to refine our approach and we can fulfill our goal by taking into account an handy CSS practice used by developers: ID attributes on the body element. For example:

<body id="home">
...
</body>

By providing an ID attribute this way we're actually creating an unique reference to a given page. We can take advantage of this technique to perform per-page actions with jQuery:


var AClass = new function() {

    var self = this;
    
    /** @param {Object}
              @access Public
              @returns {Object} */

    this.execute = function(callback) {
        
 
 return callback.method(callback.parameters);
    };
    
    this.loader = function(page) {
    
        page = $(page).attr('id');
 
 return this.execute({
 
     parameters: page,
     method: function(parameters) {
         switch(parameters) {
      case 'home':
          // do something
          break;
      case 'articles':
      case 'blog':
          // do something
       break;
   case 'contacts':
       // do something
       break;
          
      default:
          break;
  }
     }
 });
    
    
    };



}();

function init() {
    AClass.loader('body');
}

$(document).ready(function() {
    init();
});

By doing so, we're actually performing different actions on different pages. Obviously you can improve the methods provided above.

Supporting legacy browsers considered harmful

Let's face it: as web developers, we are forced to support legacy browsers only because our clients want us to do so. Period. There's no reason to support them otherwise. Legacy browsers slow down the deployment of the web as a standard and accessible platform. With their bugs, anomalies, rendering inconsistencies, security issues and the like, they're actually a pain in the neck rather than something that must to be handled carefully. When I post some of my demos, many developers always ask the same question: does Internet Explorer 6 support this? This approach is harmful, because it actually makes us unaware of the many potential possibilities of web standards. For example, consider the case of advanced CSS selectors: for years many developers ignored them simply because IE6 doesn't support them at all. Result? Now they're rediscovering these selectors and wondering why they didn't use them before. Why? Because they wanted to support legacy browsers, that is, instead of coding to the standards they were inclined to code to the lowest common denominator (as Ian Hickson said). And this is harmful, because it doesn't force browser implementors to release better browsers (as in the case of IE6, whose lifespan is one of the longest period in the history of the web). So the point is: for a better web experience, please don't support legacy browsers. Thanks.

CSS: an image gallery with table values

Image galleries are usually built with floats. That's fine, but we can also use CSS table values to accomplish this task. To start with, let's draw a simple HTML structure:

<ul id="gallery">

<li>

 <div class="box-img">
 
     <img src="img/1.jpg" alt="Test image" />
     <p>Caption text</p>
 
 </div>
 
 <div class="box-img">
 
     <img src="img/2.jpg" alt="Test image" />
     <p>Caption text</p>
 
 </div>
 
 <div class="box-img">
 
     <img src="img/3.jpg" alt="Test image" />
     <p>Caption text</p>
 
 </div>

</li>
<!--more-->
</ul>

And here are our CSS styles:

#gallery {
    width: 490px;
    margin: 0 auto;
    padding: 0;
    display: table;
}

#gallery .box-img {
    width: 152px;
    padding: 5px;
    border: 1px solid #cbcbcb;
    font-size: 1.2em;
    display: table-cell;
}

#gallery .box-img img {
    display: block;
    width: 100%;
}

#gallery .box-img p {
     text-align: center;
     margin: 0;
     padding: 4px 0;
     color: #666;
     font-variant: small-caps;
}

#gallery li {
    list-style: none;
    display: table-row;
}

We've turned all block-level elements in table, table row and table cell elements, respectively. You can see the final result here.

CSS: table caption background image

Styling a table caption with CSS can actually be a little tricky if you don't know exactly how CSS styles must be applied to it. To start with, here's a basic table:

<table summary="Test">
<caption>Test table</caption>

<tr>

<th scope="col">Table header</th>
<th scope="col">Table header</th>
<th scope="col">Table header</th>
<th scope="col">Table header</th>

</tr>

<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>

<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>

<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>

<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>


</table>

We want to apply a tiled background image to the table caption. The relevant styles are as follows:

table {

    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;

}

caption {

    width: 100%;
    margin: 0;
    height: 2.7em;
    line-height: 2.7;
    background: url(img/table_header.jpg) repeat-x;
    color: #fff;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;

}

th, td {
    border-bottom: 1px solid #cbcbcb;
    vertical-align: top;
    text-align: left;
    padding: 5px;
}

tr:nth-child(even) {

    background: #cbcbcb;

}

The only thing to notice here is that we didn't turn the caption element into a block-level element. If you do this, the background image won't stretch to cover the entire width of the table. This happens because in this case the shrink-to-fit algorithm comes into play. In other words, when the caption is a block-level element, its width is computed according to the amount of content contained inside of it. Nothing less, nothing more. You can see the final result below.

jQuery: Fancybox and Internet Explorer

I was rebuilding this site and I decided to use Fancybox 1.3.1 (the previous version which I used was 1.2.6). Surprise: it's completely broken in all versions of Internet Explorer (from 6 to 8)! IE doesn't show image controls, so you cannot close an image or open another one in a gallery or slideshow. Even worse, captions are without background in IE, so your text will shine through. Fine. Eventually I came up with a rough solution: using Fancybox 1.2.6 instead of 1.3.1. Oh well...

CSS3 animations considered harmful

There's been a lot of talking about the new improved features of CSS3 animations, currently supported only by the latest versions of Webkit browsers. I think that most people who endorse these features miss one key point: separation of presentation and behavior. CSS is designed to handle the presentation of web documents, not their behavior. Behavior is something that only JavaScript can correctly handle in a web browser. If we mix up presentation and behavior, we'll probably end up with generating a big confusion between the two layers. Further, CSS is designed to be a simple, human-friendly stylesheet language whereas animations are more inclined to be something that can be actually generated and processed by a programming language (and CSS is not a programming language).

CSS3 animations force browsers to perform complicate calculations using CSS properties as a means to get particular effects: moving, resizing, translating, calculating Bezier curves, calculating time delays and much more. Honestly, this seems more JavaScript than CSS to me! I keep using JavaScript for such things, honoring a separation between presentation and behavior that most developers now are trying to forget in order to jump on the bandwagon of CSS3 animations or, more clearly, on the bandwagon of spaghetti code that they call "web 2.0 latest and coolest features".

Firefox 4 unveiled: new HTML5 elements supported

Firefox 4 now supports new HTML5 tags. This is reflected by the macros list contained within the nsHTMLTagList.h header file in the parser/htmlparser/public folder of the source code. Here is the complete list of available macros:

HTML_TAG(a, Anchor)
HTML_HTMLELEMENT_TAG(abbr)
HTML_HTMLELEMENT_TAG(acronym)
HTML_HTMLELEMENT_TAG(address)
HTML_TAG(applet, SharedObject)
HTML_TAG(area, Area)
HTML_HTMLELEMENT_TAG(article)
HTML_HTMLELEMENT_TAG(aside)
#if defined(MOZ_MEDIA)
HTML_TAG(audio, Audio)
#endif
HTML_HTMLELEMENT_TAG(b)
HTML_TAG(base, Shared)
HTML_TAG(basefont, Span)
HTML_HTMLELEMENT_TAG(bdo)
HTML_TAG(bgsound, Span)
HTML_HTMLELEMENT_TAG(big)
HTML_HTMLELEMENT_TAG(blink)
HTML_TAG(blockquote, Shared)
HTML_TAG(body, Body)
HTML_TAG(br, BR)
HTML_TAG(button, Button)
HTML_TAG(canvas, Canvas)
HTML_TAG(caption, TableCaption)
HTML_HTMLELEMENT_TAG(center)
HTML_HTMLELEMENT_TAG(cite)
HTML_HTMLELEMENT_TAG(code)
HTML_TAG(col, TableCol)
HTML_TAG(colgroup, TableCol)
HTML_HTMLELEMENT_TAG(dd)
HTML_TAG(del, Mod)
HTML_HTMLELEMENT_TAG(dfn)
HTML_TAG(dir, Shared)
HTML_TAG(div, Div)
HTML_TAG(dl, SharedList)
HTML_HTMLELEMENT_TAG(dt)
HTML_HTMLELEMENT_TAG(em)
HTML_TAG(embed, SharedObject)
HTML_TAG(fieldset, FieldSet)
HTML_HTMLELEMENT_TAG(figcaption)
HTML_HTMLELEMENT_TAG(figure)
HTML_TAG(font, Font)
HTML_HTMLELEMENT_TAG(footer)
HTML_TAG(form, Form)
HTML_TAG(frame, Frame)
HTML_TAG(frameset, FrameSet)
HTML_TAG(h1, Heading)
HTML_TAG(h2, Heading)
HTML_TAG(h3, Heading)
HTML_TAG(h4, Heading)
HTML_TAG(h5, Heading)
HTML_TAG(h6, Heading)
HTML_TAG(head, Shared)
HTML_HTMLELEMENT_TAG(header)
HTML_HTMLELEMENT_TAG(hgroup)
HTML_TAG(hr, HR)
HTML_TAG(html, Shared)
HTML_HTMLELEMENT_TAG(i)
HTML_TAG(iframe, IFrame)
HTML_TAG(image, Span)
HTML_TAG(img, Image)
HTML_TAG(input, Input)
HTML_TAG(ins, Mod)
HTML_TAG(isindex, Shared)
HTML_HTMLELEMENT_TAG(kbd)
HTML_TAG(keygen, Span)
HTML_TAG(label, Label)
HTML_TAG(legend, Legend)
HTML_TAG(li, LI)
HTML_TAG(link, Link)
HTML_HTMLELEMENT_TAG(listing)
HTML_TAG(map, Map)
HTML_HTMLELEMENT_TAG(mark)
HTML_TAG(marquee, Div)
HTML_TAG(menu, Shared)
HTML_TAG(meta, Meta)
HTML_TAG(multicol, Span)
HTML_HTMLELEMENT_TAG(nav)
HTML_HTMLELEMENT_TAG(nobr)
HTML_HTMLELEMENT_TAG(noembed)
HTML_HTMLELEMENT_TAG(noframes)
HTML_HTMLELEMENT_TAG(noscript)
HTML_TAG(object, Object)
HTML_TAG(ol, SharedList)
HTML_TAG(optgroup, OptGroup)
HTML_TAG(option, Option)
HTML_TAG(output, Output)
HTML_TAG(p, Paragraph)
HTML_TAG(param, Shared)
HTML_HTMLELEMENT_TAG(plaintext)
HTML_TAG(pre, Pre)
HTML_TAG(q, Shared)
HTML_HTMLELEMENT_TAG(s)
HTML_HTMLELEMENT_TAG(samp)
HTML_TAG(script, Script)
HTML_HTMLELEMENT_TAG(section)
HTML_TAG(select, Select)
HTML_HTMLELEMENT_TAG(small)
#if defined(MOZ_MEDIA)
HTML_TAG(source, Source)
#endif
HTML_TAG(spacer, Shared)
HTML_TAG(span, Span)
HTML_HTMLELEMENT_TAG(strike)
HTML_HTMLELEMENT_TAG(strong)
HTML_TAG(style, Style)
HTML_HTMLELEMENT_TAG(sub)
HTML_HTMLELEMENT_TAG(sup)
HTML_TAG(table, Table)
HTML_TAG(tbody, TableSection)
HTML_TAG(td, TableCell)
HTML_TAG(textarea, TextArea)
HTML_TAG(tfoot, TableSection)
HTML_TAG(th, TableCell)
HTML_TAG(thead, TableSection)
HTML_TAG(title, Title)
HTML_TAG(tr, TableRow)
HTML_HTMLELEMENT_TAG(tt)
HTML_HTMLELEMENT_TAG(u)
HTML_TAG(ul, SharedList)
HTML_HTMLELEMENT_TAG(var)
#if defined(MOZ_MEDIA)
HTML_TAG(video, Video)
#endif
HTML_HTMLELEMENT_TAG(wbr)
HTML_HTMLELEMENT_TAG(xmp)

/* These are not for tags. But they will be included in the nsHTMLTag
   enum anyway */

HTML_OTHER(text)
HTML_OTHER(whitespace)
HTML_OTHER(newline)
HTML_OTHER(comment)
HTML_OTHER(entity)
HTML_OTHER(doctypeDecl)
HTML_OTHER(markupDecl)
HTML_OTHER(instruction)

Since Firefox 4 now supports these new HTML5 elements, there have been some slight changes in the html.css default style sheet. In short, the aside and article elements now have all the declaration display: block and apparently work exactly as normal div elements.

CSS internationalization: transliteration

After a nice conversation that I had this morning with a friend of mine who lives in Egypt, I found out that CSS internationalization may be more complicated than it could seem. I asked him if he actually uses Arabic characters when he writes his style sheets. He said that some people of the Internet generation uses a transliterated form of scripting called Franko Arabic, much similar to the form used in Turkey (for example, hukran = thanks ). However, the majority of people still use the traditional Arabic writing.

For internationalization, CSS provides the following features:

  1. new CSS3 text properties
  2. UTF-8 encoding through the @charset rule
  3. Unicode encoding through character escaping.

After this conversation, I noticed that some people of the new generations have problems with their own traditional forms of writing. This aspect is probably related to the new forms of communication of the digital era, like SMS. If I should draw a conclusion, I could say that the CSS features for internationalization are still considered obscure by some developers who should use them.