I was looking for some Javascript tools, and reading some books, like “Hardboiled Web Design”, by Andy Clarke, and i found these two wonderful tools to improve our web designs and our developments, using the latest web technologies, getting more control over how are our sites rendered in less capable browsers.
Modernizr
Modernizr is a javascript library that allows us to have more control over the use of CSS3 and HTML5. This library detects browser CSS3 and HTML5 support and add classes to the <html> tag in our web documents. This way we can reference any element inside the document and modify it using CSS styles so it will be shown fine in web browsers that doesn’t have support for these new tecnologies.
For instance, at the moment i’m writing this article, i’m using Firefox 3.6.13. Thanks to Modernizr, the html tag of the webpage i’m looking for is the following:
<html lang="en" dir="ltr" id="modernizr-com" class=" js flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths"> |
In this case, we can see that Firefox supports CSS3 colums (csscolums) but it does not support reflections (no-cssreflections).
So let’s suppose we are designing a webpage with CSS gradients, but we want to show a particular background color for those people using olders browser lacking of CSS3 support. The css style would be the following:
.no-cssgradients #elemento { background-color: color; } |
So if the browser doesn’t support CSS3 gradients, Modernizr wil add .no-cssgradients to the html tag and this selector will be validated. Finally, this style will be rendered.
Sitio oficial: http://www.modernizr.org
Selectivizr
Some browsers, like Internet Explorer (6 to 
don’t have complete support for CSS selectors, but thanks to this library we’ll be able to apply those selectors without much troubles. This way we can make use of all the benefits that CSS3 selectors and pseudoselectors give us.
To enable selectors support, Selectivizr uses almost any Javascript framework available, such as JQuery, Mootools or Prototype. Depending of what framework are we using it will be the support that Selectivzr enables. In the official website we can find a comparative table about this issue.
Sitio oficial: http://selectivizr.com/