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.

Google Report a Spam Result

Submitted to http://www.google.com/contact/spamreport.html

Exact query that shows a problem (copy this from the Google search box):
Technet Plus -vs- Action Pack

Resulting Google page that shows problem (copy the Google URL):
http://www.google.com/search?rlz=1C1GGLS_enUS291&sourceid=chrome&ie=UTF-8&q=Technet+Plus+-vs-+action+pack

The specific web page or site that is misbehaving: Type(s) of problem (check all that apply):
http://www.experts-exchange.com/Microsoft/Applications/Q_23272956.html

Type(s) of problem (check all that apply):


Cloaked page

Additional details:
To Firefox or Internet Explorer user-agent strings, http://www.experts-exchange.com/Microsoft/Applications/Q_23272956.html shows its registration page.  "View this solution now by starting your 7-day free trial…" at the bottom under Accepted solution.  The real answer content is NOT on the page.

But when I switch my browser’s UA string to Googlebot, it shows the real answer content which was in the Google search results.  This is deceptive to users, dilutes Google’s search relevance, and and violates your Webmaster Guidlines at http://www.google.com/support/webmasters/bin/answer.py?answer=66355

NOTE: SOMEtimes Experts-exchange.com DOES show the answer at the bottom, so please test from a variety of IPs and browsers.

Interestingly, it’s no new problem and Google is aware of but ignoring it?  Maybe if more people fill out the form to complain…?

IE6, are you still here?!

It’s August 2008, almost 2 years since Internet Explorer 7 came out.  So why on earth does IE6 still have almost the same market share?

Browser Stats

Fri Feb 1 00:01:02 2008 – Sun Aug 31 23:58:00 2008   213.0 Days

1. MSIE 7.x

15370300 (41%)

2. MSIE 6.x

13493578 (36%)

3. FireFox

6230544 (17%)

4. Safari

1276526 (3%)

5. Opera x.x

306845 (1%)

 

I was sure the world would be (nearly) free of IE6 a year ago, but adoption has slowed so much that it’s only given 1% to IE7 in the last 7 months.

Microsoft, you’re not pushing hard enough — get that fogey out of here ASAP!

 

And now back to futzing with transparent PNGs for IE6…

 

Technorati Tags: Internet Explorer,