modernizr

SVG/PNG extension switch

由 戏子无情 提交于 2019-12-05 13:24:49
Is there a way to use SVG images on my site and if browsers/devices do not support it, switch the extension to png? Is there a better way to do this? Note: I am using the <img> tag and Modernizr. Here is my code that spits out the images dynamically. <?php $attachments = attachments_get_attachments(); ?> <?php if( function_exists( 'attachments_get_attachments' ) ) { $attachments = attachments_get_attachments(); $total_attachments = count( $attachments ); if( $total_attachments ) : ?><?php for( $i=0; $i<$total_attachments; $i++ ) : ?> <img src="<?php echo $attachments[$i]['location']; ?>" alt="

Using Modernizr library, why does it add classes to the html tag

由 萝らか妹 提交于 2019-12-05 10:51:53
Can anyone explain (because the github page doesn't) why Modernizr feels the need to add all of those classnames to the HTML tag ? After loading Modernizr, it looks like this: <!doctype html> <html class=" js flexbox canvas canvastext webgl ~~~~ etc etc I see no explanation at all why it wants to do that. Modernizr provides properties to let me know whether for example canvas is supported (Modernizr.canvas == true?). Are those html classnames added for a test that's easier than that? pawel These class names are meant to be used in your CSS code, so you can add fallback styles in case a feature

Modernizr load method

由 99封情书 提交于 2019-12-05 05:51:59
问题 I've problems with Modernizr load. I'm using Modernizr, jQuery and Nivo-slider. Sometimes when i refresh my homepage my slider don't appear correctly, sometimes everything is great. Is my method is the right thing to do ? HTML : <!-- SCRIPTS --> <script type="text/javascript" src="js/plugins/modernizr-2.0.6.js"></script> <script type="text/javascript" src="js/master.js"></script> In master.js : Modernizr.load([ { load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',

Can modernizr load scripts asynchronously but execute them in order?

由 允我心安 提交于 2019-12-05 04:55:12
I'm experimenting with Modernizer.load. I have this: Modernizr.load([ { load : ['/js/jquery-1.6.1.js', '/js/jquery.tools.min.js', '/js/myscript.js'] } ]); If I understand correctly, I can use code like this to load scripts asynchronously. However, can I then execute them in order? What if myscript.js requires the jquery object to be loaded first? In the example in the modernizr documentation, load([]) can take a 'complete' property, the parameter of which can be a function that can load another script when everything else is done. However, if I use a function here to load my post-dependancy

Modernizr.touch returns true on firefox browser

由 陌路散爱 提交于 2019-12-05 02:29:17
I have written a peace of code to get the event based on touch and non-touch. Its working all other browsers and devices, but Firefox. Default FF return the true . var thumbsEvent, isTouch = Modernizr.touch; // detect the touch if(isTouch){ thumbsEvent = 'click';//on touch surface, click } else { thumbsEvent = 'mouseover';//on non touch surface, mouseover } Is there a way to manage this issue. Example fiddle On behalf of Modernizr - We're really sorry about this. Modernizr.touch has been renamed Modernizr.touchevents in the yet-to-be-released version 3.0, as it is a far more accurate

Remove all hover effects through css

由 吃可爱长大的小学妹 提交于 2019-12-05 02:27:57
When I come down on touch devices I don't want the hover behavior. Is it possible to disable all hover effects at once for a whole website? Given that you use Modernizr to detect touch and set the class. This is what I came up with but it gives a lot of inconsistency: html.touch *:hover { color: inherit !important; background: inherit !important; } Is there a way to do this with pure CSS? If not, how can it be done with javascript? This is good but not supported very well: html.touch *:hover { all:unset!important; } But this has a very good support : html.touch *:hover { pointer-events: none

RequireJS: Conditionally Load Polyfill Using Modernizr

由 孤人 提交于 2019-12-04 21:53:25
How do you wrap a polyfill script as an AMD module and conditionally load it using Modernizr and RequireJS? (Figured it out while I was drafting my question - posting answer for anyone else trying to do the same thing.) The polyfill I needed to load was jquery-placeholder for browsers that don't support input placeholders. It does not provide AMD support out of the box. First I wrapped it as an AMD module like this: define(['jquery'], function ($) { (function(window, document, $) { ... polyfill ... }(this, document, jQuery)); }); Then in main.js I used Modernizr to conditionally require() the

Load external Google Fonts stylesheet with YepNope/Modernizr

由 我只是一个虾纸丫 提交于 2019-12-04 17:25:33
I'm trying to load a dynamically generated Google Font stylesheet using Modernizr (YepNope) but always get this error: Uncaught SyntaxError: Unexpected token ILLEGAL (css:1) My stylesheet looks like this: http://fonts.googleapis.com/css?family=Holtwood+One+SC and I'm calling it via Modernizr.load({ load: ['css!http://fonts.googleapis.com/cssfamily=Holtwood+One+SC|Terminal+Dosis:700'], callback: function (url, result, key) { console.log('loaded...!'); } }); The website says this but for some reason it just won't work. I think the resource is parsed as a script file and that's what cause the

Detect support for background-attachment: fixed?

由 早过忘川 提交于 2019-12-04 16:06:49
问题 Is there a way to detect browser support for background-attachment: fixed? Edit: Although this feature is widely supported on desktop browsers it is poorly supported on portable devices which I why I would like to be able to detect the feature. 回答1: When you use { background-attachment:fixed } current mobile devices will not display the background image at all! To ensure the image is displayed on all mobile devices, you need to test for support, and if not supported to set the background

Yepnope & Modernizr screen.width Conditions

由 别来无恙 提交于 2019-12-04 14:27:41
I am trying to (locally) use Yepnope with Modernizr to load CSS & JS Files. So I can manage the files better, and code easily. This is the currently layout: Modernizr.load([ { test: Modernizr.mq('all and (max-width: 1070px)'), yep: '/css/smartdevice.css','/js/smartdevice.js', } , { test: Modernizr.mq('all and (min-width: 481px) and (max-width: 1069px)'), yep: '/css/tablet.css','/js/tablet.js', }, { test: Modernizr.mq('all and (max-width: 1070px)'), yep: '/css/screen.css','/js/screen.js', } ]); The I am fairly new to JS but I have used jQuery on may occasions. However they all load at once, is
订阅 modernizr