Category: Web Standards


Lessons Learned

bring it all into perspective
the tongue will steer the ship ahoy
spark up a flame
feel the pain of habañero sauce
a word’s forever
when we speak we set `em free
so watch your mouth
and you be careful what you say, Jimmy

Newsboys, Cup O’ Tea (cf. James)

Every now and then I like to reaffirm my monumental witlessness lest it should fall into doubt. Oh, well. I suppose it could be worse.

Update: fixed that link. Last time I link to Hoosier Times, though.

Dynamic Curly Quotes

If you are of the Internet Explorer browsing persuasion, you may have noticed that often, when I quote another website, the style of the font will be in italic but there won’t be any quotes around the reference. I released a change to the site today that should take care of this issue.

The problem was that Internet Explorer—all the way up to version 6.0—does not fully support a tag standard that has been around for about five years now, namely: the <q> tag. According to the W3C specification, the browser is required to put quotes around anything surrounded by this tag. Mozilla does it, as does Opera. IE does not.

Mark Pilgrim has addressed this issue before, initially offering a CSS solution, but eventually settling for some server-side scripting that would insert the HTML quote entities en masse throughout his site. While this is probably an ideal solution, server-side scripting—even of the MT-Plugin variety—is not something that I have taken the time to learn.

Today, though, Mark provided links to JavaScript solutions provided by Simon Willison and Stuart Langridge. While the Willison solution involved proprietary IE scripting, Langridge took it one step further to make it more standards-friendly. Both of these implementations got the ball rolling for me and after hacking around for a little under an hour, I came up with this code:

function checkQuotes ()
{
   quotesElements = document.getElementsByTagName(“q”);
   if (quotesElements.length > 0) {
      q=quotesElements[0];
      if (q.currentStyle) {
         s = q.currentStyle;
      } else if (document.defaultView && document.defaultView.getComputedStyle) {
         s = document.defaultView.getComputedStyle(q,”);
      }
      supportsQuotes = false;
      for (prop in s) {
         if (prop.toLowerCase() == ‘quotes’) {
            supportsQuotes = true;
            break;
         }
      }
      if (!supportsQuotes) {
         for (var i=0; i<quotesElements.length; i++) {
            q = quotesElements[i];
            q.innerHTML = ‘&#8220;’+q.innerHTML+’&#8221;’;
         }
      }
   }
}

According to this code, any browser that supports the quotes will simply implement the CSS rules that I got from reading Mark’s article. Those that don’t, like Explorer, will have them dynamically added to each q element in the page.

I’ve tested this in my limited “QA” environment, and it works without error in the Mozilla variants, Opera 7, and Internet Explorer 6.0—which includes quite a chunk of the internet community. Netscape 4.76 did generate an error, however, quietly whining that the document.getElementsByTagName function does not exist.

Thanks to Mark, Simon, and Stuart for their work. Click here to see an article that employs the <q> tag.

Netscape DevEdge: Strategy Central. Why are standards important? How can you reach more visitors, get a better search-engine ranking, shorter download time for your web pages and better accessibility? Could you be saving money by making web site maintenance simpler and reduce vendor lock-in? Get information to help make a business case for standards-based web sites and applications. Complete with spiffy customization and cool standards-compliant menus brought to you by Cascading Style Sheets.

I noticed this article on Slashdot (discussion here). I remember debating with John Bell about whether or not I would ever take a job at Microsoft. All feasibility aside, I’m not sure I really would. A lot of people make a living of demonizing Microsoft—I’m not a part of that crowd (I mean, what’s the eternal significance of monopolistic business practices anyway?), but I think from an ethical standpoint that there’s much about Microsoft to give one pause.
View Full Article »

Am I Missing Something?

So John Bell and I were talking about the Opera web browser (did you know version 7 was released today?). John said it seemed to hande more websites much better. I’ve since downloaded the new version and am declaring that the site still looks pretty cheesy.

What’s weird, though, is that my knee-jerk reaction is to declare that O7 just doesn’t support web standards–and that would even seem to be confirmed by the fact that Mark Pilgrim posted a CSS workaround hack today. But then it occurs to me that it doesn’t make sense for a brand-spankin’ new production browser (as opposed to a brand-spankin’ new beta browser) doesn’t support standards that have been around for two years. Then it occurs to me to wonder what the rest of the standards-based sites I can think of off the top of my head look like. Dive Into Mark? Fine. Dooce? Copasetic. A List Apart? Spiffy. Wired? Well, er, not so great (at least I’m not alone).

Now the kicker: I go to Opera’s own site to see what their markup is. To my surprise, it’s XHTML 1.0 Strict. And it even validates.

So what am I doing wrong?

By the way: Opera may have mouse gestures, but Phoenix has mouse gestures and type-ahead-find. I’m sticking with Phoenix.

If you noticed that the site is slightly different than when you were last here, don’t worry, it is. I did a bit of work over the weekend to add some subtle design ideas that I had rolling around through my head. Not the least of these was the NN4 fix that I implemented. Read on to see how I handled this relic of a browser and how it added to my overall site design.
View Full Article »

Netscape 4 Research

So, I decided that it would be a good idea to look into NS4 development. This, not because I like it, mind you, but because I think it’s really necessary in order to open up the site to a larger audience, and that it would be a great learning experiment for content presentation (nevermind that I’ll be able to tell my kids that I had to come up with clever ways to deliver my content over this antique web-thing, in the freezing snow, up hill both ways, etc.). The first thing I did was hit Netscape’s site for old versions of NS. Yes, I downloaded 4.76. Yes, I feel dirty.

As usual, the next step was to scope out what Mark Pilgrim had to say about NS4. Here were some articles I ran across.

==

  • A List Apart: Backwards Compatible Stylesheet Switcher. Ridiculous! Impossible! Why on earth would you want to? Go back to your cave, Neanderthal! All these responses are valid, but I have a peculiar angle on the situation. I do all my web design, however impractical it sounds, using CSS layout that displays reasonably well in Netscape 4. And I saw no reason to change now. This ALA article seems to express that the best way to handle the issue is JavaScript. This might be a good idea (figuring out the browser signature and doing a document.write() wouldn’t be that hard).
  • Mark Howells Online: CSS and Netscape 4. It is possible to create some quite good sites for NN4.x using just CSS for layout, but there are a few things that you need to be aware of, even before you open Photoshop to do the initial graphic design. Brief list of pointers.
  • Website Tips: CSS (Style Sheets). The CSS Section below is filled with links to some of the best articles, tips, tutorials, editors, and templates on cascading style sheets (CSS). Some nice articles referenced here, including some of the above.
  • Mark Pilgrim: The neverending saga of Netscape 4 compatibility. CSS and Netscape 4 Issues. I’m battling this in my day job. (Yes, I have a day job, and yes, it currently involves creating a web-based application that works in Netscape 4. Life is full of little ironies.) A brief commentary on Mark’s NS4 adventures.

==

All in all, I may just serve up raw content (i.e. not formatted with CSS) for anyone who is using Netscape 4. This is similar to what already happens for users using, say, EudoraWeb for Palm. The message being to NS4 users: the site might look boring, but at least it doesn’t look like garbage.

Web Design & Compromise

With the advent of blogging and web design among several of my friends, I thought that some musings on the state of web design would be helpful. Read on for my soapbox. ;-)
View Full Article »

Powered by WordPress and Motion by 85ideas.