Le CSS 3 a connu ses premières armes dès 1999 parallèlement au développement du CSS 2.1. Bien qu’il apporte une multitude d’évolutions techniques idéales pour les webdesigners et intégrateurs, son implantation n’est pas encore commune à tous. En tout état de cause, force est de constater que le W3C n’a pas encore validé tous les modules de travail sur ce langage de mise en forme, le CSS 3 cache donc encore bien des secrets méconnus des développeurs.
Par voie de conséquence, l’usage de ce langage impose une parfaite maîtrise des compatibilités et des librairies Javascript pour obtenir des résultats convenables sur les différents navigateurs du marché. Nous allons étudier deux notions toujours dans les cartons du consortium du web et qui risquent d’avoir un impact considérable sur l’avenir du responsive web design cher à Ethan Marcotte.
De l’application mobile au responsive web design…
L’émergence du web mobile a forcé les développeurs à se concentrer sur les nouveaux supports par le biais d’applications natives et restreintes à certains systèmes d’exploitation, notamment Androïd et iOS en France, au grand dam des BlackBerry OS, Symbian et consorts... Les inconvénients de ces programmes sont d’être figés et limités en matière d’exploitation. Pour pallier à ce problème, les applications web mobiles se sont développées, notamment avec jQuery Mobile ou le framework Sencha Touch, en partant de simples vues mobiles en HTML 5.
Enfin, des concepteurs américains ont apporté les concepts de « mobile First » et « responsive web design » pour générer des maquettes graphiques adaptatives selon les résolutions des écrans. C’est sur cette technique que nous allons insister avec le langage CSS 3 pour améliorer l’ergonomie globale des pages web responsive que nous concevrons à l’avenir. Pour les retardataires, je vous invite à (re)lire mon article sur les méthodes et préconisations pour faire un bon responsive web design pour ne pas être perdus dans ce qui va suivre...
Rappel sur les media queries
Le CSS 3 a vu la naissance de la fonction @media qui a pour particularité de créer des groupes de propriétés relatifs à des spécifications précises telles que la largeur maximale d’une fenêtre de navigateur, l’orientation d’un smartphone ou d’une tablette, ou encore le nombre de couleurs tolérées par un écran…
Il existe quelques types de médias autorisés ainsi que des mots clés (« not », « only » et « and ») et propriétés (width, device-ratio, monochrome, orientation, grid…) spécifiques à la fonction @media. L’utilisation des media queries est simple et peut prendre une des formes suivantes :
/* Affiche un style uniquement sur les écrans compatibles de 468px de largeur maximum */
@media only screen and (max-width:468px) { ... }
/* Affiche un style pour les groupes de propriétés valides séparés par des virgules */
@media (min-width:768px), handheld and (orientation:landscape) { ... }
/* Affiche un style pour tous les supports sauf les imprimantes */
@media not print, not embossed { ... }
Pour de plus amples informations sur les requêtes de médias en CSS 3, je vous conseille l’article très complet publié par Mozilla à l’URL https://developer.mozilla.org/fr/docs/CSS/Media_queries. Le module que nous allons étudier par la suite est toujours en cours de développement, il reste donc encore quelques points obscurs dont l’incompatibilité avec des navigateurs (spéciale dédicace à Microsoft notamment, bien que seul Safari affiche des résultats probants actuellement…).
Toutefois, un plugin jQuery créé par Alexis Deveria permet d’utiliser le module Template Layout sur tous les navigateurs et permet donc de profiter dès maintenant de ses forces. Le plugin requiert l’installation de la bibliothèque jQuery puis du plugin Template Layout. Le créateur propose des paramètres complémentaires pour autoriser les feuilles de style externes ou mettre des préfixes (…) mais pour cet article, je vous avoue que seule l’utilisation des balises <style> dans l’HTML a fonctionné sur tous les navigateurs (Internet Explorer compris !). Voici un exemple d’implantation du plugin d’Alexis Deveria.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://css-template-layout.googlecode.com/files/jquery.tpl_layout1.1.1.js"></script>
<script>
$(document).ready(function() {
$.setTemplateLayout();
});
</script>
<style>
/* Styles CSS dans l’HTML */
</style>
Module Template Layout et slots CSS 3 pour créer des grilles dynamiques
Le module Template Layout permet de créer des grilles structurées à l’aide des propriétés display (ou display-model) et position en CSS. L’avantage de ce modèle est de pouvoir organiser les blocs structurels en fonction des présentations que nous souhaitons. Au revoir les 960Grid et compagnie, bonjour aux grilles CSS 3 ! Avec Template Layout, nous pouvons désormais organiser nos blocs comme nous le souhaitons.
Tout le principe réside dans l’appellation de blocs par des lettres de l’alphabet. Ainsi, un premier bloc prend la lettre « a », puis le second prend « b » et ainsi de suite. Cette information est indiquée à l’aide de la propriété position. La propriété display sert à ordonner les blocs et créer des ensembles modulaires, il suffit de mettre les lettres de chaque bloc dans l’ordre souhaité dans des ensembles successifs placés entre des guillemets pour que le module fonctionne.
Regardez les codes suivants et l’exemple issu d’une capture d’écran sur Firefox pour vous faire une idée. D’autres démos sont disponibles sur le blog de Neal Grosskopf.
Le code HTML de l’exemple :
<div id="grille">
<div id="bloc1">
Bloc 1
</div>
<div id="bloc2">
Bloc 2
</div>
<div id="bloc3">
Bloc 3
</div>
</div>
Le code CSS 3 associé (placé dans le <head> ici…) :
#grille {
color:white;
width:600px; /* Largeur du bloc général */
margin:auto; /* Pour centrer le bloc général */
display: "aa" /150px
"bc" /300px ; /* Ordre des trois blocs avec hauteurs définies */
}
/* On accorde une position (identifiant) à chaque bloc */
#bloc1 { position:a; }
#bloc2 { position:b; }
#bloc3 { position:c; }
/* On accorde une couleur différente à chaque bloc */
#grille::slot(a) { background:gray; }
#grille::slot(b) { background:blue; }
#grille::slot(c) { background:red; }
Particularités du module et des slots CSS 3
Le pseudo-élément ::slot() ne permet pas d’utiliser beaucoup de propriétés CSS. En réalité, elle est limitée uniquement aux trois suivantes : background, vertical-align et overflow. Par conséquent, il est impossible de déterminer une largeur et une hauteur à un bloc avec ::slot() en CSS 3. En réalité, nous devons intégrer la largeur souhaitée pour chaque bloc au sein de la propriété display initiale. Vous trouverez nombre d’informations sur la page dédiée du W3C datant de 2011.
Vous pouvez attribuer une hauteur aux blocs en ajoutant « /hauteur » (en px, em ou %) après chaque ligne d’instructions. Pour spécifier des largeurs, il faut écrire à la fin de la propriété display les largeurs de chaque colonne dans leur ordre d’apparition, sachant que l’opérateur « * » permet de calculer automatiquement la largeur d’un bloc, comme dans l’exemple suivant :
/* Première ligne de 120px de haut, 2e groupe de 3em de haut */
/* Bloc « b » avec largeur automatique et bloc « c » de 150px de largeur */
#grille {
display: "a a" /120px
"b c" /3em
* 150px;
}
Enfin, le module Template Layout peut accueillir des bordures si nécessaire grâce au caractère « . » indiqué dans les slots initiaux. L’exemple suivant montre comment ajouter des bordures aux blocs.
#grille {
display : ". a a ." /100px
". b c ." /150px;
}
Usage du module Template Layout en responsive web design
L’avantage des grilles est de pouvoir rapidement organiser les blocs en les nommant par des lettres (« a », « b », « c », etc.) et en les organisant comme bon nous semble. En couplant cette technique avec les media queries et la méthodologie du responsive web design, nous pourrions créer des maquettes adaptatives en toute simplicité et avec efficacité, comme le montre l’exemple suivant (inspiré du modèle proposé par le W3C). Ainsi, la mise en page sera différente en fonction des usages et des supports utilisés.
@media all {
body { display: "aaa"
"bcd" }
header { position: a }
nav { position: b }
aside { position: c }
footer { position: d }
}
@media all and (max-width: 468px) {
body { display: "a"
"b"
"c"; }
header { position: a }
nav { position: b }
aside { display: none }
footer { position: d }
}
Nous pouvons même aller plus loin puisqu’il est possible d’inverser l’ordre des blocs dans la propriété display, ce qui permet à tout moment d’afficher un menu aux endroits les plus pratiques pour les mobinautes par exemple. Pour ce faire, il suffit d’inverser les valeurs placées entre les guillemets du type display:"b a c";…
N.B. : le W3C travaille parallèlement sur un système de grilles au sens propre du terme, avec des propriétés grid et flow pour créer des repères complets dans les pages web. Plus d’informations à l’adresse suivante : http://dev.w3.org/csswg/css-template/.