Support multi navigateur
Genève, 9 mars 2015
Commentaires conditionnels
<!--[if IE]>
Ici votre code HTML réservé à IE.
<![endif]-->Hack CSS
balise
{
margin: 15px; /* Pour les autres navigateurs */
ma\rgin: 20px; /* Pour IE6 et IE7 */
}Hack CSS
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }Difficile à maintenir
dans la plupart des cas
Feature detection
Modernizr
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});Polyfill
HTML5 features
- input types (tel, email...)
- input attributes (placeholder, required...)
- local storage
<html class=“js canvas canvastext no-geolocation rgba
hsla multiplebgs borderimage borderradius boxshadow opacity
cssanimations csscolumns cssgradients cssreflections csstransforms
csstransforms3d csstransitions video audio localstorage sessionstorage
webworkers applicationcache fontface”>CSS3 features
.csscolumns ol.features {
-moz-column-count: 2;
-webkit-columns: 2;
-o-columns: 2;
columns: 2;
}
.no-csscolumns ol.features {
float: left;
margin: 0 0 20px;
}
.no-csscolumns ol.features li {
float: left;
width: 180px;
}Modernizr.mq('only all and (max-width: 400px)')Media query testing
Boilerplate
?
Audrey Lièvremont
@alievremont
support multi navigateur
By Audrey Lièvremont
support multi navigateur
Human talks mars 2015
