polyfill – devfrontend.info

[CSS] Rendre un input type radio ou checkbox invisible mais cliquable

26/02/2016 / admin

Source : make an input invisible but clickable through CSS?

input {
  opacity: 0;
}

input {

opacity: 0;

}

Changer les dimensions d’un input type radio ou checkbox

Sources : How to change the size of the radio button using CSS? et Styling radio buttons with CSS.

input[type=radio] {
  border: 0px;
  width: 100%;
  height: 2em;
}

input[type=radio] {

border: 0px;

width: 100%;

height: 2em;

}

Attention : sous Firefox, l’élément ne grossit pas visuellement, mais la zone cliquable oui 🙂

Cette technique est intéressante si on cherche à cacher un champ radio ou checkbox sous un élément qui le remplacerait visuellement (habillage spécifique de l’UI).

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9

La propriété CSS pointer-events n’est pas prise en charge par IE9 (et plus anciens). Un polyfill en jQuery nommé Pointer Events Polyfill (source GitHub) existe et fonctionne très bien.

/*
 * Pointer Events Polyfill: Adds support for the style attribute "pointer-events: none" to browsers without this feature (namely, IE).
 * (c) 2013, Kent Mewhort, licensed under BSD. See LICENSE.txt for details.
 * https://github.com/kmewhort/pointer_events_polyfill
 */

// constructor
function PointerEventsPolyfill(options){
    // set defaults
    this.options = {
        selector: '*',
        mouseEvents: ['click','dblclick','mousedown','mouseup'],
        usePolyfillIf: function(){
            if(navigator.appName == 'Microsoft Internet Explorer')
            {
                var agent = navigator.userAgent;
                if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null){
                    var version = parseFloat( RegExp.$1 );
                    if(version < 11)
                      return true;
                }
            }
            return false;
        }
    };
    if(options){
        var obj = this;
        jQuery.each(options, function(k,v){
          obj.options[k] = v;
        });
    }

    if(this.options.usePolyfillIf())
      this.register_mouse_events();
}

// singleton initializer
PointerEventsPolyfill.initialize = function(options){
    if(PointerEventsPolyfill.singleton == null)
      PointerEventsPolyfill.singleton = new PointerEventsPolyfill(options);
    return PointerEventsPolyfill.singleton;
};

// handle mouse events w/ support for pointer-events: none
PointerEventsPolyfill.prototype.register_mouse_events = function(){
    // register on all elements (and all future elements) matching the selector
    jQuery(document).on(this.options.mouseEvents.join(" "), this.options.selector, function(e){
       if(jQuery(this).css('pointer-events') == 'none'){
             // peak at the element below
             var origDisplayAttribute = jQuery(this).css('display');
             jQuery(this).css('display','none');

             var underneathElem = document.elementFromPoint(e.clientX, e.clientY);

            if(origDisplayAttribute)
                jQuery(this)
                    .css('display', origDisplayAttribute);
            else
                jQuery(this).css('display','');

             // fire the mouse event on the element below
            e.target = underneathElem;
            jQuery(underneathElem).trigger(e);

            return false;
        }
        return true;
    });
};

* Pointer Events Polyfill: Adds support for the style attribute "pointer-events: none" to browsers without this feature (namely, IE).

* https://github.com/kmewhort/pointer_events_polyfill

// constructor

function PointerEventsPolyfill(options){

// set defaults

this.options = {

selector: '*',

mouseEvents: ['click','dblclick','mousedown','mouseup'],

usePolyfillIf: function(){

if(navigator.appName == 'Microsoft Internet Explorer')

{

var agent = navigator.userAgent;

if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null){

var version = parseFloat( RegExp.$1 );

if(version < 11)

return true;

}

return false;

}

};

if(options){

var obj = this;

jQuery.each(options, function(k,v){

obj.options[k] = v;

});

}

if(this.options.usePolyfillIf())

this.register_mouse_events();

}

// singleton initializer

PointerEventsPolyfill.initialize = function(options){

if(PointerEventsPolyfill.singleton == null)

PointerEventsPolyfill.singleton = new PointerEventsPolyfill(options);

return PointerEventsPolyfill.singleton;

};

// handle mouse events w/ support for pointer-events: none

PointerEventsPolyfill.prototype.register_mouse_events = function(){

// register on all elements (and all future elements) matching the selector

jQuery(document).on(this.options.mouseEvents.join(" "), this.options.selector, function(e){

if(jQuery(this).css('pointer-events') == 'none'){

// peak at the element below

var origDisplayAttribute = jQuery(this).css('display');

jQuery(this).css('display','none');

var underneathElem = document.elementFromPoint(e.clientX, e.clientY);

if(origDisplayAttribute)

jQuery(this)

.css('display', origDisplayAttribute);

else

jQuery(this).css('display','');

// fire the mouse event on the element below

e.target = underneathElem;

jQuery(underneathElem).trigger(e);

return false;

}

return true;

});

};

[HTML] Les commentaires conditionnels sous IE

29/07/2015 / admin

Source : How To Create an IE-Only Stylesheet, Conditional comments.

En complément : Browserhacks – An extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.

Ajouter une classe à l’élément `body` pour IE uniquement

<!--[if IE ]>
   <body class="ie">
<![endif]-->
<!--[if !IE]>-->
   <body>
<!--<![endif]-->

<!--[if IE ]>

<![endif]-->

<body>

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

<!DOCTYPE html>

<html dir="ltr" lang="en-US" class="no-js">

[Bootstrap 3] Un fix simple pour bénéficier de la grille responsive sous IE8 avec les polyfills html5shiv.js et respond.js appellés depuis le CDN

01/12/2014 / admin

Source : http://support.ourboard.org/viewtopic.php?f=80&t=2358Simple Fix for IE8 Responsive Features not Working with Twitter Bootstrap 3 from CDN.

You want to get started with Twitter Bootstrap 3 and you want to make use of the CDN provided because it lessens the demands on your server and delivers resources fast. Everything goes well … until you test responsive features in IE8, only to find them not working. This is simply because

You look at the documentation and find that you have two choices:

Host the bootstrap CSS on your own server.
Use a proxy, to make respond.js work cross-domain.

Some people have found alternatives to respond.js but these are regarded as slower and still need to be hosted and served.

If you are using the MaxCDN option, you do not have access to the CDN in order to upload your proxy. In short, the whole lot is rather self-defeating. You want the CDN and you want IE8 to work.

Step back a little … respond.js attempts to reload the bootstrap CSS via AJAX, when all that is not working is the @media query in IE8. The simple solution is to serve a cut-down version of the CSS, with only the @media queries, to IE8 and below, from a local source. This is slightly inefficient because it is serving the same CSS twice but it is more efficient because it is only re-serving approx 15% of the payload. You get the best of all worlds.

How do you apply it?

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<link href="bootstrap4ie8.css" rel="stylesheet">
<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

You can make your own bootstrap4ie8.css by stripping down your version of boostrap.css. You can probably optimize it further by removing parts you do not use.

Articles récents

Catégories

Archives

Méta

Étiquette : polyfill

[CSS] Rendre un input type radio ou checkbox invisible mais cliquable

Changer les dimensions d’un input type radio ou checkbox

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9

[HTML] Les commentaires conditionnels sous IE

Ajouter une classe à l’élément `body` pour IE uniquement

[Bootstrap 3] Un fix simple pour bénéficier de la grille responsive sous IE8 avec les polyfills html5shiv.js et respond.js appellés depuis le CDN

Changer les dimensions d’un input type radio ou checkbox

Un polyfill pour émuler les effets de la propriété CSS pointer-events sous IE9

Ajouter une classe à l’élément body pour IE uniquement

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9

Ajouter une classe à l’élément `body` pour IE uniquement