The Future Today: CSS3 and JavaScript

Below are the code examples used in my Spring Break talk. The slides PDF can be downloaded here.

The entire video of the presentation (including slide screens) can be found here.

Basic Table Striping

ID	First Name	Last Name	Weapon
1	Indiana	Jones	Whip
2	Marion	Ravenwood	Frying Pan
3	Mutt	Williams	Switchblade

Old School Way

td.alt {
	background:#eff1f3;
}


<td class="alt">...</td><td class="alt">...</td>

With CSS3

table tr:nth-child(even) td {
	background:#eff1f3;
}

With JavaScript

$('table tr:nth-child(even) td').addClass('alt');

Borders on only middle columns

ID	First Name	Last Name	Weapon
1	Indiana	Jones	Whip
2	Marion	Ravenwood	Frying Pan
3	Mutt	Williams	Switchblade

Old School Way

td.last {
	border:none;
}


<td>...</td><td>...</td><td class="last">...</td>

With CSS3

table#border tr th:last-child, table#border tr td:last-child {
	border:none;
}

With JavaScript

$('table#border tr th:last-child, table#border tr td:last-child')
	.css('border','none');

Navigation list without border on last element

Old School Way

li.last {
	border:none;
}


<li><a href="">...</a></li>
<li><a href="">...</a></li>
<li class="last"><a href="">...</a></li>

With CSS3

ul#nav li:last {
	border:none;
}

With JavaScript

$('ul#nav li:last').css('border','none');

Highlight only a specific column

ID	First Name	Last Name	Weapon
1	Indiana	Jones	Whip
2	Marion	Ravenwood	Frying Pan
3	Mutt	Williams	Switchblade

Old School Way

td.highlight {
	background:#efaa42;
	color:#FFFFFF;
}


<td>...</td>
<td class="highlight">...</td>
<td>...</td>

With CSS3

table#highlight tr td:nth-child(2) {
	background:#efaa42;
	color:#FFFFFF;
}

With JavaScript

$('table#highlight tr td:nth-child(2)').addClass('highlight');

Style links that point to external sites

Visit AtlantaJones.com

Old School Way

a.external {
	background:url(../images/external.png) no-repeat right center;
	padding-right:16px;
}


<a class="external" href="http://atlantajones.com">...</a>

With CSS3

a[href^="http"] {
	background:url(../images/external.png) no-repeat right center;
	padding-right:16px;
}

With JavaScript

$('a[href^="http"]').addClass('external');

Style links based on the type of file they link to

Download PDF

Old School Way

a.pdf {
	background:url(../images/pdf.gif) no-repeat right center;
	padding-right:20px;
}


<a class="pdf" href="somefile.pdf">Download PDF</a>

With CSS3

a[href$="pdf"] {
	background:url(../images/pdf.gif) no-repeat right center;
	padding-right:20px;
}

With JavaScript

$('a[href$="pdf"]').addClass('pdf');

Add styling to form buttons

Old School Way

input.btn {
	background:#efaa42;
	color:#FFFFFF;
	font-weight:bold;
	text-transform: uppercase;
}


<input type="text" value="" /> 
<input class="btn" type="button" name="submit" value="Submit Form" />

With CSS3

input[type="button"] {
	background:#efaa42;
	color:#FFFFFF;
	font-weight:bold;
	text-transform: uppercase;
}


also...
input[type="text"]
input[type="radio"]
input[type="checkbox"]

With JavaScript

$('input[type="button"]').addClass('btn');

Generated Content: Add Content Before or After An Element

Page Title Goes Here

Old School Way

Enter content by hand.

With CSS3

h3::before {
	content: "My Great Blog :: ";
}

With JavaScript

$('h3').prepend('My Great Blog :: ');

Generated Content: Create a caption from an image's "alt" data

Old School Way

<img>...</img><br />Image Caption here

With CSS3

img.cover::after {
	content: "<br /> " attr(alt);
}

With JavaScript

$('img.cover').each(function() {
	$(this).after('<br />' + $(this).attr('alt'));
});

Generated Content: Add the URL after the link title in printed CSS

The link looks like this when printed. (http://atlantajones.com)

Print page to see this link styled the same.

First, set up some print-specific styles

span.printlink {
	color:#333333;
	display:none;
}

@media print {
    span.printlink { 
    display:inline; 
    }
}

With CSS3

a.print::outside::after {
	content: "<span class='printlink'>" attr(href) "</span>";
}

With JavaScript

$('a.print').each(function(){
	$(this).after('<span class="printlink">
	(' + $(this).attr('href') + ')</span>');
});