Comments on: How to use Modernizr

By: Tarun Sharma

Tarun Sharma — Fri, 03 Feb 2012 03:55:56 +0000

element {
background: image // for browser not support gradients
background: gradients // for browser not support gradient
}

with modernizr a cool way and easy to understand when you or any other modify your CSS someday

element {
background: gradient
}

.no-cssgradients element {
background: image
}

By: Tarun Sharma

Tarun Sharma — Fri, 03 Feb 2012 03:53:57 +0000

No problem Ashish :)

Go to modernizr official site and read it’s manual it’s really cool :)

Now i can’t start any project without implement it. It’s very light weight you can include script according to your needs( not need to use all bundle like other APIs). Also they including some cool scripts like yapnope.js etc.

And Best think is coding standard for example when you use in your script

element {
background: image // for browser not support gradients
background: gradients // for browser not support gradient
}

with modernizr

element {

}

.no-cssgradients element {
background: image
}

By: Ashish

Ashish — Thu, 02 Feb 2012 18:37:29 +0000

I think we can do this using conditional CSS only. But you are right, this will be very lengthy. Thanks, I got it now a little bit…

Will work more on it. thanks tarun!!

By: Tarun Sharma

Tarun Sharma — Thu, 02 Feb 2012 16:08:41 +0000

@Ashish, I think you not read my comment carefully. Can you tell me how can you do same thing as in my example above by only CSS

By: Ashish

Ashish — Thu, 02 Feb 2012 12:47:37 +0000

@Tarun, thanks for you kind comment. But this all can be done by CSS as well, right? Then why we need to add the modernizr.js?

I am still not getting this….

By: Tarun Sharma

Tarun Sharma — Thu, 02 Feb 2012 11:38:38 +0000

Modernizr test conditions and apply CSS accordingly or return true or false in javascript for support of HTML5 APIs. It’s save your time to find that browser support any css or HTML5 API or not.

It’s help in some conditions for example you want to apply shadow in a div have same color as background. It’ll look cool in browsers support box-shadow, But what about the browsers not support it?

In that case you can use condition if your browser support box-shadow then apply shadow and if not then apply a border in it, so that at-least it not merge with your background

By: Ashish

Ashish — Wed, 01 Feb 2012 12:04:18 +0000

The single question is, if A BROWSER doesn’t supports the CSS3, will never support by using modernizr.js too. And if A BROWSER is already supporting this, will keep supporting these CSS3 properties. then why to add modernizr.js?

By: Tarun Sharma

Tarun Sharma — Mon, 23 Jan 2012 09:20:24 +0000

ya of course it is :)

If you find any issue like jQuery conflict, you can use .noConflict()

for reference:
http://www.mkyong.com/jquery/jquery-is-not-working-in-wordpress-solution/

By: Tarun Sharma

Tarun Sharma — Mon, 23 Jan 2012 09:18:17 +0000

No problem Ali :)

Ya that website is really cool, but it’s not mine.

And you not need to use different css for IE6 or any other browser at all :)

By: Ali

Ali — Mon, 23 Jan 2012 09:10:09 +0000

Thank You Tarun!

I checked out your Website, it’s really good. It helped me fix the problem :D

Before I was temporarily using a separate css for IE6 to point to GIF versions of the image instead.

Now I can get it to display the original png file.

Thanks again mate.