Chris Coiyer over at CSS-Tricks put out a call for helpful snippets just a few days ago. I submitted a few to him and realized that I never really get around to posting them here. What a jerk I am for not sharing! How about some love? Sure thing…

CSS Clear Fix

I really hate using extraneous markup like <div class="clear"><> to clear floats. So how about a class you could apply to the parent element of floated elements to force it to self-clear the floats?

.clearafter {
    height: 1%;
}
    .clearafter:after {
        content: '.';
        display: block;
        clear: both;
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
    }

Jeff Starr explains another way of accomplishing the same task. This was also posted to CSS-Tricks under “CSS Clear Fix”.

Automatically Append a Class to File Downloads

Visual cues for file downloads are helpful for your site’s visitors to quickly recognize files they can download and what format they’re in.

Assume we have the following image with three file-type icons for Word documents, Excel spreadsheets, and PDF documents. Using CSS, we can target class names on an element to apply the correct piece of a single sprite to the element. If you’re unfamiliar with this concept, read up on using sprites before moving on.
Here’s our image:

.file {
    padding-left: 16px;
    background: url(images/icon-sprites.gif) 0 0 no-repeat;
}
    .file.doc { background-position: 0 0; }
    .file.xls { background-position: 0 -16px; }
    .file.pdf { background-position: 0 -32px; }

This works well, but how about automating adding these classes? Easy. Assuming you’re using jQuery, just add this snippet after you’re DOM is ready:

$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass('file').addClass(C[1]);
   }
});

This was also posted to CSS-Tricks as “Use jQuery to auto discover links to files and apply a class”.

Automatically Force New Windows on External Sites

Since the target attribute for links has been deprecated, I wanted a new and unobtrusive way to force links to different sites to open in a new window. This quick jQuery snippet will do just that.

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

This was also posted to CSS-Tricks as “Use jQuery to automatically open links to different sites in a new window”.

Prevent Superscripts and Subscripts From Affecting Line-Heights

Superscript (<sup>) and Subscript (<sub>) elements break line heights in HTML because of their vertical-align properties. This quick CSS snippet will fix that for you. For more information, please read my original post.

sup, sub {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}
sub { top: 0.4em; }

This was also posted to CSS-Trkcs as “Prevent superscripts and line-heights from affecting line-heights”.