Might as well use it

I finally took some of that new web tech I was talking about here and used it here.  I couldn’t stand the “brick” look anymore, so it’s mostly border-radius and box-shadow, but there’s also an RGBA background color and a webkit transition.  None of this gives joy for IE, though – perhaps I should Chrome Frame it?   …I did also tighten up the Reader feed and search box. 

I realize how long it’s been here, and that Facebook’s walled garden has been catching the vast amount of my sharing.  I’d like to “get out” here more, but til I do, don’t miss me there.

~r

HTML5, CSS3, and me

 

I recently stumbled on FindMeByIP.com, and thought “yet another IP lookup / geolocation site”.   Then I noticed the “Modernizr Support” section, detailing my browser’s support for new standards. 

I was impressed both by the graph and my browser’s support.  Here’s how it looked with Google Chrome:
image

 

It reminded me that last week I was experimenting with HTML5, CSS3, and Chrome Frame, and had whipped together an ugly(!) demo.  I figured I’d line up the current browsers here and run them through both exercises.  To be clear, my demo is NOT fair because it uses several Webkit-specific extensions, but I thought it worth seeing.

 

The Downward Spiral

Chrome 3.0 (and Safari 4.0)
image  image
Yes, it’s tilted on purpose. Interesting bit: the black background is the abyss behind the rounded <HTML>.  Who knows what lurks there?  (Bizarre video artifacts when I resize the browser, actually).

 

Firefox 3.5
image image
@font-face worked on my header, but no gradients, and I don’t know why border-radius failed.  (It’s worked on other sites).

 

Opera 10
image image
Why is the standards-nazis’ browser so sucky here? 

Internet Explorer 8
image image
The bottom of the suck, and what we’ve all come to know and loathe.  (To be fair though, IE has supported much of this since v4, but in a non-standard way.  Pragmatically, I’d grant it Box-shadow, Opacity, Gradients, 2D Transforms, and Transitions thanks to its CSS Visual Filters and Transitions.)

 

A Testing Crisis

Currently I test my sites with SIX web browsers: Safari/Chrome, Firefox, Chrome, IE6, IE7, and IE8.  This is a testing crisis for me, and IE6 has no give (with a stubborn 33% market share), so I’ve been forcing IE8 into downgraded IE7 mode for a slight reprieve.  Yes, I downgrade an already-behind browser! 

Sure, I could try to encourage users to upgrade their browsers, but apparently most people have no idea what that means! 

(If you’re an internet professional, you should watch this)

 

Aagh, there’s no way out!  With apologies to Mr. Folds:

IE is a brick and I’m drowning slowly.

 

It’s really more like three bricks drowning the web.  If we could drop one or two versions, IE8 could be survivable, but how?

 

Hope We Can Hope For?

This is where Chrome Frame wants to come to the rescue.  With it, I can use Chrome as an IE plugin, just like Flash, Java, AIR, or Silverlight.  Sure it’s cheating, but in a good way – it still uses the original native web code (so it is NOT the Un-web like those other plugins).

IE8 with Chrome Frame:
image image

Perfect!  And the same results in IE6 and IE7!

If a plugin story is acceptable (widespread use of the Chrome Frame plugin would help), this means only 3 browser engines to test.  I haven’t used it in production yet, but I’ll be carefully considering it for new projects. 

~

Shiny things for my gearhead peeps

  • Tool – Exchange 2003 SP2 IMF Keyword Manager
    Now I don’t have to edit raw XML and double-check that I didn’t screw it up (open in IE to verify well-formedness, wait/worry for 7513/7514 logged events).
  • Picture – Computer hardware poster
    Reference of over 170 different computer connectors, RAM, CPU sockets, etc.  I put a giant version on my office wall.
  • Article – 10 CSS properties missing in IE6

    1. Rounded or Curved Corners
    2. PNG alpha transparency
    3. Opacity
    4. Fixed Position
    5. Min-width & Max-width
    6. Hover for non anchor elements
    7. Min-height & Max-height
    8. Bicubic scaling for images
    9. Negative text indent for input button
    10. Text shadow

    Good article on what most browsers offer designers these days.  I would just add box-shadow.I happily got to use about half of these features on my most recent site, thanks to some great IE shims:

  • DD_roundies and DD_belatedPNG
    Excellent IE shims for Rounded Corners and PNG Alpha transparency.  There are tons of other IE shims for these, but after much homework, I say these are the best and you want them.  (FYI, I’ve made peace with requiring Javascript for design enhancements, which these are).Now if Drew could port box-shadow to IE, my heart would sing.
  • Article – Universal Internet Explorer 6 CSS
    Article lays out the basic ways to handle IE6 design in 2009, and a fascinating new suggestion.  To wit, not to waste hours in time and a client’s money on lengthy workarounds in an unnecessary attempt at cross-browser perfection.

Hey J-Lo, where did LowSRC go?

Remember the IMG element’s LowSRC attribute?  Unfortunately, no modern browser does!  While the big ones used to offer this for the slower folks among us, they have all dropped support for it.

I need it again, though!  A current project calls for a (just) 320×280 high-color illustration with alpha-transparency – nothing other than a full 32-bit alpha-channel PNG will do that justice.

Out of the editor, it’s 160KB, which is huge for homepage decoration.  A good PNGCrushing got that down to 106KB, which is still 16 seconds on 56K.  Oh, and there’s the rest of the page too…

A pinch of JQuery and classic Javascript later, and LowSRC works again!

$(function() {

  // jLowSRC - Rob Eberhardt (@slingfive.com), May 2009
  $("IMG[lowsrc]").each(function() {
    if (this.readyState=='complete' || this.complete==true) { return }

    var lowsrc = $(this).attr('lowsrc');
    this.lowsrcElem = this;
    if ($.browser.msie && $.browser.version <7 && lowsrc.toLowerCase().indexOf('.png') >-1) {	//IE6
      $(this).wrap('<span></span>');
      this.lowsrcElem = this.parentNode;
      this.lowsrcElem.style.display = 'block';
      this.lowsrcElem.style.width  = this.offsetWidth;
      this.lowsrcElem.style.height = this.offsetHeight; 
      this.lowsrcElem.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +lowsrc+ "')";
      this.style.visibility = 'hidden';
    } else {
      this.lowsrcElem.style.background = 'url(' +lowsrc+ ') no-repeat 0 0';
    }

    this.onload = function() {
      this.lowsrcElem.style.background = '';
      this.lowsrcElem.style.filter = '';
      this.style.visibility = 'visible';
    }
  });

});

 

It works in Firefox 3, Chrome, Safari 3, Opera 9, IE 7 and 8.  I also got it handling IE 6 (with a small re-flow jump to the final image), which is the bulk of the code.  (Dear 33% of the world, your web browser is 800 years old and eating our brains.  Broadband isn’t free, but newer browsers are.)

For testing, I simulated modem speeds and “first loads” (disabled cache) with the brilliant Fiddler2.  It’s not just a noticeable improvement, it’s the difference between getting sandwich or sticking around.

Hope it helps someone else!

My fave web / dev news from Mix09

Microsoft has:

  • IE8 final being released at noon today. Hoorah!
    Now if MS would just force-upgrade the IE6 holdouts!
  • SuperPreview for side-by-side (or overlaid!) browser layout testing
    I grabbed SuperPreview the moment it was announced yesterday. Looks great for IE6 & 7, but it didn’t find any of my other installed browsers, or show Safari/Mac like the demo, and I see no way to add those. Hm, maybe they’re still working out kinks…
  • Silverlight 3 beta – big wow for high-performance cross-platform video
    That said, Silverlight is still the “Un-web”.
  • Expression Blend 3 previewSketchflow especially looks awesome for bigger projects
    I’m still not sure I personally can trust a WYSIWYG editor. Frontpage still haunts me.