skipnav sass mixin

This is rewrite of excelent idea from
http://www.jimthatcher.com/skipnav.htm as Sass mixin.

/*
http://www.jimthatcher.com/skipnav.htm
<nav class="my-skipnav">
 <a href="#maincontent">Skip to main content</a>
 <a href="#sitemap">Skip to footer site map</a>
</nav>

Usage:
// using traditional class
.my-skipnav {
 @include  a11y-skipnav;
}
// or using structure selector
body>nav:first-child {
 @include  a11y-skipnav;
}
*/
@mixin a11y-skipnav {
 text-align: left;
 a {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;  
 } 
 a:focus, a:active {
  position: static;
  left: 0;
  width: auto;
  height: auto;
  overflow: visible;
 }
} 

IBM home page improved

www.ibm.com

IBM has made several impovements in their homepage markup: so I want to give them credit after all blames I have made before....

I like usage of network path references,
even if it is not consistent across whole page.

Also usage of iepngfix, DD_belatedPNG.fix('#ibm-geo, #q, #ibm-search, .ibm-no-mobile');
is fancy, but, why they don't credit the original author ?

What I still hate is overuse of IDs, presentational classes and endless DIV nestings

<!-- LEADSPACE_BEGIN -->
<div class="ibm-container" id="ibm-leadspace-head">
<div class="ibm-container-body" id="ibm-leadspace-body">
<div class="ibm-columns" id="ibm-lead-1">
<div class="ibm-col-1-1">

<!-- LEADSPACE_END -->
<div id="ibm-pcon">
<div id="ibm-content">
<div id="ibm-content-body">
<div id="ibm-content-main">
<div id="ibm-news-feed">
<div id="ibm-news-feed-inner">

 
<!-- PROMOTION_BEGIN -->
<div class="ibm-container" id="ibm-promotion-module">
<div class="ibm-container-body">
<div class="ibm-columns">
<!-- ibm-col-6-2 ibm-expand-section: Z725354V02338R50 -->
<div class="ibm-col-6-2 ibm-expand-section">
<!-- B302493F36942F04 -->

I believe IBM has finally started to watch Web trends and tries to apply them to their
web design (at least to home page).

It is still very basic improvements,
but I wish them good luck!

Thanx for making my day nicer (even if you have changed this a couple of weeks ago, I have found time only today).

For dark ages see ora or ms homepage markup.
Watch and learn !

Client side XSS: document.write(location.href)

Is this safe ?
(C) www.orace.com

if (USER.guid) {
    document.write('Welcome ' + USER.firstname + ' ( <a class=profile href=https://myprofile.oracle.com/EndUser/faces/profile/sso/updateUser.jspx?nextURL=' + location.href + '\>' + 'Account' + '<\/a> | <a class=profile href=/us/corporate/contact/about-your-account-070507.html>' + 'Help' + '<\/a> | <a class=profile href=javascript:sso_sign_out();>' + 'Sign Out' + '<\/a> )');
}
else {
    document.write('<span class=profile>( ' + ' <a href=http://www.oracle.com/webapps/redirect/signon?nexturl=' + location.href + '>Sign In/Register for Account</a> ' + ' <span style=color: rgb(0, 0, 0)>|</span> ' + '<a href=/us/corporate/contact/about-your-account-070507.html>Help</a>' + ' )</span>');
}

UPDATE: 16.6.2011
Somehow they decided to fix it ? based on this article ? I dont believe so, if yes please next time give some credits by comment ;-)

if (USER.guid) {
    document.write('Welcome ' + USER.firstname + ' ( <a class=profile href=https://myprofile.oracle.com/EndUser/faces/profile/sso/updateUser.jspx?nextURL=' + encodeURI(location.href) + '\>' + 'Account' + '<\/a> | <a class=profile href=/us/corporate/contact/about-your-account-070507.html>' + 'Help' + '<\/a> | <a class=profile href=javascript:sso_sign_out();>' + 'Sign Out' + '<\/a> )');
}
else {
    document.write('<span class=profile>( ' + ' <a href=http://www.oracle.com/webapps/redirect/signon?nexturl=' + encodeURI(location.href) + '>Sign In/Register for Account</a> ' + ' <span style=color: rgb(0, 0, 0)>|</span> ' + '<a href=/us/corporate/contact/about-your-account-070507.html>Help</a>' + ' )</span>');
}

Any ideas now ?

Sass Mixin For HTML5 classes and their obsolete HTML4 equivalents

This

@mixin back-compat($prefix) {
 
 @each $h5tag in 
  article,
  aside,
  audio,
  canvas,
  command,
  datalist,
  details,
  embed,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  keygen,
  mark,
  meter,
  nav,
  output,
  progress,
  rp,
  rt,
  ruby,
  section,
  source,
  summary,
  time,
  track,
  video,
  wbr
 {
   .#{$prefix}#{$h5tag} {
  @extend #{$h5tag}; 
   }
 }
}

sample usage

@include back-compat("html5-");
article, section, ruby
{
  COLOR:red;
}

Generates:

article, .html5-article, section, .html5-section, ruby, .html5-ruby {
  COLOR: red;
}

Nice nice....