modernizr

Preface Let's pretend that a div is animated from opacity:0; to opacity:1; and i want to keep opacity:1; after the animation ends. That's what animation-fill-mode:forwards; does. @keyframes myAnimation { from { opacity:0; } to { opacity:1; } } div { opacity:0; animation-name:myAnimation; animation-delay:1s; animation-duration:2s; animation-fill-mode:forwards; }​ <div>just a test</div>​ Run it on jsFiddle Note 1: i didn't include the vendor prefixes here to simplify Note 2: that's just an example, please don't reply with "just use jQuery fadeIn function" etc. Some things to know In this answer

I'm trying to detect whether media queries are present using Modernizr 2, then loading in respond.js if appropriate. I've put this in my script.js file... Modernizr.load({ test: Modernizr.mq, yep : '', nope: 'mylibs/respond.js' }); What am I doing wrong? I'm really surprised there isn't an example of how to do this with Media Queries on the Modernizr site. Here is the version of Modernizr I'm using... http://www.modernizr.com/download/#-backgroundsize-borderradius-boxshadow-iepp-respond-mq-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load That's because !!Modernizr.mq ===

I am attempting to use the new Content Security Policy (CSP) HTTP headers on a test site. When I use CSP in conjunction with Modernizr I get CSP violation errors. This is the CSP policy I am using: Content-Security-Policy: default-src 'self'; script-src 'self' ajax.googleapis.com ajax.aspnetcdn.com; style-src 'self'; img-src 'self'; font-src 'self'; report-uri /WebResource.axd?cspReport=true These are the errors from the Chrome browser console: Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline'

Is it possible to detect if the browser has Html5 Audio support through Modernizr? If so how is this done? If not are there any work around's? There's few resources on Google explaining this, so any help would be appreciated. Yes, through modernizr.audio. It supports a number of audio formats (currently ogg, mp3, m4a & wmv). Example: var audio = new Audio(); audio.src = Modernizr.audio.ogg ? 'background.ogg' : Modernizr.audio.mp3 ? 'background.mp3' : 'background.m4a'; audio.play(); More info in the documentation . Yes, Modernizr detects audio support, according to the documentation (that's a

Is there a way that I can use the CSS3 'Background-Size' property and then use something like Modernizr to ensure that it's supported in older browsers (in particular I want to use 'background-size: cover' option)? I took a look at cssFx, which is mentioned from the Modernizr website, but this only seems to add vendor prefixes for browsers which need them to use a property, rather than allowing browsers such as IE8 to support the background size property. Also looked at CSS3Pie, but that doesn't seem to currently support the background-size property. [11/10/2011 - By older browsers I'm