Unhandled Perception

Features

• Completely standalone (no library dependencies)
• Competitive performance for most frequently used selectors
• Only 4KB minified and gzipped
• Highly extensible with easy-to-use API
• Designed for optimal performance with event delegation
• Clear IP assignment (all code held by the Dojo Foundation, contributors sign CLAs)

Link: http://sizzlejs.com/

This tutorial is based on a simple animated experiment that showcases just one of the amazing things you can create using CSS. I’ve used no images and no scripting; everything’s done using HTML and CSS.

Link: http://sixrevisions.com/css/css3…

Today we are making an Advanced Event Timeline with the help of PHP, MySQL, CSS & jQuery, that will display a pretty time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.

Link: http://tutorialzine.com/…

CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.

Keeping your CSS stylesheets clean…

Link: https://addons.mozilla.org/…

Another reference guide released. The CSS3 reference guide is meant to compliment the HTML5 reference guide that I just released.

Link:

http://www.veign.com/reference/css3-guide.php

• all - Suitable for all devices.
• braille - Intended for braille tactile feedback devices.
• embossed - Intended for paged braille printers.
• handheld - Intended for handheld devices (typically small screen, limited bandwidth).
• print - Intended for paged material and for documents viewed on screen in print preview mode.
• projection - Intended for projected presentations, for example projectors.
• screen - Intended primarily for color computer screens.
• speech - Intended for speech synthesizers.
• tty - Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the “tty” media type.
• tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Just in case you were wondering the media types you can target your Stylesheets to.

Welcome to the IE6 CSS Fixer: starter kit page. A tool specifically designed to ease the pain of the ie6 css debugger. If you want to read up on all the specifics, I advise you to check the articles on the ideology, the specific fixes and the scope of this tool.

Every little bit helps even though a true understanding of CSS and XHTML can make working with IE6 not too bad.

Link:
http://www.onderhond.com/tools/ie6fixer

sIFR: sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.

cufon: In reality the generator is little more than a web-based interface to FontForge. First, the generator builds a custom FontForge script based on user input and then runs it, saving the result as an SVG font. The SVG font is then parsed and SVG paths are converted to VML paths.

HTML email inline styler will convert a webpage with CSS rules to a webpage using inline styles. This inline style format is what is required for sending email newsletters and this online tool can save you the headaches of manually converting.

Link:
http://inlinestyler.torchboxapps.com/

I feel better after running some of my CSS code through the CSS Formatter and Optimiser as there wasn’t a whole lot that it did. Warned about using bold instead of a number, which is weird as I rather have it say bold as it better dictates intent.

If your not familiar with optimizing CSS, you should run your code through just to check.

Link:
http://floele.flyspray.org/csstidy/css_optimiser.php

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them:
Do you really understand them? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one.

CSS Sprites: Image Slicing’s Kiss of Death:
Specifically, we’re going to replace old-school image slicing and dicing (and the necessary JavaScript) with a CSS solution. And because of the way CSS works, we’re going to take it further: by building a grid of images and devising a way to get each individual cell out of the grid, we can store all buttons/navigation items/whatever we wish in a single master image file, along with the associated “before” and “after” link states.

CSS Sprite Generator:
This tool allows you to automate the process of generating CSS sprites. Simply give it a ZIP file containing 2 or more images (GIF, PNG or JPG) and it will generate a sprite image and the corresponding CSS rules to target and display each component image.

cloc counts blank lines, comment lines, and physical lines of source code in many programming languages. It is written entirely in Perl with no dependencies outside the standard distribution of Perl v5.6 and higher (code from some external modules is embedded within cloc) and so is quite portable.

Works great for comparing two projects. Recently I went through a code refactor on a project and I needed to give some information back to the client. CLOC made it simple to give a report as to the before and after counts. The before was approx 240K lines of code and the after was about 81K with zero changes to functionality.

Link:
http://cloc.sourceforge.net/

This is a great way to look at a website and see what links are tagged as NoFollow, meaning the link will not count as a vote in Google. This is a must on your website if you don’t want to be penalized for linking to know spammer sites or what Google calls a ‘Bad neighborhood’. With this little Firefox hack you can quickly see what links have been tagged – for reviewing your website or any other.

Link:
http://www.mattcutts.com/blog/seeing-nofollow-links/

Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap!

Link:
http://www.smashingmagazine.com/…