Tuesday, July 05, 2011

CSS Lint – A Deeper Analysis For CSS Files: "
CSS Lint is an exciting open source project which helps finding the problems and inefficiencies in the CSS code.

As expected, it displays any parsing errors like mis-typed characters which may end-up in non-rendered rules.

CSS Lint

Other than that, CSS Lint checks for the common best CSS coding practices and warns you about the:

  • adjoining classes (which are problematic in IE7 and IE6)
  • empty rules which are inefficient
  • correct use of display (as some rules will be ignored if used together)
  • usage of too many floats, web-fonts and font-size declarations
  • heading styles to be declared once
  • and more..

The rules are pluggable, new ones can easily be added (the web interface is mentioned to be improved soon for making some checks optional).

As the website states "it will hurt your feelings but help coding better" : ).
Generate CSS For Sprite Images – Sprite Cow: "
With their increasing popularity, we are seeing more and more CSS sprite generators everyday.

Sprite Cow is another one which is open source and works very effective by auto-recognizing the different elements inside a single image.

So, you design the sprite image in your favorite imaged editing application, upload it to Sprite Cow and simply click (or click + drag) on each element to get their width, height and background-position as a CSS rule.

The application can select items in any size and also gives you the option of changing the background color.

Sprite Cow
Fractal: HTML-CSS Validation For E-mails: "
E-mail code validation is a painful job considering many e-mail clients/applications have a low-level HTML-CSS rendering support and many others have their own standards. Actually, it is worse than designing for the browser.

Fractal is a free-to-use web application for validating HTML-CSS code across 24 most-popular e-mail clients.

It simply works by pasting the code to the application and finding out if each line is validated, if not, why and in which e-mail clients.

Fractal

Best of all, Fractal doesn't come with only the bad news but also suggests fixes.

P.S. Besides the desktop and web-based e-mail applications, it also checks the code for the mobile as well.

CSS Color Spectrum Inspector – CSS Prism

CSS Color Spectrum Inspector – CSS Prism: "

While inspecting and editing a CSS file, it is not easy to understand which HEX value represents which color.


CSS Prism is a web-based CSS color spectrum inspector that loads the colors used in a CSS file as a grid and shows us in which rules they exist.


CSS Prism


The application also enables us to edit the colors with a color-picker and download the edited CSS file.


CSS Prism is very useful for easily viewing the color palette and making sure it is consistent.


Besides inserting the URLs of CSS files manually, a bookmarklet is provided that eases this process.