No Mod Required

Lost in the past few years of IE6 based stagnation (and ensuing developer angst) is the fact that the Internet Explorer team have come up with some pretty cool enhancements to the way we build web sites over the past ten plus years.

So, while we’re cheering on Firefox’s growing market share, hesitantly eying IE8 and waiting for the ugly stepchild of the browser landscape, IE6, to finally die a painful (and hopefully immediate) death, I thought I’d lay out some of the innovations introduced by Internet Explorer to remind us of relatively positive days gone by*.

As a fun exercise, while you’re reading this, compare these innovations to the black hole left in the web development world by the long and terrible reign of IE6. It’s an interesting juxtaposition of help vs. harm. Here’s hoping future versions of the browser continue to trend closer to the “help” line as IE7 has and IE8 appears to be doing**

XMLHttpRequest

For those that don’t know, XMLHttpRequest (XHR) is an API used by JavaScript to transfer XML (and other text formats like JSON and plain text) data between a browser and the web server.

This one is obviously pretty big. While “Ajax” the phrase coined by Jesse James Garret of Adaptive Path, didn’t spring directly from Redmond, a large part of it, and therefore much of the recent innovation in the way web interfaces are programmed, does spring from the creation of the XMLHttpRequest (XHR) object. Originally an ActiveX object, XHR is so far entrenched into the way web works right now it’s not even funny.

Personally, without Ajax making JavaScript the hot language it is today, I wouldn’t be half as marketable as I currently am.

Introduced in Internet Explorer 5.0

innerHTML

This JavaScript property is a read/write interface to the HTML markup and content within a given element.

All day, every day I use the innerHTML property. Faster than the DOM methods for object creation and insertion setting innerHTML is normally my first choice whenever I do DOM manipulations.

Introduced in Internet Explorer 4.01

iFrame

Like a frame, an iframe (”inline frame”) is an HTML element that allows you to embed a HTML document inside another HTML document. The iframe is the earliest innovation this list, appearing all the way back in 1996.

Humorously (or tragically depending on where your allegiance lies- Mountain View or Redmond,) a good portion of the GOOG empire is built on the iframe as the search giant uses an iframe to deliver its advertising on non-Google properties (you can see one in action on this very page.)

Introduced in Internet Explorer 3

The favicon

A favicon (favorites icon) is an icon associated with a particular website or webpage. The favicon not be the innovation that affects me the most on a day to day basis, but judging by the chatter generated by Google’s new favicon, I think a lot of people notice that little browser accessory.

Introduced in Internet Explorer 4

overflow-x, oveflow-y

Maybe not the biggest impact, being able to set the overflow property in one dimension is an immensely handy thing to be able to do and I’m happy to have it in my list of tricks.

*This is 100% focused on only technology. Anti-competitive practices and killing Netscape are definitely NOT positive.

**it should be added that while I’m pleased to develop for IE7 in comparision to IE6, it still falls short of what I’d like to see in terms of standards support. Hopefully IE8 will knock it out of the park, but until that time, I’d much rather everyone just go with Firefox, Safari or Opera

Google Doctype, as introduced by Mark Pilgrim:

The open web is the web built on open standards: HTML, JavaScript, CSS, and more. The open web is a beautiful soup of barely compatible clients and servers. It comprises billions of pages, millions of users, and thousands of browser-based applications. You can access the open web with open source and proprietary browsers, on open source and proprietary operating systems, on open source and proprietary hardware.

Google has built its business here, on the open web, and we want to help you build here too. To that end, we are happy to announce the formation of an encyclopedia for web developers, by web developers: Google Doctype.

Google Code Blog: Introducing Google Doctype

Personally, I’m excited by this development (both practically and philosophically) and will likely contribute wherever it makes sense for me to lend a hand. Looking at it quickly some of the HOWTO information is already very useful (the web security information especially) and it will only improve with time as more and more dedicated people get involved with the project.

Why? For fun, of course- and to expand on a point I made today at work…

Some background- I’m working with a new guy who is not so savvy to modern HTML/CSS layout techniques and today, while talking to him about some potential techniques he might use for an upcoming site, I remarked - “With CSS you can make practically any element do whatever you need it to do, so don’t always assume you need to wrap things in a DIV* to make a layout work.” The point related to the dangers of DIV-itis and my desire** to pare down markup to its absolute (meaningful) minimum. But it also illustrates a basic idea that, once fully understood, opens up all sorts of options for problem-solving.

So, anyway, chewing on the exchange on my way home from work I was struck with the idea of doing a simple three column layout using nothing but an Unordered List. My original comment was about a UL used as a menu and tweaking it to behave like a bunch of divs (which was his original idea for the menu) or something, so I thought it might be interesting to go all out use a UL for the entire layout, tweaking the LIs in a whole bunch of different ways to suit my needs. If that doesn’t illustrate my point, nothing will.

And, yeah. I’m sure a bunch of people have already done this. It was still interesting for me to do so it was well worth the effort no matter how many people out there are yawning in my general direction.

And here it is, in all it’s List-y glory- A Three Column CSS Layout Using Just an Unordered List

Here’s the pertinent markup

<ul id="container">
<li id="header">header</li>
<li id="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet... Pellentesque in erat.</p>
</li>
<li id="right-sidebar">right sidebar</li>
<li id="left-sidebar">left sidebar</li>
<li id="footer">footer</li>
</ul>

And here’s the CSS

* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
}
#container {
	margin: auto;
	width: 825px;
	border: thin solid #FF0000;
	position:relative;
}
#container #header {
	padding: 25px;
	height: 50px;
	width: 775px;
	border: thin dashed #999999;
}
#container #content {
	padding: 10px;
	width: 400px;
	margin-left: 200px;
	border: thin solid #0066CC;
}
#container #footer {
	height: 100px;
	border: thin solid #663300;
}
#container #left-sidebar,
#container #right-sidebar {
	border: thin solid #FF9900;
	position: absolute;
	width: 200px;
	top: 105px;
}
#container #left-sidebar {
	left: 0px;
}
#container #right-sidebar {
	right:0;
}

The sidebars are absolutely positioned- a technique I use because (a) I hate sidebars that stretch further than the content column and (b) I like to be able to push content further up in the source order so as to feed that stuff to search engines first. If it was an issue and one or both of the sidebars needed to drive the height and source order didn’t matter I could tweak it to satisfy those requirements. That said, this is my party so I’m going with the absolutely positioned sidebars Other than that, it should be pretty self-explanatory to anyone familiar with modern layout techniques. UL id=”container” takes the place of the traditional “wrapper” type DIV, the LIs take the place of the other section DIVs one might expect to find in any site that uses modern techniques and none of the actual CSS is all that different than what one might expect with a regular DIV based layout.

I know what you’re thinking- why is this even useful? To be honest, probably not. DIV’s are fine for this job. Separating sections of a site are what they’re designed for, so there’s no shame in using them for this purpose.

[devil's advocate]
There might be less “extraneous” markup with this technique since the UL is necessary as part of the list structure and the traditional div id=”container” or “wrapper” is only there for the purposes of layout. Also, the connection between the sibling LIs might be stronger semantically than the connection between the adjacent DIVs which don’t have any unifying structure. Other than those incredibly geeky points I’m not convinced there’s much to this beyond the thought experiment value of it all. Which is valuable. I’m just not sure I’m going to actually build any sites with this technique any time soon.

Or maybe I will.
[/devil's advocate]

Shout in the comments if I stopped making sense at any point in this post. I started yawning about thirty minutes ago so I can’t be sure of anything I’ve written in that time

*which isn’t to say I’m not down with DIV’s. I’m on the DIV train, I just know from painful experience that valid, table-less code with millions of nested DIVs can be just as miserable as any old school, nested table beast.
**which translates to the company’s desire since I’m driving the “how” of our front end practice

There’s absolutely nothing groundbreaking about the following code sample. People (who are lucky enough to have more time to mess around) have been doing this sort of experimentation for a while now. Thing is, this one is so simple and so plainly useful I just have to toss it out there for your (my?) enjoyment.

Check out the following sample. It’s just a simple show/hide, but I just love the simplicity of the code that runs it.

With a class="more" attached the DL, all we need to run the above is this


dl.more dd{
display:none;
}
dl.more:hover dd{
display:block;
}


There are two things I like about that:

1. It’s as simple as it gets. The only thing simpler than coding that would be not coding anything.
2. It makes sense. A lot of times those “more” links are the spitting image of a dt dd pair, except it’s unrelated tags in an arbitrary structure (something like DIV > P + DIV) so using ready-made structure just feels right.

Yeah, there are potential issues. The one that sticks out to me is it’s not accessible, since with no mouse there’s no :hover. That said, with any solution involving a mouse, accessibility becomes an issue, so it’s not better or worse than any other solution that doesn’t address the mouse-less users.

The other obvious issue is that IE6 doesn’t support :hover on anything but links, so there would need to be a script based solution to get this to work in what is still one of the biggest browsers out there.* But I can dream, can’t I?

*For this site, Firefox is actually the number one browser, followed by IE6 and then IE7. The combination of IE versions are still the dominant browser platform.

I’m constantly trying to come up with little markup patterns that make semantic sense and make it easier for me to create requested layouts without having to resort to a bunch of extra classes and IDs.

One common design element that I’ve been bothered by recently* but haven’t sat down and figured out looks like this:

Today I took a step back** and came up with this to represent it:

<dl>
<dt>Sessions focus on:</dt>
<dd>
<ul>
<li>Configuring, tuning and understanding hardware servers and software applications</li>
<li>Client side issues related to Mac OS X computing and management</li>
<li>Integration with PSx, UNIX, Telephony and other environments </li>
<li>Managing Macs in an enterprise environment</li>
<li>A Jump start for admin newbies</li>
<li>Best Practices for 3rd Party Tools IntegrationM</li>
</ul>
</dd>
</dl>

Which feels just about right to me- it captures the relationship between the lead-in (the lead in being the term defined) and the list (the list being the definition of the lead-in), and would allow me to style the whole thing with no additional markup.

I’ll just go ahead and file that one away.

*I’ve seen it on four or five different sites I’ve built in the past year and not so often before that. So up until recently it was never enough of a recurring pattern for me to even worry about.

**amazingly, since this markup will end up on a Drupal site. It’s a wonder I even bothered since Drupal is pretty much on the complete opposite end of the spectrum from my minimalist coding style.

I’m looking something like two or three years into the future to a point where I can implement a small, almost neglible upgrade to the way I serve back, next and home buttons for my galleries. Add one part coding neuroses, one part browser incompatibility and one part CSS and this article will be a small glimpse at the way I think.

This will be fun.

In my gallery pages I have something similar to the the following HTML markup on every page:

<div id="gallerynav">
  <a href="previous image link" title="Previous image" rel="prev" id="prev">Prev</a> 
  <a href="main gallery link" title="Up to the Main Gallery Page" rel="toc" id="toc">ToC</a> 
  <a href="next image link" title="Next gallery image" rel="next" id="next">Next</a>
</div>

That’s styled with the following CSS

That's styled with the following CSS
  #gallerynav a {
  display:block;
  width:21px;
  height:18px;
  position:absolute;
  text-indent:-5000px;
  }
  a#prev:hover {
  background:url(http://media.drunkenfist.com/img/back_o.gif) no-repeat;
  } 
  a#toc:hover {
  background:url(http://media.drunkenfist.com/img/home_o.gif) no-repeat;
  } 
  a#next:hover {
  background:url(http://media.drunkenfist.com/img/next_o.gif) no-repeat;
  } 
  #prev {
  background:url(http://media.drunkenfist.com/img/back.gif) no-repeat;
  left:25px;
  } 
  #toc {
  background:url(http://media.drunkenfist.com/img/home.gif) no-repeat;
  left:50px;
  } 
  #next {
  background:url(http://media.drunkenfist.com/img/next.gif) no-repeat;
  left:75px;
  } 

Functionally it’s what I want- descriptive text, replaced with small graphics*, controlled by reasonably descriptive, compact markup. There’s just one thing that I’d love to be able to clean up and can’t because Internet Explorer 6 doesn’t understand CSS Attribute selectors. IE7 does. So it’s just a matter of time before I can start using them. Which is why I spend any time thinking about this at all…

What are CSS Attribute selectors, you ask?

The spec sayeth:

CSS2 allows authors to specify rules that match attributes defined in the source document.
5.8.1 Matching attributes and attribute values

Attribute selectors may match in four ways:

[att]
Match when the element sets the “att” attribute, whatever the value of the attribute.
[att=val]
Match when the element’s “att” attribute value is exactly “val”.
[att~=val]
Match when the element’s “att” attribute value is a space-separated list of “words”, one of which is exactly “val”. If this selector is used, the words in the value must not contain spaces (since they are separated by spaces).
[att|=val]
Match when the element’s “att” attribute value is a hyphen-separated list of “words”, beginning with “val”. The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches (e.g., the “lang” attribute in HTML) as described in RFC 1766 ([RFC1766]).

What does that all mean? From a W3c perspective, the rel attribute is a flexible method to add semantic data to links. Google uses it to great effect with the rel=”nofollow” attribute value pair.

From my perspective it means I could dump the ids on all of those anchor tags and use the following CSS instead for the same visual effect:

a[rel="prev"]:hover {
background:url(http://media.drunkenfist.com/img/back_o.gif) no-repeat;
} 
a[rel="toc"]:hover {
background:url(http://media.drunkenfist.com/img/home_o.gif) no-repeat;
} 
a[rel="next"]:hover {
background:url(http://media.drunkenfist.com/img/next_o.gif) no-repeat;
} 
a[rel="prev"] {
background:url(http://media.drunkenfist.com/img/back.gif) no-repeat;
left:25px;
} 
a[rel="toc"] {
background:url(http://media.drunkenfist.com/img/home.gif) no-repeat;
left:50px;
} 
a[rel="next"] {
background:url(http://media.drunkenfist.com/img/next.gif) no-repeat;
left:75px;
} 

Why bother? Well, if I could use the above code, I could drop the IDs and just use the rel attribute. Since I’m already using the rel attribute in that markup** I don’t really need the IDs for any real reason. I’m just using them as a hook for styles. Which is really no reason at all

Here’s a sample. IE6 will display a blank iframe.

For the real minimalist approach (at least in terms of markup) I could always use Adjacent Sibling Selectors. In that case I could drop both the ID and REL and just rely on source order to style the links from first to last. Of course, IE6 doesn’t support this either. IE7 does though, so if the adoption rate ever spikes***, expect to see code like this coming to a browser near you.

 #gallerynav a:hover {
/*this is the first A in #gallerynav*/
background:url(http://media.drunkenfist.com/img/back_o.gif) no-repeat;
}
 #gallerynav a + a:hover {
/*this is the second A in #gallerynav*/ 
background:url(http://media.drunkenfist.com/img/home_o.gif) no-repeat;
} 
#gallerynav a +a + a:hover {
/*this is the third A in #gallerynav*/
background:url(http://media.drunkenfist.com/img/next_o.gif) no-repeat;
} 
#gallerynav a {
background:url(http://media.drunkenfist.com/img/back.gif) no-repeat;
left:25px;
} 
#gallerynav a +a{
background:url(http://media.drunkenfist.com/img/home.gif) no-repeat;
left:50px;
} 
#gallerynav a + a + a{
background:url(http://media.drunkenfist.com/img/next.gif) no-repeat;
left:75px;
} 
 

Here’s a sample. IE6 will display just the first link.

*one thing I’d like to do is use a single graphic and just change the background position. Cutting down on calls to the server- it’s the new black.
**because it adds metadata to the links that could potentially be an aid to user agents or to myself when coding JavaScript
***I’m not holding my breath.

I didn’t actually build anything on this site, but in the couple of weeks I did work on it I did do some XML/XSLT work on the CMS part, a wee bit of JavaScript and mashed the CSS up to work correctly with the IE family.

This Is Cable - Cable Services And Providers

I built out a couple of xHTML/CSS templates for the FASTforward ‘07 microsite. Wicked.

Someone else put the thing into production so blame him for any errors (*looks over shoulder to see if anyone catches me throwing people under the bus Peyton Manning style*)

They soft-launched it last week. This week the official launch, complete with video- Compete Blog » Compete.com – The internet revealed

Woo-hoo!

Previously: A new site I worked on is live - Compete.com (for more on what I actually did)

Compete just launched their new search and Snapshot services.

I prototyped the xHMTL and CSS for the search app and coded up both the generic and Ajax tooltips in use throughout both sites. It was an extremely fun project to work on. All of the folks over at Compete are cool, working with Tom is always a pleasure and the actual project itself was fun as heck as I got to do a lot of things I actually like to do on this project (as opposed to things that just pay the bills.)