kevinleary.net

Enhancing CSS with JavaScript using Sizzle

A new con­cau­tion by John Resig called Siz­zle has recently caught my eye. It’s a series of JavaScript files that you can add to your web­site to improve your CSS capa­bil­i­ties by adding advanced CSS3 selec­tors. Best of all it works in all major browsers including:
Siz­zle Browser Support
Fire­fox 2.0+
Inter­net Explorer 6+
Safari 3+
Opera 9+
Chrome 1+
By using this library you can effec­tively do more with less CSS code, and even replace some of your JS and server-side logic.
A Few Com­mon Usage Scenarios
Strip­ing table rows (table tr:odd, table tr:even, etc.)
Grab spe­cific form fields (input:checkbox, input:radio, etc.)
Grab the first or last items in a list (#nav­i­ga­tion li:last, #nav­i­ga­tion li:first)
Grab the first item in a region (div p:first)
By using Siz­zle you’ll also become famil­iar with CSS3 selec­tors you’ve prob­a­bly never used, and will likely use in the future. In an ideal world we would all take the time to learn these and use them in our every­day work, but more often than not it’s sim­ple not pos­si­ble because of older browser’s and their lack of sup­port (Inter­net Explorer). By pro­vid­ing full sup­port of CSS3 in Inter­net Explorer 6 and up, Siz­zle helps to solve this issue.
Other Fea­tures
Pro­vides mean­ing­ful error mes­sages for syn­tax errors
Opti­mized for per­for­mance — only 4KB when gzipped and minified
Com­pletely stand­alone (no JavaScript library needed)
Cre­ated by a rock solid JavaScript devel­oper, expect to see enhance­ments well into the future.
I haven’t yet used Siz­zle, but based on most of John’s other work I think it sounds pretty promis­ing. I’ll be play­ing around with it in furure work, if any­one has any­thing to add please do.

Sizzle CSS Enhancement LogoA new con-caution by John Resig called Siz­zle has recently caught my eye. It’s a series of JavaScript files that you can add to your web­site to improve your JS Selec­tor capa­bil­i­ties, adding advanced CSS3 selec­tors to jQuery and other JavaScript libraries.

Siz­zle Browser Support

  • Fire­fox 2.0+
  • Inter­net Explorer 6+
  • Safari 3+
  • Opera 9+
  • Chrome 1+

By using this library you can effec­tively do more with less CSS code, and even replace some of your JS and server-side logic.

A Few Good Reasons

    By using Siz­zle you’ll also become famil­iar with CSS3 selec­tors you’ve prob­a­bly never used, and will likely use in the future. In an ideal world we would all take the time to learn these and use them in our every­day work, but more often than not it’s sim­ple not pos­si­ble because of older browser’s and their lack of sup­port (Inter­net Explorer). By pro­vid­ing full sup­port of CSS3 in Inter­net Explorer 6 and up, Siz­zle helps to solve this issue.

    Other Fea­tures

    • Pro­vides mean­ing­ful error mes­sages for syn­tax errors
    • Opti­mized for per­for­mance — only 4KB when gzipped and minified
    • Com­pletely stand­alone (no JavaScript library needed)
    • Cre­ated by a rock solid JavaScript devel­oper, expect to see enhance­ments well into the future.

    I haven’t yet used Siz­zle, but based on most of John’s other work I think it sounds pretty promis­ing. I’ll be play­ing around with it in furure work, if any­one has any­thing to add please do.

    No Comments

    No comments yet.

    Leave a comment

    will not be published

    Wrap code blocks with <pre lang="LANGUAGE" line="1"> and </pre> where LANGUAGE is a GeSHi supported language syntax.