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

Simulation jsFiddle.net

Source : make an input invisible but clickable through CSS?

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.

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.

[HTML] Les commentaires conditionnels sous IE

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

[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

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?

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.

© 2020 devfrontend.info

Theme by Anders NorénUp ↑