Bookmarklet is a very important piece of my development. Lately, I've been using the following:

1. ReCSS

   Super B tool, used to reload your css without refreshing the whole page. It's very useful if you want to change a website in production that you can't run locally.

2. Firebug Lite

   

   If you develop websites in different browsers like I do (webkit nightly build), and can't live without Firebug; Firebug Lite is the way to go. It isn't as powerful as the Firebug add-on but it does a good job if you need to use the console or check for applied styles. Unfortunately, there is no way to change the css on the fly.

3. Design

   

   A very cool set of design tools. It includes grid, rule, unit and crosshair. A must have if you are designing in the browser.

4. jQuerify

   As expected, it includes jQuery to the page. Very useful if you want to use firebug's console and jQuery selectors.

5. Favelet Suite

   If you are a fan of the web developer toolbar add-on for Firefox, you will love this tool.

6. xRay

   It displays CSS information of a selected object.

7. Microformats

   

   Every time I markup a page, I try to use microformats as much as possible. This bookmarklet gives you a list of vCard on the page. Unfortunately, it doesn't display any other micro data.

If I missed any other bookmarklet, feel free to leave a comment with the link to it.

Keith's Example using jQuery:
jQuery(function($) {
$('body').addClass('hasJS');
});

CSS
.hasJS .module {
display: none;
}

Why add a class if JavaScript is enabled?

Although the majority of desktop users have JavaScript enabled, mobile is one of the most used platforms to surf the web. Some mobile browsers don't support JavaScript. Keep in mind that search engines don't run JavaScript, so NEVER add important content using JavaScript.

My current project at work requires the content to be rendered for both enabled and disabled JavaScript browsers. I did a bit of research and found that most websites/solutions add the hasJS class to the body after the DOM is loaded. My first thought was, if the class gets added after the DOM is loaded, a shift on the page will occur providing a bad user experience. Yahoo was a site I researched and they have, IMHO, the cleverest solution of them all. They add the class to the HTML element instead of the BODY element. The first script block on the page to be loaded adds the hasJS class without dependency on libraries. Note: Yahoo uses another class name "jsenabled".

You might be asking why add the class to the HTML element? I think it makes more sense because the BODY is the beginning of the content. This means that everything after the body is "visible" to the user and blocking the content with a script tag isn't a good optimization practice. Here is the code to add the hasJS class to the body:

hasJS Script Block
<script type="text/javascript">
  document.getElementsByTagName('html')[0].className = 'hasJS';
</script>

NOTE: If you already have more classes on the HTML element, use document.getElementsByTagName('html')[0].className += ' hasJS'; instead.

New Easy-Clearing
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Using conditional comments, let's add the proper code to handle IE 6 and IE 7 (IE8 supports the :after pseudo-elements; no extra code is necessary).

New Easy-Clearing for IE
/* IE6 */
* html .group { height: 1%; }

/*IE7 */
.group { min-height: 1px; }

I've been using the group class on my latest projects and I'd like to share a small tip, when clearing list items, with you.

Normally, we'd have the group class on every LI, like so:

Clearing List Items the Old Way
<ul class="comments">
  <li class="group">
    <img src="carla.jpg" alt="Carla&#x27;s Picture" />
    <p>Tiny and I miss you</p>
  </li>
  <li class="group">
    <img src="steven.jpg" alt="Steven&#x27;s Picture" />
    <p>I need a favor! It will take you 5 seconds.</p>
  </li>
  <li class="group">
    <img src="buzz.jpg" alt="Buzz&#x27;s Picture" />
    <p>I speak gibberish</p>
  </li>
</ul>

Although the markup doesn't look very bad, we can make things better by introducing a new class (groupList) and adding it to the UL.

Clearing List Items the New Way
<ul class="comments groupList">
  <li>
    <img src="carla.jpg" alt="Carla&#x27;s Picture" />
    <p>Tiny and I miss you</p>
  </li>
  <li>
    <img src="steven.jpg" alt="Steven&#x27;s Picture" />
    <p>I need a favor! It will take you 5 seconds.</p>
  </li>
  <li>
    <img src="buzz.jpg" alt="Buzz&#x27;s Picture" />
    <p>I speak gibberish</p>
  </li>
</ul>

Phew, the markup looks much cleaner! Now that we've fixed it, let's add the .groupList > li selector to the existing .group styles.

Extending .group
.groupList > li,
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Wait! How about the beloved IE?

Extending .group IE
/* IE6 */
* html .groupList li,
* html .group { height: 1%; }
* html .groupList li li { height: auto; } /* Resets nested LIs */

/*IE7 */
.group > li,
.group { min-height: 1px; }

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• Internet Explore 7 & 8
• Internet Explore 6

The most efficient way that I found to declare RGBa values is to separate the flat colors into code block, and keeping RGBa with the other styles. Like in this example:

CSS
/* NON RGBa BROWSERS
  ------------------------------------------------------ */
#wrap { background-color: #000; }
#footer,
#header { background-color: #ccc; }
.section { color: #fff; }

/* HEADER
  ------------------------------------------------------ */
#header { background-color: rgba(204,204,204,.8); }
#header ul { float: right; }
#header li {
  float: left;
  margin-left: 1em;
}
#header li:first-child { margin-left: 0; }

/* WRAP
  ------------------------------------------------------ */
#wrap {
  width: 960px;
  margin: 0 auto;
  background-color: (0,0,0,.7);
}
.section {
  padding: 1em;
  color: rgba(255,255,255,.9);
}

I always keep the flat colors separated because they can be easily removed when the other browsers start supporting RGBa. Why didn't I declare the HEX colors on the same line as the RGBa? Simple! IE doesn't support it; no color will be rendered at all. Note: Please be aware that the RGBa colors have to be the last ones declared.

DOESN'T WORK IN IE
/* HEADER
  ------------------------------------------------------ */
#header {
  background-color: #ccc;
  background-color: rgba(204,204,204,.8);
}

Last but not least, when I use border's shorthand syntax, I declare it with the flat colors first, and then border-color afterward. See the example bellow for better understanding.

CSS
/* NON RGBa BROWSERS
  ------------------------------------------------------ */
#header { border: 1px solid #000; }

/* HEADER
  ------------------------------------------------------ */
#header { border-color: rgba(0,0,0,.7); }

Browser Support

• Firefox 3.0+
• Safari 3.0+
• Chrome 1+
• Opera 10+