MS Tech Days 2013
Ils sont ouvert et libre,
tous les navigateurs essayent de les mettres en oeuvre.
il s'agit de HTML, CSS, JavaScript
Mais aussi : HTTP, SVG, ARIA, etc.
De HTML4 à HTML5
Attention aux vieux navigateurs
De CSS2.1 à CSS3
L'enfer des préfix
Attention terrain miné !
C'est un agrégat de technologies différement supportées :
ECMAScript, DOM, et plein d'autres API
Faire en sorte qu'un site soit visible et utilisable quelque soit le contexte de consultation.
Méchanisme CSS permettant de selectionner une feuille de style en fonction des caractéristiques du média de diffusion du contenu.
@media screen and (min-device-width: 1024px) {
/* Vos styles pour les grands écrans ici */
body {
font-size: 120%;
}
}
<link rel="stylesheet" href="style.css"
media="screen and (min-device-width: 1024px)">
Les navigateurs mentent sur qui ils sont,
il vaut mieux leur demander ce qu'ils savent faire
A voir : Les User Agents, c'est le mal
<!DOCTYPE html>
<html class="no-js">
<title>Sans modernizr</title>
<!DOCTYPE html>
<html class="js canvas no-webgl">
<title>Avec modernizr</title>
<script src="js/modernizr.js"></script>
<script>
console.log(Modernizr.canvas);
console.log(Modernizr.webgl);
</script>
Modernizr.load([
{
test : Modernizr.websockets && window.JSON,
// yep : 'debug.js'
nope : 'functional-polyfills.js',
both : [ 'app.js', 'app.css' ],
complete : function () {
myApp.init();
}
},
'post-analytics.js'
]);
if(Modernizr.mq("screen and (min-device-width: 1024px)") {
document.body.style.fontSize = "120%";
}
.rgba p {
color: rgba(255,255,255,.5);
}
.no-rgba p {
color: #CCCCCC;
}
p {
color: #CCCCCC;
}
.rgba p {
color: rgba(255,255,255,.5);
}
Idéal pour produire du code plus facilement maintenable,
ils apportent :
Un exemple avec LESS
@couleur: #000
@couleurHover: #900
.transition(@property, @time: 500ms) {
-webkit-transition: @property @time;
-moz-transition: @property @time;
-o-transition: @property @time;
transition: @property @time;
}
a {
color: @couleur;
.transition(color);
&:hover {
color: @couleurHover
}
}
Un exemple avec LESS
a {
color: #000;
-webkit-transition: color 500ms;
-moz-transition: color 500ms;
-o-transition: color 500ms;
transition: color 500ms;
}
a:hover {
color: #900;
}
Questions ?