Would jQuery over ride CSS?

[Ash149]

Ello!

So i’ve just finished up a website (almost) and basically, got a lot of hover effects going on (changing color etc) and it uses CSS transitions and it looks really nice in Firefox/Safari & Chrome but internet explorer doesn’t seem to transition things, guessing it doesn’t have the support for that.

So I really want people using IE to see the transitions and thought I would write some jQuery to do so, so what I’m gonna do is write the jQuery in an IE only page (so other browsers don’t use it) then basically, if I make it so when you hover over a h2 it animates from white to pink, will that animation replace the CSS which is to change it from white to pink using the hover class?

Hope i’m making sense! Basically, at the moment in IE if you hover over something it changes automatically, but if I use jQuery to animate it, then you will see the animation, yes? Or will you still see it change instantly?

Thanks everyone,

Ashley

[OniLinkCR]

If it’s an absolute must for you, do it like Paulie suggest, include the JS within the conditional statement. I do this for some styling stuff I do (mostly n-odd and n-even markup).

To me this isn’t critical and as such, it can stay as is, normal.

[Derek]

Why don’t you jQuery for the transitions on all of the browsers?

[Roxon]

Or you could just do CSS3 cross-browser right.
http://www.modernizr.com/

[Ash149]

Roxon, I’ve had a look at the link you provided and from what I gather (my knowledge on javascript isn’t all that great) basically what that does is add a class to the HTML based on whether or not the browser supports a certain CSS3, such as border-raidus, so if it did not support it, it would place ‘noborderradius’ in the HTML class and therefore if you wanted to style what things would look like without the border-radius you would just in your CSS place:

.noborderradius #whateveryouwant {alternative style}

what i don’t get is how to use those polyfils and how you would get a jquery file for no-transitions?

If you could make sense of anything I’ve written and let me know if I’m on the right track that would be great thanks, gonna go back to reading about this modernizr now!

Thanks a lot!

[Chris Coyier]

@Ash149 – You totally get how Modernizr works for CSS, but it ALSO has detection on the JavaScript side, so you can run tests there. Basically you’d wrap your JavaScript that simulates the effect in a test.

if (!Modernizr.thingToTest) {



// Simulate CSS effect with JS



}

For the record, if you used a CSS animation AND a jQuery animation on an element that supported both, it would be problematic.

[Ash149]

Ok, thanks for the clarification Chris, that makes a lot more sense now, one more thing though is, I’ve put the modernizr in my head and made sure it’s all working as it should be, however, it isn’t adding anything to the HTML? my HTML is still just

I saw something on a tutorial about adding “class=”no-js” ” to the HTML but it didn’t do anything it just stayed the same?

The website is definitely using the modernizr.js file as it has fixed the website in internet explorer (the sites in HTML5).

Or does modernizr no longer add to the HTML or something? Therefore you just get the class from the website perhaps?

Thanks again Chris!

[Ash149]

Oops! ok this is weird, I had been viewing the source in Chrome before I posted that and it hadn’t been showing the HTML classes, I just looked in Firefox using firebug and I can see all the classes it has added so I guess I’ve got this solved now then :)

Sorry about the post above, I have no idea why Chrome view source wasn’t showing the classes it had added!

Thanks everyone for your help!

[Ash149]

Oh and one more thing, last question I promise!

The code you used Chris,

if (!Modernizr.thingToTest) {



// Simulate CSS effect with JS



}

Is this basically say, if the class ‘thingToTest’ exists, do this following code, or is it saying, if the class ‘thingToTest’ does not exist, do this following code?

So for instance, if you used CSS to do the border-radius on something, but then if they were using internet explorer 8 or below you could have this:

if (!Modernizr.no-borderradius) {



If I've got this right, this code here will only be used IF no-borderradius is a class given to the HTML, and in here I can link to a certain CSS file or JS file, correct?



}

Am I right? :)

Thanks Chris.

[Author]

Posts