Le sélecteur d'adjacence directe

Le sélecteur d’adjacence directe est compatible avec quasiment tous les navigateurs.

La prise en charge de ce sélecteur est intéressante, puisque Firefox 1+, Safari 1.3+, Opera 9.2+, Chrome 2.0+ et IE7+ comprennent ce sélecteur.
Petite nuance pour Safari qui a un problème d'interprétation lorsqu'on cible le frère d'un élément en hover  jusqu'à la version 5.

Vous pouvez donc vous lâcher et l'utiliser dans vos intégrations.

Syntaxe de base

Pour cibler le frère d'un élément, nous allons avoir besoin du symbole +.
Voici sa syntaxe :

element1 + element2 {
   /* mes styles */
}

Ici les styles seront appliqués uniquement à element2 directement frère de element1.

C'est un bon moyen de cibler un élément dans un cas particulier, comme un p situé juste après un titre, ou pour appliquer des styles à des éléments semblables, sauf le premier de la fratrie.

Quelques exemples d'utilisation

Nous allons reprendre les deux exemples cités précédemment.

Appliquer une marge après un titre

Imaginons que nous souhaitions appliquer une marge suffisante pour espacer un p d'un h2 qui le précède, tout en conservant  un certain rapprochement lorsque h2 est suivi d'un h3 (l'un servant de sous-titre direct à l'autre).
Voilà ce que nous pourrions imaginer :

h2 + p {
   margin-top: 0.8em
}
h2 + h3 {
   margin-top: 0.2em
}

Il faudrait prévoir avant cela une annulation des marges existantes pour les redéfinir, mais cette méthode, avec quelques adaptations, pourrait améliorer le confort de lecture d'un texte fortement hiérarchisé.

Voir l'exemple

Appliquer un style différent au premier élément d'une liste

Deuxième scénario : je veux créer un menu horizontal où chaque élément de liste serait séparé de son frère par une bordure.
Mais voilà, si je dis que tous mes li possèdent une bordure à gauche, je me retrouve avec une bordure indésirable à gauche du premier élément. Si je désigne une bordure à droite, idem mais à l'opposé !

La solution ? Appliquer une bordure à gauche de tous les éléments de liste, sauf le premier.

li + li {
   border-left: 1px solid #aaa;
}

Il est également possible d'appliquer un style à tous les liens de  ce menu, en dehors du premier, en procédant de la même manière.
Cela peut-être utile si vous préférez appliquer les bordures aux liens, au lieu de les appliquer aux li.

Voir l'exemple

li + li a {
   border-left: 1px solid #aaa;
}

Cette technique peut vous permettre de changer de couleur de bordure au survol ou au focus du lien. Ça n'est qu'un exemple.

Le sélecteur d'adjacence indirecte

Le sélecteur d’adjacence indirecte est peu connu en CSS.
Arrivé avec la nouvelle mouture CSS3, ce sélecteur vous permet d'appliquer des styles d’un seul coup à tous les frères d’un élément ciblé répondant à un sélecteur précis.

La prise en charge est plutôt large pour un sélecteur CSS3, puisque Firefox 1+, Safari 3.1+, Opera 9.2+, Chrome 2.0+ et IE7+ comprennent ce sélecteur.
Petite nuance cependant pour IE7 qui n'aime pas qu'un commentaire HTML vienne s'interposer entre des frères, et pour IE8 qui ne ciblera que les 298 premiers éléments... ça laisse de la marge quand même.

Avec la mort de IE6, vous pouvez déjà vous permettre de l'utiliser !
Voyons voir avec quelques exemples comment l’utiliser et quels sont ses effets.

Syntaxe de base

Le sélecteur, que j’appelle incorrectement siblings du fait de sa ressemblance avec la fonction siblings() de jQuery, utilise le caractère ~ disponible sous PC depuis les touches Alt Gr + 2(é ~) et sous Mac de puis les touches Alt + N.

element1 ~ element2 {
   /* mes styles */
}

Ici les styles seront appliqués à tous les element2 frères de element1, même si un autre frère vient se mêler entre deux element2, par exemple.
Voir l'exemple

Il est important de noter que ce sélecteur ne cible que les frères suivants d’un élément ciblé. En aucun cas les frères précédents ne seront concernés. 

Quelques exemples d’utilisations

L'habitude d’utiliser d’autres techniques avec le combinateur d'adjacence directe m'a un peu bloqué dans la recherche d'exemples.
Cependant, voici quelques idées, probablement non des plus probantes, mais pouvant servir malgré tout.

Cibler les frères non identiques à l’élément de départ

Ce sélecteur d’adjacence indirecte (~) va permettre de combler certaines lacunes du sélecteur d’adjacence directe (+).
Il sera capable de cibler tous les paragraphes qui suivent un titre, par exemple. Chose qui ne fonctionnera pas en faisant h3 + p, mais qui fonctionnera avec h3 ~ p.

Cibler les frères d’un élément survolé, ciblé ou typé

Dans la même logique que précédemment, il est possible de cibler, par exemple, tous les frères d’un li survolé (donc les autres li), ou d’un input typé.

li:hover ~ li {
   opacity: 0.4;
}

Cet exemple provient d’un effet produit sur jq.creativejuiz.fr (avec une solution jQuery), ou sur la récente démonstration de Raphaël Goetter sur un fil d’ariane entièrement conçu en CSS : Breadcrumbs without images.

Ou avec le deuxième exemple :

[type="radio"] ~ input {
   margin-left: 2.6em;
}

Ce qui permettrait, dans un enchaînement de input + label de type radio, d’espacer les choix.

Voir l'exemple

Sélecteur d'adjacence directe négative

Cela n'existe pas... ou du moins, pour sélectionner les frères situés avant un élément, il faudra utiliser un sélecteur CSS3.
Ce sélecteur, ou plutôt cette pseudo-classe s'appelle nth-child().

Nth-child est compatible avec la plupart des navigateurs modernes. Il ne faudra cependant pas compter sur la prise en charge de cette pseudo-classe par IE version 8 et inférieures.
Firefox le comprend depuis sa version 3.5, Safari de puis sa 3.1, Opera depuis sa 9.5 et Chrome depuis la version 2.

 Remarque : Ce qui suit est expérimental, cela devra faire l'objet de votre propre expertise, et ne pourra être utilisé que dans des cas et besoins précis.

Syntaxe de base

Une valeur doit être renseignée entre les parenthèses du sélecteur pour cibler précisément des éléments.
Nth-child() accepte comme valeur une expression numérique, ou les mots-clefs odd et even (pour cibler un élément sur deux).

:nth-child(3n+1) {
   /* mes styles */
}

L'expression numérique comprend sa position (n) qui sera utilisée pour le calcul (ici *3 + 1).
Ici, les éléments sélectionnés seront :

• n vaut 0 : 3 x 0 + 1 = 1 (soit le 1^er élément)
• n vaut 1 : 3 x 1 + 1 = 4 (soit le 4^ème élément)
• n vaut 2 : 3 x 2 + 1 = 7 (soit le 7^ème élément)

Voici visuellement ce que ça peut nous donne : Voir l'exemple

Exemple

Revenons sur le but de l'utilisation de ce sélecteur : simuler un sélecteur d'adjacence négative.

Sélecteur d'adjacence directe négative.

Ce que l'ont veut ? Pouvoir cibler tous les éléments situés avant un élément précis.
En suivant la logique précédent, on peut voir que n s'incrémente. Il va donc nous falloir utiliser le symbole - (moins) pour le faire se décrémenter.

Nous aurons donc un sélecteur sous cette forme :

:nth-chld(-n+3) {
   background: #f3f3f3;
}

Ici nth-child(-n+3) nous permet de cibler tous les frères précédent le 4^ème élément.

Limites

Un exemple, plusieurs limites, en tout cas sur cette manière d'utiliser nth-child().

• Cibler les frères d'un élément non identique ne semble pas possible;
• Par extension, cibler les frères qui précédent un élément détenteur d'une classe ne semble pas possible ;
• Idem pour les frères qui précédent un élément détenteur d'une pseudo-classe ;
• pour cibler le premier et le dernier élément, préférez :first-child à :nth-child(-n+1) et :last-child à :nth-last-child(n+2), qui offrent de meilleures prises en charge par le panel des navigateurs.

Même la tâche redondante consistant à préfixer nos propriétés CSS3 est aujourd'hui une partie de plaisir avec Prefixr et PrefixFree.

Aujourd'hui, l'étendue des possibilités auxquelles a accès un intégrateur est assez impressionnante. Et enfin, les propriétés de transition et d'animation sont plutôt bien supportées par l'ensemble des navigateurs modernes - et sont promises pour IE10.

Évidemment, le manque de support sur l'ensemble des versions actuelles d'Internet Explorer est le plus grand handicap de ces nouvelles propriétés. Ainsi, nous ne sommes (probablement) pas prêt de délaisser des langages tel que Flash et Javascript pour les animations plus complexes. Mais rien ne nous empêche auhourd'hui d'animer et d'utiliser les transitions/animations sur des éléments non cruciaux de notre interface client. Et surtout, ces modules CSS3 sont déjà largement utilisable en production dans le domaine du Web mobile !

Le sujet des transitions et des animations a déjà été traité par maints auteurs (même ici sur Alsacréations). Cependant, ces deux modules CSS3 comportent plusieurs particularités plus difficiles à saisir; ou à tout le moins, peu connues. Le but de ce tutoriel sera de faire le point sur le fonctionnement des effets de timing des transitions et des animations. En même temps, je m'attarderai à vous faire découvrir deux fonctions CSS3 assez peu connues appelées: cubic-bezier, qui vous permettra de créer vos propres courbes de bézier gérant la fluidité de vos animations, et steps, qui vous permettra de séparer votre transition en plusieurs étapes franches (en "marche d'escalier").

Avant de commencer, veuillez noter que le terme de transition s'appliquera aussi bien au module transition CSS3 qu'aux effets de timing des animations. Cela est dû au fait qu'une transition aura lieu entre chaque état d'une animation; rendant cette dernière plus fluide.

Survol de l'utilisation des transitions et des animations

Avant toute chose, débutons par un survol de l'utilisation des transitions et des animations. La compréhension du fonctionnement de ces deux modules est évidemment pré-requise à la compréhension de ce tutoriel.

Quelques Références

Transitions:

• Tutoriel: Transitions CSS 3 (Alsacréations)
• La spécification sur les transition CSS 3 sur le w3c

Animations:

• Tutoriel: A master class in CSS animations (en anglais)
• La spécification sur les animations CSS 3 sur le w3c

Transitions

Les transitions permettent de rendre fluide le changement de valeur d'une propriété CSS. Ce changement d'état peut-être déclenché à l'ajout d'une pseudo-classe (:hover, :focus, :active, :target, :checked, etc) ou à la modification d'une ou plusieurs class (ajout/suppression via Javascript).

Les propriétés CSS pouvant subir une transition sont à priori toutes les valeurs numériques. Par exemple: width, margin, padding, color, etc. Une liste (incomplète) de ces propriétés est disponible sur le site du w3c.

Les différentes propriétés de transitions sont:

• transition-property : Définit les propriétés CSS qui subiront une transition (ex: width). Le mot clé all ciblera toutes les propriétés capable de subir une transition. (Obligatoire)
• transition-duration : Définit la durée en temps de la transition en seconde (s) ou milliseconde (ms). (Obligatoire)
• transition-timing-function : Définit un effet de timing à utiliser (le modèle d'interpolation). Nous reviendrons à ces effets dans un autre chapitre. (Facultative)
• transition-delay : Définit l'avance ou le retard que prendra la transition vis à vis de son déclenchement. (Facultative)

Par exemple, le code suivant ciblera toutes les propriétés CSS du sélecteur. La transition aura une durée de 500 millisecondes, commencera lentement et finira plus rapidement (ease-in) et elle commencera une seconde après le déclenchement du changement d'état du sélecteur.

selecteur {
  transition-property: all;
  transition-duration: .5s; /* on aurait pu écrire 500ms également */
  transition-timing-function: ease-in;
  transition-delay: 1s;
}

Remarque: Il est souvent préférable de déclarer la transition sur le sélecteur seul et pas sur un sélecteur avec une pseudo-classe (comme selecteur:hover) puisque dans ce dernier cas de figure, la transition n'aura lieu qu'au moment où la souris survole l'élément, et pas lorsque celle-ci le quittera.

Évidemment, les transitions CSS ont également une syntaxe simplifiée (incroyablement utile avec tous les préfixes navigateurs). Ainsi, on écrira:

selecteur {
  transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;
}

/* Ou en cumulant plusieurs propriétés */
selecteur {
  transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>,
  <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;
}

Remarque : Les transitions sont encore à l'état d'ébauche au W3C, les préfixes navigateurs seront donc encore de mise. Les navigateurs Gecko comme Firefox (-moz-), les navigateurs Webkit comme Safari, Google Chrome et la majorité des navigateurs mobiles (-webkit-), et les navigateurs Presto comme Opera (-o-) supportent les transitions avec préfixe.

Animations

Les animations CSS3 sont semblables aux transitions. La majeure différence entre les deux est que les animations permettront un contrôle très précis dans le temps de la valeur que prendront les différentes propriétés CSS.

Une animation peut être lancée lors d'un changement de pseudo-classe (:hover, :focus, :active, :target, :checked, etc), lors d'un changement de class via Javascript, ou simplement lors du chargement de la page.

Si l'animation n'est répétée qu'une fois par défaut, elle peut être itérée à souhait.

Pour réaliser une animation CSS, nous avons besoin de deux éléments distincts: une déclaration d'images-clés (keyframe) définie au sein d'une @-rule, et un lien d'un sélecteur vers cette animation au sein d'un bloc de code CSS.

Très rapidement, voilà de quoi pourrait avoir l'air une animation:

@keyframes monanimation {
  0% {
    color: blue;
  }
  100%{
    color: papayawhip;
  }
}
        
selecteur:hover,
selecteur:focus,
selecteur:active{
  animation: monanimation 1.5s ease-in-out;
}

Les animations étant encore à l'état d'ébauche, il vous faudra évidemment ajouter les préfixes navigateurs (présentement, Webkit -webkit-, Gecko -moz- et Opera -o- supportent les animations. Il faudra également pensé à IE 10 -ms-).

Ainsi, nous devrons écrire @-moz-keyframes et -moz-animation afin que nos animations soient comprises sur Firefox. Le même principe s'appliquera aux autres navigateurs.

Les Keyframes

Les keyframes représentent le déroulement de votre animation. Les valeurs en pourcentage représentent un moment temporel précis au cours de la durée de votre animation. Ainsi, 10% représentera la 6ème seconde d'une animation durant une minute.

Remarque : Il est à noter que les keyframes 0% et 100% sont obligatoires et que leur omission empêchera le fonctionnement de votre animation sur certains navigateurs.

Voici quelques remarques en vrac :

• Une transition est effectuée entre chaque keyframe rendant l'animation plus fluide.
• Les keyframes n'ont pas besoin d'être en ordre, le keyframe 100% peut très bien être déclaré avant le keyframe 0%.
• Si plusieurs keyframes ont la même valeur, il est possible de les insérer sur la même ligne en les séparant d'une virgule.

Par exemple, le code suivant serait tout à fait valide :

@-webkit-keyframes bouncing {
40%, 70%, 90%{
  bottom: 0;
  -webkit-animation-timing-function: ease-out;
}
0% {
  bottom: 200px;
  left: 0;
  -webkit-animation-timing-function: ease-in;
}
55% {
  bottom: 50px;
  -webkit-animation-timing-function: ease-in;
}
80% {
  bottom: 25px;
  -webkit-animation-timing-function: ease-in;
}
95% {
  bottom: 10px;
  -webkit-animation-timing-function: ease-in;
}
100% {
  left: 110px;
  bottom: 0;
  -webkit-animation-timing-function: ease-out;
}
}

Fait à noter en lien avec le sujet principal de ce tutoriel, la propriété animation-timing-function est la seule propriété d'une animation à pouvoir être insérée au sein d'une keyframe.

Un exemple de l'animation avec l'utilisation d'un effet de timing. Et la même animation, sans effet de timing. Vous comprendrez sûrement l'importance de bien utiliser ces dernières !

Lancer notre animation

Maintenant que nos keyframes sont créés et référencées par le nom qui leur a été donné, il ne nous reste plus qu'à appeler cette animation à partir d'un sélecteur. Les différentes propriétés d'animation sont les suivantes:

• animation-name: Où on indique le nom de l'animation à utiliser. (obligatoire)
• animation-duration: Où on indique la durée en milliseconde (ms) ou en seconde (s) de l'animation. (Obligatoire)
• animation-iteration-count: Le nombre de fois que l'animation doit être effectué. La valeur devra être un nombre entier ou le mot clé infinite pour que l'animation se répète à l'infinie. La valeur par défaut est de 1. (Facultative)
• animation-direction: Définira si l'animation doit toujours jouer du début à la fin, ou si une fois rendu à la fin, elle doit refaire l'animation en sens inverse. Par défaut l'animation recommencera du début (normal), mais l'utilisation du mot clé alternate alternera la direction de l'animation. Démonstration d'animation-direction (Facultative)
• animation-timing-function: Définit un effet de timing à utiliser (le modèle d'interpolation) entre chaque keyframe. Comme vu précédemment, cette propriété est également modifiable au sein même d'une keyframe. (Facultative)
• animation-delay: Cette valeur définira un délai d'attente avant le début de l'animation, ou dans le cas d'une valeur négative, l'avance que doit prendre l'animation avant de débuter. (Facultative)
• animation-fill-mode: Cette propriété définit l'état de départ et de fin de votre animation. Voici les différentes valeurs possibles:
  • forwards: indique au navigateur de laisser l'élément dans sont état final lors de la dernière itération. (l'élément ne revient donc pas à son état initial)
  • backwards: indique au navigateur de placer l'élément dans son état définit au keyframe 0% au chargement de la page, même si un délais négatif est indiqué.
  • both: appliquera les deux valeurs précédentes.
  • none: indiquera au navigateur de styler l'élément selon son état à la première keyframe visible (dans le cas d'un délais négatif) et de ramener l'animation à la keyframe 0% après la dernière itération. Ceci est le comportement par défaut.

Évidemment, autant de valeurs (avec les préfixes navigateurs en plus) vous créeront vite 21 lignes supplémentaires dans votre bloc de code. Ainsi, nous utiliserons plus souvent qu'autrement la syntaxe simplifiée:

selecteur {
  animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode>;
}

Ou si vous désirez appliquer plusieurs animations sur un élément:

selecteur {
  animation:  <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode>,
  <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode>;
}

Mettre votre animation sur pause

Et pour clore ce chapitre sur les animations CSS3, il vous est également possible de mettre en pause une animation via la propriété animation-play-state qui prendra l'une des deux valeurs suivantes : running (par défaut) ou paused pour arrêter l'animation.

selecteur:hover {
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  animation-play-state:paused;
}

Fonctionnement des fonctions de timing

Comme nous l'avons vu précédemment, autant les transitions que les animations ont recours à des effets de timing. Pour rappel, ces effets sont utilisés en tant que valeur des propriétés suivantes:

• transition-timing-function
• animation-timing-function (dans un bloc de code CSS ou au sein d'une keyframe)

Ces effets de timing permettent de gérer la fluidité d'une transition (entre deux propriétés CSS ou entre deux keyframes). Un effet de timing peut-être représenté sous deux formes: une fonction en escalier (stepping function), ou une courbe de Bézier cubique.

Dans le cas de ces deux fonctions, on pourra se les représenter sur un graphique où l'axe des Y représentera chaque étape entre la valeur initiale et la valeur finale de la propriété CSS subissant une transition et l'axe des X représentera l'avancement dans le temps de la transition (de son début à sa fin).

Dans le cas du graphique précédent (où une courbe de Bézier est utilisée), notre animation commencera lentement et finira lentement.

De base, les navigateurs fournissent quelques fonctions de transitions par défaut. Celles-ci sont:

• ease: décélère légèrement au début et termine sa transition lentement. (cubic-bezier(0.25, 0.1, 0.25, 1.0))
• linear: la transition sera stable sans décélération ni accélération. (cubic-bezier(0.0, 0.0, 1.0, 1.0))
• ease-in: commencera lentement (cubic-bezier(0.42, 0, 1.0, 1.0))
• ease-out: finira lentement (cubic-bezier(0, 0, 0.58, 1.0))
• ease-in-out: commencera et finira lentement (cubic-bezier(0.42, 0, 0.58, 1.0))
• step-start: L'élément prendra la valeur finale de sa transition dès le déclenchement de la transition. Autrement dit, il n'y aura pas de transition visible. (steps(1, start))
• step-end: L'élément prendra la valeur finale de sa transition à la fin de la durée prévue par celle-ci. Autrement dit, on aura l'impression qu'un délai a eu lieu. (steps(1, end))

Remarque: Chaque effet par défaut correspond à une fonction cubic-bezier() ou steps(). J'indique les valeurs de chaque fonction à titre de référence, nous nous attarderons plus en détail à l'utilisation plus poussée des fonctions cubic-bezier() et steps() dans les prochains chapitres.

La fonction CSS cubic-bezier()

Sa syntaxe

Une courbe de cubic-bezier sera définie par quatre points (p0, p1, p2, p3) disposés sur un graphique où les axes X et Y auront pour valeur une échelle entre 0 et 1.

Les points p0 et p3 auront toujours pour valeur de positionnement respective (0,0) et (1,1). En soit, le p0 représente le début de la transition et le p3 représente la fin. Ces deux points sont fixes et ne peuvent pas être modifiés.

Les p1 et p2 en revanche pourront être positionnés selon nos besoins sur le graphique à l'aide de la fonction cubic-bezier.

Ainsi, la fonction cubic-bezier nous sert à définir la position en X et en Y des points 1 et 2. La fonction prendra en paramètre 4 nombres flottants représentant respectivement:

transition-timing-function: cubic-bezier(<X p1>, <Y p1>, <X p2>, <Y p2>);    

Remarque : Il faut obligatoirement utiliser un nombre flottant. Ainsi, nous devrons écrire 1.0 en lieu et place de 1, et ainsi de suite.

La valeur de position sur l'axe X (représentant le temps) des deux points doit avoir une valeur située entre 0 et 1. La valeur en Y cependant peut prendre n'importe quelle valeur.

Remarque: La possibilité de donner un valeur non-comprise entre 0 et 1 à la valeur Y est une modification récente aux spécifications du w3c. Ce faisant, cette possibilité est présentement ignoré des navigateurs webkit (à ce jour, Google Chrome en est à sa version 15, et Safari à sa version 5.1). Cependant, ce bug devrait être bientôt réglé, et vu la rapidité de propagation des nouvelles versions sur Chrome et Safari, ce n'est qu'une question de mois avant que cette possibilité soit totalement utilisable. Chez Firefox et Opera, tout fonctionne déjà.

L'intérêt premier de pouvoir spécifier n'importe quelle valeur sur l'axe des Y est de permettre très facilement l'utilisation d'effets de bouncing (rebond) dans divers cas.

Exemple de la fonction cubic-bezier() utilisé pour donner un effet de rebond

Si vous avez remarqué, les courbes de Bézier sont proportionnelles au temps et à l'écart entre la valeur de départ et la valeur finale. Ce faisant, plus la transition est longue, et plus l'écart est grand entre l'état initial et final de notre élément, plus l'effet de timing sera visible.

Outils pour générer ses propres courbes de Bézier

Dit ainsi, toute cette théorie semble peut-être compliquer la grande puissance de la fonction cubic-bezier. Mais rassurez-vous, plusieurs outils en ligne vous permettent déjà de générer vos propres courbes de Bézier dans un environnement simple et efficace.

Les fonctionnalités de la majorité de ces outils étant malgré tout limitées (Opera transition-timing-function), je vous évite la longue liste pour ne me concentrer que sur un site: cubic-bezier.com.

Cet outil a été créé par Lea Verou (en anglais) et permet tout simplement de créer vos propres courbes de Bézier applicable aux effets de timing CSS 3. Plusieurs fonctionnalités de cet outil en font un incontournable. Entre autre:

• Possibilité d'enregistrer et de partager vos propres courbes.
• Possibilité de tester vos courbes en direct et de les comparer.
• Interface graphique permettant une compréhension très simple des courbes de Bézier.
• Un site en HTML5 et canvas très inspirant !

En gros, il ne vous reste plus qu'à le découvrir si ce n'est déjà fait ! (Et si vous ne comprenez pas encore tout à fait la fonction cubic-bézier(), vous y aurez des exemples concrets)

La fonction CSS steps()

La fonction CSS steps() vous permet de définir une transition en "escalier". Cela veut dire que votre transition ne sera pas fluide comme si elle utilisait cubic-bezier, mais passera par des étapes (step) bien tranchées.

La syntaxe de cette fonction est plutôt simple. Elle prendra deux paramètres :

• Premier paramètre: Un nombre entier représentant le nombre de "marche" de la transition.
• Deuxième paramètre: Un mot clé qui définira si la propriété subissant la transition sera modifié au début ou à la fin du délai de chaque marche. Le mot clé sera start (au début) ou end (à la fin).

Ainsi, le graphique représentant les fonctions steps(3,start) et steps(3,end) serait le suivant:

La fonction steps() pourrait être utilisé pour imiter l'action d'une machine à écrire, ou alors pour animer une image.

• Machine à taper (réinterprétation d'un code de Lea Verou)
• Image animé (par Samurai)

Conclusion

Vous voilà, je l'espère, un peu plus éclairé sur l'utilisation des effets de timing, et des transitions/animations en général. Comme nous le constatons de jour en jour, les outils que nous offre CSS3 sont extrêmement puissant et nous n'avons pas encore terminé d'en faire le tour. Mais prenez garde, ce n'est pas parce que les animations existent qu'il faut en mettre partout ! Évitons de retomber dans le web extravagant du début des années 2000...

Entre temps, voici quelques démonstrations et outils pouvant vous inspirer :

• Animatable : une galerie d'animations
• Transitions impressionnantes appliquées aux bordures
• Banque d'animation à utiliser
• Une mise en garde des développeurs de Mozilla

Vous connaissez sans-doute déjà le plugin Zen Coding (sinon courez vite admirer cette vidéo assez ancienne mais plutôt bluffante).

Zen Coding est une extension pour éditeurs HTML et autres logiciels de développement (IDE) permettant d'automatiser et d'accélérer la rédaction de code à l'aide de syntaxes courtes (snippets) et de raccourcis-clavier.

Je me suis récemment amusé à compiler un ensemble de raccourcis (snippets) personnalisés que j’applique à mes projets et que je commence à intégrer en interne chez Alsacreations.fr

Récupérez et utilisez le fichier Zen Coding modifié

J’ai pensé que ces aménagements pourraient éventuellement servir à d’autres. Du coup, je vous partage volontiers le fichier, faites-en bon usage.

• Récupérez et installez Zen Coding
• Récupérez le dossier “Zen-Coding.zip” sur mon site perso pour en extraire les fichiers Zen Coding.js et Readme.txt
• Copier le fichier Zen Coding.js au sein du dossier “\plugins\NppScripting\includes” de votre éditeur HTML/CSS en écrasant le fichier original (après avoir fait une copie de sauvegarde !).
  Par exemple, pour Notepad++, le chemin sur Windows7 est C:\Program Files (x86)\Notepad++\plugins\NppScripting\includes

Rappel : sur Zen Coding, les Snippets fonctionnent avec les mots-clés (ci-dessous) + la combinaison de touches Ctrl + e

Modifications apportées

Beaucoup de mots-clés sont définis de base, voici uniquement ceux que j’ai modifiés personnellement (ajoutés) :

Structure

• doctype -> un doctype HTML5 + gabarit minimal
• doctype2 -> un doctype HTML5 avec classes conditionnelles sur html (combinaison de lte IE 7 / IE 8 / gt IE 8) + gabarit minimal
• html5 -> aussi un doctype HTML5 + gabarit minimal
• xhtml -> un doctype XHTML 1.0 strict + gabarit minimal
• css -> élément link vers feuille styles.css

Contenu

• lorem -> texte de remplissage en texte schnapsum
• loremp -> 3 paragraphes en schnapsum
• list -> liste ul/li de 5 éléments
• nav -> élément nav contenant une liste ul/li/a de 5 éléments
• content -> contenu type entier (titres, liste, paragraphes) en schnapsum

Commentaires conditionnels

• ie -> commentaire conditionnel if IE
• ie6 -> commentaire conditionnel if IE lte IE 6
• ie7 -> commentaire conditionnel if IE lte IE 7
• noie -> commentaire conditionnel if not IE

CSS

• reset -> styles CSS de base (reset.css personnel)
• bg -> background:#FFF url(|) 0 0 no-repeat;
• br -> border-radius (avec préfixes pour navigateurs en ayant besoin)
• bs -> box-shadow (avec préfixes pour navigateurs en ayant besoin)
• clearfix -> crée une classe .clearfix empêchant les débordements de flottants (à l'aide de content)

Un exemple pour la route

Pour illustrer l'efficacité de ces snippets, voici comment je procède pour créer un gabarit HTML à partir d'une page vide sous Notepad++

Pour commencer, j'écris simplement "doctype" + Ctrl + e pour générer le code suivant :

<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

Puis, si je désire ajouter une liste, les touches seront "list" + Ctrl + e pour générer ceci :

<ul>
	<li>Salade</li>
	<li>Tomate</li>
	<li>Oignons</li>
	<li>Choucroute</li>
	<li>Picon bière</li>
</ul>

Enfin, si je souhaite du faux texte de remplissage encadré par des paragraphes, la manipulation sera "loremp" + Ctrl + e :

<p>Lorem Elsass ipsum réchime amet non Choucroute knack  tchao bissame hopla. Wotch a kofee avec ton BibalaekaesSalat et ta wurscht ?</p>
<p>Yeuh non che suis au réchime, je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. Tiens, un Picon sur le comptoir.</p>
<p>Allez tchao bissame !</p>

Pratique, n'est-ce pas ?

N’hésitez pas à me faire vos retours si vous utilisez ces modifications, et me proposer les vôtres si vous avez vous aussi bidouillé votre fichier.

La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Ces derniers sont déconseillés car peu fiables; en effet, on ne sait jamais à l’avance quels seront les navigateurs sur le marché dans deux ou cinq ans, et comment ils comprendront ou pas nos hacks CSS. Une deuxième solution, conseillée par Microsoft et Alsacréations (que du beau monde :)), est d’utiliser les commentaires conditionnels.

Nous allons voir dans cette article que l’utilisation habituelle des commentaires conditionnels a quelques inconvénients, et proposer une technique qui combine plusieurs avantages : les classes conditionnelles.

Le problème des commentaires conditionnels

Les commentaires conditionnels se présentent comme des instructions dotées d’une condition (if) et qui peuvent se placer à n’importe quel endroit du document (X)HTML.

<!--[if IE]>
	<link rel="stylesheet" href="styles-ie.css" media="screen">
<![endif]-->

Il s’agit d’un mécanisme propre à Internet Explorer Windows, né avec la version IE5, et qui permet d’inclure dans une page HTML, de manière valide, une portion de code qui ne sera lue et interprétée que par IE, ou par l’une ou l’autre de ses versions.

Pour information, Internet Explorer 10 ne reconnaît plus les commentaires conditionnels, il ne peut donc plus être ciblé de cette manière.

Dans notre quête de compatibilité maximale sur le navigateur de Microsoft, nous allons principalement nous servir de ce mécanisme pour faire un lien vers une feuille de styles corrective dédiée. Cette seconde feuille CSS, chargée à la suite du fichier de styles principal, aura pour but d’écraser et de rectifier au cas par cas les règles générales mal reconnues par IE, comme le montre l'illustration ci-dessous :

Cependant, dans la pratique, une feuille de style corrective pour Internet Explorer ne suffira pas. Vous serez souvent amenés à produire une feuille CSS spécifique à IE6 et 7, ainsi qu'une autre pour IE8. Ou pire : une feuille différente pour chacune des trois versions !

Au final, vous jonglerez avec au minimum trois feuilles de styles CSS :

Non seulement, nous avons à gérer plusieurs fichiers différents, mais nous ne pourrions toujours pas cibler les trois versions IE6 et IE7 et IE8 à la fois sans ajouter une nouvelle condition et feuille CSS supplémentaire.

En 2008, le développeur américain Paul Irish s’est penché sur le mécanisme des commentaires conditionnels et en a listé ces quelques désagréments :

• Les navigateurs anciens tels que IE6, IE7 et IE8 doivent charger plusieurs fichiers CSS au lieu d’un. Ces requêtes HTTP supplémentaires, ont un impact sur la vitesse d’affichage des pages.
• Certains correctifs CSS s’appliquent à toutes les versions des navigateurs (IE6, IE7, IE8). Il faudra les écrire une fois dans chaque fichier de correctifs.
• A chaque modification opérée sur styles.css, il faudra vérifier dans chacune des feuilles de correctifs CSS s’il n’y a pas également des changements à répercuter. La maintenance et l’évolution des styles CSS deviennent difficiles.
• L'emploi de commentaires conditionnels peut causer des problèmes pour les téléchargements parallèles.

L’argument des baisses de performances est non négligeable sur les versions IE6 et IE7, car il s’agit justement de navigateurs vieillots nécessitant des optimisations constantes et nombreuses en vue de ne pas handicaper leurs temps de calcul et d’affichage.

Une alternative ? Les classes conditionnelles

La solution proposée par Paul Irish a été initialement de créer un nom de classe spécifique à l’élément <body>, via un commentaire conditionnel et sans nécessiter d’appel vers une feuille de styles. Je préfère néanmoins l’appliquer directement à l’élément <html>, plus logique et plus souple à manipuler.

Voici une version optimisée de classe conditionnelle :

<!--[if lte IE 7]> <html class="ie7 oldie" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie" lang="fr"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="fr"> <!--<![endif]-->

Vous pouvez voir cette classe conditionnelle en action sur le site www.goetter.fr/livres/css-avancees/

Le principe et les explications sont simples :

• sur les versions inférieures ou égales à Internet Explorer 7, le corps du document s’écrira <html class="ie7 oldie" lang="fr"> ;
• sur IE8, ce sera <html class="ie8 oldie" lang="fr"> ;
• sur tous les autres navigateurs (IE9+ et le reste du monde), il s’agira simplement de <html lang="fr">.

Il devient alors aisé d’appliquer une règle spécifique à IE6 et IE7 :

#kiwi { /* Pour tout le monde */  
  display: inline-block;  
}
.ie7 #kiwi { /* Pour IE6 et IE7 */  
  display: inline;
  zoom: 1;
}

Et pour appliquer des styles à la fois sur IE6, IE7 et IE8 :

#kiwi { /* Pour tout le monde */  
  font-size: 1.2rem;  
}
.oldie #kiwi { /* Pour IE6, IE7 et IE8 */  
  font-size: 20px; 
}

Bien que la syntaxe demeure un tantinet rebutante et qu'un ajout de codes HTML soit nécessaire, cette méthode commence à faire son chemin parmi les développeurs web aguerris (elle figure même dans le gabarit par défaut proposé par HTML5boilerplate) car ses avantages sont séduisants :

• Contrairement à ce que l’on pourrait croire, elle est parfaitement valide W3C / HTML et reconnue par tous les navigateurs,
• On cible en toute simplicité les versions d'Internet Explorer souhaitées avec .ie7, .ie8, .oldie par exemple,
• Pas de multiplication des requêtes, et des fichiers externes à vérifier et maintenir.

Et vous, que pensez-vous de cette technique ? L'utilisez-vous déjà en production ?

Vous avez toujours voulu utiliser des variables, des fonctions, ou encore faire de l'héritage avec le langage CSS ? C'est devenu possible grâce au langage LESS,  aux frameworks Sass et xCSS. Mon article concernera uniquement le langage LESS et le compilateur LessPHP.

Pour convertir une syntaxe LESS (format .less) à un format CSS valide, il faudra utiliser un compilateur comme LessCSS ou LessPHP. LessCSS permet  une compilation de votre fichier .less avec Javascript, tandis qu'avec LessPHP la compilation se fera côté serveur avec PHP. L'avantage de ce dernier est au niveau de la compatibilité (vous aurez par exemple aucun problème si un intenaute désactive Javascript).

Installation

Vous devez obligatoirement travailler dans un environnement PHP.

1. Téléchargez le fichier lessc.inc.php sur le site officiel de LessPHP
2. Insérez ce code PHP dans votre fichier HTML :

require 'lessc.inc.php';

try {
     lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
     exit('lessc fatal error:
     '.$ex->getMessage());
}

3. Indiquez le chemin du fichier lessc.inc.php, celui du fichier sur lequel vous allez travailler (input.less) et celui du fichier CSS qui sera généré par PHP (out.css).
4. Faites un lien vers le fichier CSS avec la balise link :

<link rel="stylesheet" media="screen" href="out.css" />

Vous pouvez maintenant commencer à travailler sur le fichier input.less, PHP fera le reste.

Variables

Stocker des variables est très pratique pour réutiliser une même valeur plusieurs fois et éviter les répétitions.

@val : 15px;
margin-left: @val;

Vous pouvez faire des opérations (additions, soustractions, divisions et multiplications).

.block_content {
     margin: 50px + 20;
     margin: 20px – 15;
     margin: 20px / 2;
     margin: 5px * 10;
}

@val1 : 20px;
@val2 : 20px;

.block_content_2 {
     margin: @val1 + @val2;
}

Vous pouvez aussi cibler la classe ou l'id qui contient la variable que vous voulez utiliser :

.maClasse {
     @val : 15px;
}


.maClasse_2 {
     margin: .maClasse[@val];
}

Mixins

Les mixins sont comme des variables mais ils peuvent contenir plusieurs propriétés/valeurs.

.styles_box {
     -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
     border-radius: 12px;
}

.block_content {
     .styles_box;
     ...
}

.block_content_2 {
     .styles_box;
     ...
}

Vous pouvez cibler la classe ou l'id qui contient le mixin que vous voulez utiliser :

#monID {
     .maClasse {
          margin: none;
     }
}


.maClasse_2 {
     #monID > .maClasse;
}

Vous pouvez aussi ajouter un ou plusieurs arguments pour en faire des fonctions :

.styles_box (@radius) {
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
     border-radius: @radius;
}

.block_content {
     .styles_box(10px);
     ...
}

.block_content_2 {
     .styles_box(5px);
     ...
}

Un autre exemple :

.styles_box (@marginLeft, @marginRight) {
     margin-left: @marginLeft;
     margin-right: @marginRight;
}

.block_content {
     .styles_box(10px; 10px);
     ...
}

.block_content_2 {
     .styles_box(; 5px); // On n'entre que @marginRight
     ...
}

Héritage

Cette technique permet d'avoir un code moins répétitif et plus joli.

Exemple d'un code CSS sans LessPHP :

#content1 #block_1 a, #content1 #block_2 a, #content1 #block_3 a, #content1 #block_4 a {
     color: #000;
     text-decoration: none;
}

#content1 #block_1 span, #content1 #block_2 span, #content1 #block_3 span, #content1 #block_4 span {
     color: #fff
     text-decoration: none;
}

Grâce à l'héritage, on pourra écrire ce code de la manière suivante :

#content1 {
     #block_1, #block_2, #block_3, #block_4 {
          a {
               color: #000;
               text-decoration: none;
          }
          span {
               color: #fff;
          }
     }
}

Pseudo-classes

Voici comment procéder pour utiliser une pseudo-classe CSS :

a {
     color: #000;
     text-decoration: none;
     :hover {
          color: #fff;
     }
}

.monBlock {
     ...

     :active {
          border: 1px solid #000;
     }
}

Contrairement à la compilation sous LessCSS, il ne faut pas ajouter le signe &.

Importation de fichiers

Vous pouvez utiliser la directive @import sur des fichiers .less

@import "fichier.less";
@import url("fichier.less");

Très pratique, surtout que tous ces fichiers seront compilés pour former un seul fichier CSS, donc vous n'aurez pas le problème de peformance lié à cette règle CSS.

Divers

L'instruction // permet de faire un commentaire sur une seule ligne.

.maClasse { // Commentaire
     ...
}

Ressources

Pour finir, souvenez-vous que Corinne Schillinger avait proposé un atelier très intéressant durant la Kiwiparty, nommé "LESS : moins de CSS, plus de fun". Son intervention est disponible en diaporamas sur Slideshare mais également en vidéo sur Dailymotion.

Pour faire une histoire courte, j'ai toujours voulu utiliser SCSS et SASS pour mes projets web. J'ai acheté et installé Compass.app, super sympathique comme application. Mais j'ai souvent à travailler sur des projets distants. Je voulais donc pouvoir utiliser SCSS sans avoir à télécharger le CSS généré à chaque modification.

J'ai trouvé un moyen de travailler sur un serveur distant, sur un SCSS, enregistrer mes modifications et que je puisse ensuite, tout de suite, rafraîchir ma page et que cette dernière marche avec le CSS généré.

Voici:

• Télécharger PHamlP
• L'installer sur votre serveur distant où vous aller avoir votre CSS.
• Vous créez un fichier .scss et travaillez dessus.

Enfin, vous créez un fichier .php avec ceci à l'intérieur:

<?php
header("Content-Type: text/css");
require_once('sass/SassParser.php'); //including Sass libary (Syntactically Awesome Stylesheets)
$sass = new SassParser(array('style'=>'compressed'));
$css = $sass->toCss('style.scss');
echo $css;
?>

Changez le style.scss par le nom de votre fichier .scss.

Dans votre projet vous mettez dans le header:

<link rel="stylesheet" href="/includes/css/style.php">

Vous pourrez ainsi travailler, sauvegarder et ainsi avoir toujours vos dernières modifications dans le projet.

Mais quel est le problème ?

Les propriétés CSS3 avancées sont intégrées dans les différents navigateurs de manière non concertée et selon le bon vouloir des développeurs de ces butineurs ! Pour ne pas entraver la prise en compte de ces propriétés non validées par le W3C on a autorisé une syntaxe personnalisée afin de permettre leur intégration progressive. Le choix a été fait d'utiliser un préfixe propriétaire pour identifier les propriétés CSS3 prises en compte par chaque type de navigateur (selon leur moteur de rendu). Les préfixes principaux :

• -webkit- (pour Chrome, Safari,…)
• -moz- (pour Firefox, Flock,…)
• -o- (pour Opera)
• -ms- (pour Internet Explorer)

Les développeurs Web souhaitant d'ores et déjà utiliser ces propriétés CSS sont donc contraints à écrire plusieurs lignes pour que la prise en compte de leur feuille de style se fasse le plus largement possible. Un exemple pour illustrer cela. Ci-dessous la fonction de zoom d'élément (ici doublement de la taille de l'élément ayant pour id zoom) si on ne tient compte que de la spécification officielle :

#zoom {
  transform: scale(2);
}

Pour être certain que cette transformation s'opère dans un maximum de navigateurs, il va falloir ajouter plusieurs lignes supplémentaires :

#zoom {
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

Utilité de -prefix-free ?

-prefix-free est un petit fichier JavaScript qui ajoute à la volée le bon préfixe propriétaire selon le navigateur affichant la page. Plus besoin, donc, d'ajouter dans la feuille de style les différentes propriétés propriétaires ! -prefix-free adapte la propriété CSS3 au navigateur. Un exemple, voici la propriété définissant un fond en dégradé :

#degrade {
    background: linear-gradient(#96C7CC, #FFF);
}

Cette ligne de la feuille de style sera remplacée de la manière suivante pour les utilisateurs de Firefox :

#degrade {
    background: -moz-linear-gradient(#96C7CC, #FFF);
}

Et ainsi pour les utilisateurs d'Opera :

#degrade {
    background: -o-linear-gradient(#96C7CC, #FFF);
}

Les avantages de cette technique :

• Les feuilles de styles feront une cure d'amaigrissement non négligeable (une seule ligne pour une même propriété de style).
• Les développeurs web expérimentés apprécieront le gain de temps (pas besoin d'ajouter les lignes avec propriétés préfixées).
• Les débutants en codage CSS3 ne seront pas déboussolés par les pléthores de préfixes.

Comment faire fonctionner -prefix-free ?

La procédure d'installation de -prefix-free est relativement simple. Placer le fichier à un endroit de votre hébergement, puis insérer la ligne suivante dans la partie <head> de vos pages HTML.

<script type="text/javascript" src="chemin/vers/prefixfree.min.js"></script>

Pour minimiser l'effet FOUC - c'est un phénomène décrit par bluerobot.com qui se traduit par l'affichage de la page brute avant celui de la page stylée - il est recommandé de placer la ligne d'appel du fichier JS juste après la déclaration de la CSS.

Conditions d'utilisation

Comme tout script "patchant", l'utilisation de ce genre d'outil est soumise à certaines conditions…

Les points positifs

• Traite les styles CSS appelés par une balise <link> ou contenus dans une balise <style>, mais également ceux des attributs style à l'intérieur des balises.
• Prend en compte les nouveaux éléments <link> et <style> et les modifications des attributs style (nécessite un plugin).
• Est compatible avec jQuery (nécessite un plugin).
• Est compatible avec CSS3 Pie (de manière générale d'ailleurs, ne traite pas les propriétés déjà préfixées).
• Les navigateurs cibles compatibles sont : IE9 et supérieur, Opera 10 et supérieur, Firefox 3.5 et supérieur, Safari 4 et supérieur, Chrome pour Windows et Mac-OS et Arora, Midori, Chromium, Epiphany, Rekonq pour Linux (testés sur Ubuntu 11.10). En règle générale, tout navigateur prenant en charge les propriétés avancées CSS3 devrait être compatible.
• Pour les navigateurs non compatibles avec ce genre de propriétés (IE8 par exemple) et pour les propriétés étant déjà préfixées manuellement, aucun préfixe ne sera ajouté.

Les limitations

• Ajoute une couche JavaScript, donc une requête de fichier et des traitements de données du côté client.
• Ne traite pas les styles CSS incorporés par l'intermédiaire de la règle @import
• Ne traite pas non plus les CSS provenant d'un autre domaine.
• Pas de traitement des styles incorporés dans les balises (attribut style) pour Internet Explorer et Firefox < 3.6.

Pour terminer ce petit tutoriel, une page de démonstration de -prefix-free

Resssources Web

• Site officiel (où vous trouverez le fichier à télécharger)
• Outil de démonstration de préfixage pour votre navigateur (sur le site officiel)
• La page de démonstration de ce tutoriel
• Le code de -prefix-free sur github (permet également de signaler un bogue)

L'erreur 404 apparait lorsqu'une page est introuvable. C'est une erreur plus ou moins fréquente qui indique simplement que le document recherché n'est plus disponible par l'adresse renseignée dans la barre d'adresse. Cela peut être causé par une erreur d'écriture d'un lien, ou par un déplacement de fichier dont le lien pour y accéder n'aurait pas été mis à jour (soit sur le site, soit sur le moteur de recherche qui n'a pas encore eu le temps de mettre à jour sa base de données).

C'est assez typique des CMS pour lesquels les contenus peuvent beaucoup plus facilement être mis à jour, les pages et articles peuvent très rapidement être renommés ou supprimés, les erreurs 404 sont donc vite arrivées.

Wordpress propose dans son template par défaut une page 404.php très basique.
Beaucoup de Webdesigners s'amusent à transformer cette page en un élément graphique original, il y a même des sites spécialisés qui référencent ce type de page sur critère de l'originalité.

En dehors de l'aspect graphique, cette page peut facilement se voir attribuer une fonction d'alerte qui va permettre au webmaster d'être prévenu de son affichage.

Je vous présente un code PHP à placer dans la page 404.php de WordPress, ou à exécuter/afficher sur la condition is_404()

Ce code récupère les informations de navigation de l'utilisateur (url de provenance et url demandée) et envoie un rapport par e-mail au Webmaster. Idéal pour corriger ses erreurs rapidement :)

Voici un code entièrement commenté pour réaliser une telle page. Le reste de la structure est à réaliser par vos soins, bien entendu.

<?php 
	// informations concernant votre site
	$adminemail = get_bloginfo('admin_email'); //le mail du webmaster
	$website = get_bloginfo('url'); //l'url du site
	$websitename = get_bloginfo('name'); // le nom du site
	
	// on commence à composer notre futur paragraphe
	$output_p = '<p>Vous ';

	// si le visiteur a tapé l'adresse manuellement
	if (!isset($_SERVER['HTTP_REFERER'])) :
		$output_p .= 'avez essayé de rejoindre la page ';
		$output_bonux = 'Tout n\'est pas perdu !'; //optionnel

	// si le visiteur a cliqué sur un lien (referer)
	elseif (isset($_SERVER['HTTP_REFERER'])) :
		$output_p .= 'avez cliqué un lien pour rejoindre la page ';

		$failuremess = "Un utilisateur a essayé d'aller à la page $website".$_SERVER['REQUEST_URI']."
et a reçu une erreur 404 (page not found). ";
		$failuremess .= "Il venait de l'url : ".$_SERVER['HTTP_REFERER'];
		
		$headers = 'From: '.$websitename.' <noreply@'.$website.'>'."\r\n";
		$headers .= 'Content-Type: text/html; charset="UTF-8"'."\r\n";

		$mailing = mail($adminemail, "[".$websitename."] 404 : ".$_SERVER['REQUEST_URI'], $failuremess, $headers);
	
		// si le mail est bien envoyé
		if($mailing) : 
			$output_bonux .= "Un administrateur a aussi été prévenu du problème par e-mail. Il fera le nécessaire le plus rapidement possible.";
			
		// s'il ne l'est pas
		else : 
			$output_bonux .= "L'administrateur du site aurait dû être prévenu mais le mail n'a pas pu lui parvenir.<br />";
			$output_bonux .= "Si vous souhaitez lui signaler le problème, merci de copier le message suivant :<br />";
			$output_bonux .= "<code>Referer : ".$_SERVER['HTTP_REFERER']."<br />";
			$output_bonux .= "Request : $website".$_SERVER['REQUEST_URI']."</code> ";
			$output_bonux .= "à l'adresse suivante ".$adminemail;
		endif;
		
	endif;

	// on termine notre paragraphe, 
	// il s'agit de la partie qui apparait de toute manière
	$output_p .= ': <br /><code class="url">'.$website.$_SERVER['REQUEST_URI'].'</code><br />'; 
	$output_p .= ' et elle semble ne pas exister.<br />'; 
	$output_p .= $output_bonux.'<br />'; 
	$output_p .= 'Vous pouvez revenir en arrière et essayer à nouveau, ou effectuer une recherche :</p>'; 
	
	// affichons le texte
	echo $output_p;
	
	// affichons le formulaire de recherche maintenant
	get_search_form();
	
	/* ou utilisez une fonction "moins wordpress" comme
	include(TEMPLATEPATH . "/searchform.php"); 
	*/ 
?>

Bien entendu ce code est très minimaliste et peut largement être optimisé avec quelques contrôles ou informations supplémentaires.
Il n'est pas destiné uniquement à WordPress puisqu'il vous suffit de remplacer les fonctions prédéfinies (blog_info() ou get_search_form()) par vos fonctions/variables personnelles pour l'adapter à un autre type de site web.

J'espère que cette astuce vous servira !

Source originale : Une page 404 utile sous WordPress

Les menus de navigation déroulants posent de nombreux problèmes d'accessibilité dans des conditions d'usage "classique", et ceux-ci se voient décuplés dans le monde du Web mobile où la navigation verticale est à privilégier (l'affichage sous forme de colonnes côte à côte doit être prohibé sur de petits écrans).

La technologie CSS3 des Media Queries va permettre de réaliser une intégration adaptée aux écrans de petite taille en détectant deux largeurs que nous aurons définies par avance, en amont du projet (ici "moins de 1000 pixels" et "moins de 540 pixels").

En action !

Voici ci-dessous les captures d'écran des différents états du menu selon les tailles d'écran respectives.

Menu "classique" (écrans de plus de 1000px) :

Menu sur écrans réduits (automatiquement déployé) :

Menu en version mobile (déployé sur une colonne) :

Voir et tester l'exemple en ligne

Télécharger tous les fichiers de ce tutoriel (3 Ko)

Code HTML

La structure HTML du menu se présente, sans surprise, sous forme d'une liste non ordonnée d'éléments, parfois imbriquée lorsqu'un sous-menu doit apparaître. La liste principale "menu" est placée au sein d'un élément HTML5 nav :

<nav id="navigation" role="navigation">
  <ul id="menu" role="menubar">
    <li><a href="#"><span>Blog</span></a></li>
    <li class="sub"> <a href="#" role="menuitem"><span>Features</span></a>
       <ul>
         <li><a href="#" role="menuitem"><span>Sub cat 1</span></a></li>
         <li><a href="#" role="menuitem" class="current"><span>Sub cat 2</span></a></li>
         <li><a href="#" role="menuitem"><span>Sub cat 3</span></a></li>
       </ul>
    </li>
    <li><a href="#" role="menuitem" class="current"><span>Services</span></a></li>
    <li class="sub"><a href="#" role="menuitem"><span>Archives</span></a>
       <ul>
         <li><a href="#" role="menuitem"><span>Sub 1</span></a></li>
         <li><a href="#" role="menuitem"><span>Sub 2</span></a></li>
       </ul>
     </li>
     <li> <a href="#" role="menuitem"><span>Contact</span></a> </li>
  </ul>
</nav>

L'élément meta viewport permet de fixer la zone d'affichage ainsi que la résolution de la page à un ratio de 1:1, nous allons ajouter cette ligne au sein de l'élément head de la page HTML :

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

JavaScript

L'action de déroulement du menu est déclenchée via JavaScript : lorsque JavaScript est activé, alors un attribut class="drop" est ajouté à ul#menu. Ce qui à pour but d'activer le format déroulant du menu.

Le menu est accessible avec la touche tab. Il est aussi possible d'utiliser la combinaison de touches CTRL + SHIFT pour prendre le focus sur le premier élément du menu. La fonction setTimeout() est utilisée pour qu'un sous menu affiché disparaisse avec un temps de retardement.

Vous retrouverez le code JavaScript en affichant la source de la page d'exemple en ligne.

CSS

Les étiquettes principales sont alignées les unes à côté des autres avec display:inline-block. Les espaces blancs indésirables (white-space) sont supprimés "en collant" les balises fermantes et ouvrantes concernés (exemple : </li><li>). Parcourez l'excellent tutoriel de CreativeJuiz pour d'avantages de solutions sur les white-space.

Le sous-menu est masqué hors de la fenêtre au départ à l'aide d'un positionnement absolu en left: -9999px;. Pas d'utilisation de display:none; ici.

Media Queries

C'est là que tout se joue ! Les CSS3 Media Queries sont une aubaine pour l'adaptation d'un design aux terminaux nomades puisqu'ils offrent la possibilité - entre autre - de détecter la résolution de la fenêtre et d'appliquer des styles CSS différents selon les cas de figure. Vous en saurez davantage sur cette technologie en parcourant l'article "CSS3 Media Queries" publié récemment.

Nous avons choisi d'adapter le menu déroulant à trois situations différentes :

1. Sur écran classique (de plus de 1000px de large) : il s'agira des styles CSS classiques, appliqués par défaut.
2. Sur écran réduit (moins de 1000px de large) : nous avons prévu de conserver l'aspect horizontal du menu, mais en déployant par défaut les sous-sections.
3. Sur écran mobile (moins de 540px de large) : le menu s'affichera sur une seule colonne et ses sous-sections seront déployées.

Voici comment nous allons déclarer nos Media Queries au sein de la même feuille de styles unique :

/* ici les instructions pour écrans "classiques" (plus de 999px de large). */

@media screen and (max-width:999px) { /* ici les instructions pour écrans de moins de 999px de large. */ } 

@media screen and (max-width:540px) { /* ici les instructions pour écrans de moins de 540px de large. */ }

Vous retrouverez l'intégralité du code CSS en affichant la source de la page d'exemple en ligne.

Conclusion

L'adaptation d'un design, et plus particulièrement d'un menu déroulant, aux smartphones et tablettes n'est pas une mission impossible grâce aux CSS avancées et surtout si cette adaptation a été pensée dès en amont du projet web.

Les solutions sont d'ailleurs multiples et nous n'avons pas la prétention d'affirmer que cette approche est parfaite, elle n'est qu'une façon de répondre à divers besoins et contraintes imposées par les médias de taille réduite.

Elle a cependant le mérite d'exister et aura rempli sa mission si elle vous évite de vous arracher les cheveux et de perdre du temps sur vos projets de conception de site pour le Web mobile.

Lorsque vient le temps de déboguer tout ça, la tâche n’en est pas plus simple vu le peu d’outils le permettant – et puis surtout vu la taille de l’écran, on n’est pas encore sorti du bois.

Dragonfly pour Opera propose déjà une solution native de débogage à distance. Mais cette technique est assez limitée, surtout quand l’on doit prendre en compte les autres mobiles / navigateurs. Plusieurs constructeurs de téléphone proposent également des émulateurs, mais rien ne vaut jamais l’utilisation d’un vrai périphérique (histoire de « feel and touch ») – et ce surtout du côté de la programmation web-client, et surtout de JavaScript.

C’est afin de nous aider dans cette tâche périlleuse que JsConsole a été créé.

Une console JavaScript pour Mobile

JsConsole permet de déboguer une application JavaScript à distance grâce à une console se trouvant sur votre ordinateur de bureau servant à déboguer directement sur votre téléphone.
Pour faire une analogie, c’est comme si vous utilisiez la console JS de Firebug à distance.

D’une part, l’outil récupérera chaque appel à console.log provenant de votre mobile qu’il affichera ensuite sur votre ordinateur de bureau.
D’autre part, JsConsole vous permettra d’injecter du code JavaScript directement dans vos pages.
Vous comprendrez que cet outil ne s’utilise donc qu’en phase développement ou débogue et devra impérativement être enlevé avant la mise en production de votre site Web !

Initialiser JsConsole

La première étape consistera à créer le lien entre JsConsole et votre site. Pour ce faire, entrez la première commande dans la console :

:listen 

Cette commande vous renverra un identifiant et une balise <script> à intégrer à même votre site Web. Le code reçu ressemblera à ceci :

<script src="http://jsconsole.com/remote.js?FAE031CD-74A0-46D3-AE36-757BAB262BEA"></script>    

Vous n’avez dès lors plus qu’à intégrer cette ligne à l’endroit désiré de votre code HTML (dans le head par exemple).

Si vous finissez par utiliser cet outil fréquemment, afin d'éviter d’avoir à changer la balise <script> à chaque test, vous pouvez réutiliser le même identifiant en le spécifiant dans la commande suivante :

 :listen FAE031CD-74A0-46D3-AE36-757BAB262BEA

De même, vous pouvez également spécifier l’identifiant que vous souhaitez utiliser. Par exemple :

 :listen kiwi

Qui ira de pair avec cette balise <script>

<script src="http://jsconsole.com/remote.js?kiwi"></script>    

Une astuce consiste à enregistrer l'URL de la commande dans vos signets.
Exemple d'URL : http://jsconsole.com/?%3Alisten%20myverygoodcode

Une fois ce code inséré sur votre site, vous pouvez tester la connexion avec une simple ligne au sein de votre page web, par exemple :

<script type="text/javascript">
     console.log("Connexion établie !");
</script>  

Connectez-vous ensuite à votre site à l’aide de votre mobile, et vérifiez que vous avez bien reçu la notification dans la console sur votre ordinateur de bureau.

Envoyer des directives à partir de JsConsole

Une fois la connexion correctement établie, vous pouvez envoyer n’importe quelle ligne de code JavaScript sur votre mobile.
Pour cela, il vous suffira de taper la ligne de code à exécuter directement dans la console.
Par exemple :

 document.innerHTML = "Hello World !";

Vous pourrez également utiliser vos librairies habituelles, par exemple avec jQuery installée sur votre site, on pourrait envoyer ce bout de code :

 $("#monelement").fadeOut();   

En conclusion

Voilà donc un rapide survol de cet outil plus que nécessaire lorsque nous programmons pour périphériques mobiles; et surtout lorsque nous utilisons les fonctions leurs étant liées. JsConsole possède également d’autres fonctions intéressantes, mais moins primordiales. Pour cela, je vous invite à lire la documentation (en anglais) sur le site de JsConsole.

Après cela, plus aucune erreur de script ne devrait vous effrayer !

Alors que CSS3 continue son chemin dans les validations, les réécritures et la prise en charge par les navigateurs, il y a des choses qui commencent à être plutôt bien implémentées par la plupart de ces derniers.

La pseudo classe :target et la propriété transition - que nous avons déjà mis à l'épreuve dans ce long tutoriel sur la création d'un slideshow en CSS3 - vont être nos armes pour ce tutoriel.

Qu'allons-nous produire ?

Le but de ce tutoriel est de créer un volet caché dans un coin de la page que nous allons pouvoir révéler en cliquant sur un lien.
Dans un premier temps nous allons juste nous charger de révéler le volet, nous verrons comment faire pour replacer notre volet à son état initial dans un second temps.

la démonstration

Structure de base

Il va nous falloir une structure HTML (vous vous en doutiez, j'imagine).
Pour se faire nous allons composer une base HTML que nous complèterons plus tard.

<div id="volet">
	<p>Lorem Elsass ipsum réchime amet sed bissame so libero. DNA, leo Richard Schirmeck tellus</p>
	<p>Wurscht elementum semper tellus s'guelt Pfourtz !</p>
	
	<a href="#volet" class="ouvrir">Ouvrir !</a>
</div>

Une division, des paragraphes pour le contenu, et un lien pour l'action, nous n'aurons besoin de rien de plus ici.

Styles de base

Passons à notre code CSS.
Nous allons fixer une largeur à notre volet (et quelques couleurs) et à notre lien.

#volet {
	width: 250px;
	padding: 10px;
	background: #6B9A49; color: #fff;	
}
#volet a.ouvrir {
	padding: 10px 25px;
	background: #555;
	color: #fff;
	text-decoration: none;
}

Puis nous décalons le volet en dehors de l'écran en ne faisant ressortir que notre lien.

#volet {
	position: relative;
	left: -270px; top: 55px;
}
#volet a.ouvrir {
	position: absolute;
	right: -88px;
	top: 150px;

	/* quelques styles CSS3 */
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);

	-moz-border-radius: 0 0 8px 8px;
	-webkit-border-radius: 0 0 8px 8px;
	border-radius: 0 0 8px 8px;
}

Ensuite il nous faut préparer la transition sur le volet.

#volet {
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
}

Et enfin déterminer à quel moment nous allons faire sortir le volet.

#volet:target {
	left: 0;
}

Ici, le lien cible l'élément porteur d'id "volet", lorsque cet élément est ciblé (état :target) nous attribuons zéro à sa propriété left. Une transition va s'effectuer pour faire passer cette valeur de -300 à 0 pixel en 0,5 seconde.

Si nous en restons là l'utilisateur se retrouve avec un volet ouvert sans avoir la possibilité de le fermer.
Passons à la seconde action.

la démonstration

Un peu plus de HTML

Concrètement, nous avons une action de plus à effectuer, il nous faut donc un lien de plus, plaçons-le après le lien ouvrir
Ce lien aura besoin lui aussi de cibler le volet pour lui dire de se cacher...
Ah ! Mais ça ne va pas être possible puisque il existe déjà une réaction lorsque #volet est ciblé.

Nous allons donc ajouter un conteneur à notre volet pour pouvoir le cibler et agir sur ses enfants. Procédons, vous comprendrez rapidement.

<div id="volet_clos">
	<div id="volet">
		<p>Lorem Elsass ipsum réchime amet sed bissame so libero. DNA, leo Richard Schirmeck tellus</p>
		<p>Wurscht elementum semper tellus s'guelt Pfourtz !</p>
	
		<a href="#volet" class="ouvrir">Ouvrir !</a>
        <a href="#volet_clos" class="fermer">fermer !</a>
	</div>
</div>

Avec cette forme je peux cibler #volet_clos et faire quelque chose dans le genre :

#volet_clos:target #volet {
	/* retourne à ta place */
}

C'est ce que nous ferons après. Pour le moment considérons nos nouveaux éléments, et voyons quels styles leur appliquer.

Un peu plus de CSS

Notre nouveau conteneur n'a une présence que fonctionnelle. Nous n'avons pas besoin de le styler.

Notre nouveau lien va avoir les mêmes styles que notre lien déjà en place. Il suffit dans ce cas de doubler le sélecteur :

#volet a.ouvrir,
#volet a.fermer {
	/* les styles donnés précédemment */
}

Sauf que, par défaut notre lien .fermer doit être caché, rajoutons :

#volet a.fermer {
	display: none;
}

Maintenant nous devons faire notre décalage inverse du volet. Pour se faire nous effectuerons notre déplacement lorsque l'élément ciblé par notre lien "Fermer" le sera (ciblé).

#volet_clos:target #volet {
	left: -270px;
}

Et voilà ! C'est prêt !
Sauf que, si vous testez en l'état, nous en sommes toujours au même stade, puisque notre lien "Fermer" est caché.
Pour le faire apparaitre, nous devons cacher notre lien "Ouvrir" et afficher notre lien "Fermer" lorsque le volet s'ouvre, donc lorsque #volet est ciblé.

#volet:target a.ouvrir {
	display: none;
}
#volet:target a.fermer {
	display: block;
}

Cette fois c'est la fin !
Lorsque nous cliquons sur Ouvrir, l'élément #volet est ciblé, il se déploie et le lien "Fermer" prend la place du lien "Ouvrir".
Lorsque nous cliquons sur Fermer, l'élément #volet_clos est ciblé, son fils #volet se planque et le lien "Ouvrir" prend la place du lien "Fermer".

Limites connues

Et qu'ça saute !

Cette technique utilise le principe de l'ancre, qui comme nous la connaissons, permet de faire un saut vers l'élément ciblé.
Dans le cas où votre élément est positionné en absolute ou relative, la position de l'élément est déterminée, et le saut aura lieu si votre page est suffisamment haute. Cet effet peut être indésirable.

En plaçant l'élément parent en position fixed, nous pouvons résoudre ce problème de saut puisque l'emplacement absolu de l'élément dépend de votre position dans la page.

petit aperçu

Lecteur d'écran

Le contenu sorti de la zone visible est tout de même lu par les lecteurs d'écran (car déplacé et non caché grâce à display: none). Ce n'est pas réellement problématique ici, sauf lorsque le lecteur va lire les liens "Ouvrir" et "Fermer". Ces liens n'ont pas d'utilité si le contenu du volet a déjà été lu. Nous pouvons donc désactiver leur présence en utilisant l'attribut ARIA aria-hidden directement sur nos liens.

<a href="#volet" class="ouvrir" aria-hidden="true">Ouvrir !</a>
<a href="#volet_clos" class="fermer" aria-hidden="true">fermer !</a>

Amusez-vous bien ;)

Tutoriel issu de ma présentation à la KiwiParty 2011.

La géolocalisation fait partie des API gravitant autour de HTML5 (Geolocation API Specification) et des nouvelles fonctionnalités introduites par la mobilité. Ses usages sont nombreux et souvent corrélés avec des bases de données de renseignements géographiques :

• Plans interactifs
• Renseignements locaux en mobilité
• Recherche contextualisée sur les moteurs
• Méta-informations jointes aux photos vidéos

De quelles informations a-t-on besoin pour se géolocaliser ?

Dans l'espace, trois coordonnées sont nécessaires :

• Latitude
• Longitude
• Altitude (facultative selon les besoins, la plupart des humains se déplaçant sur un même plan en deux dimensions à la surface de notre planète, exception faite des créatures souterraines)

Une quatrième coordonnée peut être prise en compte pour les puristes : le temps.

De quels moyens dispose un navigateur pour se géolocaliser ?

Différentes techniques sont mises à contribution avec plus ou moins de précision pour obtenir les coordonnées de géolocalisation. Elles peuvent être combinées pour affiner le résultat au cours du temps.

• Par satellite GPS (mobiles)
• Par triangulation GSM/3G (mobiles)
• Par triangulation WiFi (mobiles et bases de données adresses MAC)
• Par adresse IP (correspondance avec bases de données)

Si les deux premiers principes peuvent être mis en oeuvre directement par les plate-formes mobiles (smartphones et tablettes cousines), les suivants dépendent de requêtes formulées à des bases de données et peuvent aussi être employées par les navigateurs classiques sur des postes fixes.

Par exemple, vous pourrez explorer du côté de Firefox 4 l'URL appelée dans about:config, à la clé geo.wifi.url. Celle-ci correspond actuellement à un service de Google : https://www.google.com/loc/json

Certaines méthodes telles que le GPS sont plus lentes que d'autres et plus consommatrices en énergie notamment sur les mobiles. C'est pourquoi la première étape est souvent d'obtenir une approximation grossière - souvent avec une triangulation GSM - puis de mettre en route le module GPS au bout de quelques secondes (ceci se visualise sur iOS par la diminution progressive de l'étendue du cercle bleu de localisation).

Disponibilité de l'API ?

L'API repose sur l'objet geolocation membre de navigator.

if(navigator.geolocation) {
  // L’API est disponible
} else {
  // Pas de support, proposer une alternative ?
}

N'hésitez pas à explorer cet objet via la console de développement, disponible désormais sur tous les navigateurs modernes. Les captures d'écran ci-dessous correspondent à Firebug sous Firefox (F12), et sont similaires au résultat dans les extensions équivalentes pour Opera (Dragonfly), Chrome console JavaScript (Ctrl+Maj+J) ou même Internet Explorer.

Cette interface est équipée des méthodes getCurrentPosition et watchPosition qui seront détaillées par la suite. La détection de la disponibilité de l'API de géolocalisation peut aussi être menée avec Modernizr.

Appels asynchrones et fonctions de callback

La détection pouvant nécessiter un temps variable (et incertain), les appels aux méthodes de géolocalisation sont asynchrones. C'est-à-dire qu'ils retournent tout de suite pour donner la main à la suite du code, tout en déclenchant les techniques permettant de réunir toutes les informations nécessaires. Une fois ces informations obtenues de la part du navigateur et du système d'exploitation, une fonction de callback définie par le développeur peut être appelée. Celle-ci recevra en argument un objet comportant toutes ces valeurs réunies dans les propriétés d'un objet JavaScript.

Retrouvez ici un article pour Comprendre l'utilité des fonctions callback.

Confidentialité

Pour des raisons évidentes de confidentialité, le navigateur ne communiquera pas vos coordonnées géographiques sans votre consentement explicite. Un appel aux deux fonctions précitées provoquera nécessairement un message d'avertissement pour l'utilisateur.

Les notifications peuvent revêtir des formes différentes, notamment entre navigateurs mobiles et de bureau.

Les doigts dans le code

Pour introduire la démonstration, débutons par une page HTML classique.

<!doctype html>
<html lang="fr">
<head>
<title>HTML5 : Géolocalisation</title>
<meta charset="utf-8">
</head>
<body>

<!-- Un élément HTML pour recueillir l’affichage -->
<div id="infoposition"></div>

</body>
</html>

La géolocalisation repose sur deux méthodes :

• getCurrentPosition permettant un ciblage ponctuel
• watchPosition pour un suivi continu

getCurrentPosition

Nous récupérons grâce au code ci-dessous les coordonnées, la fonction "callback" est appeler directement à la suite du code et ainsi il ne reste plus qu'à récupérer et afficher le résultat grâce aux propriétés de l'objet JavaScript position : position.coords.latitude pour la latitude, position.coords.longitude pour la longitude et enfin position.coords.altitude pour l'altitude.

Pour l'exemple 1, on passe en argument à getCurrentPosition une fonction anonyme qui sera exécutée au moment opportun, lorsque les données seront disponibles. Dans le cas de l'exemple 2, la fonction est déportée en-dehors de l'appel, nommée maPosition. Son fonctionnement est identique, il suffit de passer son nom en argument à getCurrentPosition().

Exemple 1 : Fonction anonyme passée en argument de getCurrentPosition()

navigator.geolocation.getCurrentPosition(function(position) {
    var infopos = "Position déterminée : 
";
    infopos += "Latitude : "+position.coords.latitude +"
";
    infopos += "Longitude: "+position.coords.longitude+"
";
    infopos += "Altitude : "+position.coords.altitude +"
";
    document.getElementById("infoposition").innerHTML = infopos;
});

Exemple 2 : fonction de callback nommée (maPosition) et passée en argument à getCurrentPosition()

function maPosition(position) {
    var infopos = "Position déterminée : 
";
    infopos += "Latitude : "+position.coords.latitude +"
";
    infopos += "Longitude: "+position.coords.longitude+"
";
    infopos += "Altitude : "+position.coords.altitude +"
";
    document.getElementById("infoposition").innerHTML = infopos;
}

navigator.geolocation.getCurrentPosition(maPosition);

Ici les exemples restent simples, nous allons voir plus loin que faire en cas d'erreur et comment coupler cette fonction avec l'API Google Maps.

Exemple de carte avec getCurrentPosition()

watchPosition

Pour suivre la position d'un élément, il suffit de remplacer getCurrentPosition() par la méthode watchPosition().

// Fonction de callback en cas de succès
function surveillePosition(position) {
    var infopos = "Position déterminée : 
";
    infopos += "Latitude : "+position.coords.latitude +"
";
    infopos += "Longitude: "+position.coords.longitude+"
";
    infopos += "Altitude : "+position.coords.altitude +"
";
    infopos += "Vitesse  : "+position.coords.speed +"
";
    document.getElementById("infoposition").innerHTML = infopos;
}

// On déclare la variable survId afin de pouvoir par la suite annuler le suivi de la position
var survId = navigator.geolocation.watchPosition(surveillePosition);

Pour stopper ce suivi continu, il faut réexploiter la variable obtenue (qui est en quelque sorte un pointeur vers le processus de suivi) avec la méthode clearWatch().

//Annule le suivi de la position si nécessaire.
navigator.geolocation.clearWatch(survId);

On aurait pu ne pas déclarer de fonction et faire comme pour l'exemple 1 de getCurrentPosition(). Mais il est toujours préférable d'avoir un code clair et détaillé.

Exemple de carte avec watchPosition()

Gestion d'erreur

Les retours d'erreurs potentiels sont très importants et méritent d'être pris en compte dans toute application web. Ils permettent de savoir si l'utilisateur a refusé d'être géolocalisé, ou si la position n'a pu être obtenue.

// Fonction de callback en cas d’erreur
function erreurPosition(error) {
    var info = "Erreur lors de la géolocalisation : ";
    switch(error.code) {
    case error.TIMEOUT:
    	info += "Timeout !";
    break;
    case error.PERMISSION_DENIED:
	info += "Vous n’avez pas donné la permission";
    break;
    case error.POSITION_UNAVAILABLE:
    	info += "La position n’a pu être déterminée";
    break;
    case error.UNKNOWN_ERROR:
    	info += "Erreur inconnue";
    break;
    }
document.getElementById("infoposition").innerHTML = info;

Options

Diverses options peuvent être précisées pour configurer les appels :

• enableHighAccuracy : (true ou false > valeur par défaut) obtient une position plus précise via GPS
• timeout : (type long ou Infinity > valeur par défaut) durée avant renvoi vers la function d'erreur
• maximumAge : (type long ou Infinity, 0 > valeur par défaut) durée de la mise en cache de la position courante, si maximumAge:0 alors la position ne viendra jamais du cache, elle sera toujours renouvelée

// Le paramètre maximumAge met en cache la position 
// pour une durée de 600000 millisecondes (10 minutes), 
// ainsi la position est mise à jour toutes les 10 minutes au maximum.
// Le timeout est nul il renvoie immédiatement l'erreur.
navigator.geolocation.getCurrentPosition(maPosition, erreurPosition,{maximumAge:600000, timeout:0});

// Le paramètre maximumAge étant égal à 0,
// il demande une actualisation systématique de la position.
navigator.geolocation.getCurrentPosition(maPosition, erreurPosition,{maximumAge:Infinity, timeout:100});

// Avec activation de l'option enableHighAccuracy
navigator.geolocation.getCurrentPosition(maPosition, erreurPosition,{enableHighAccuracy:true});

Exploiter les coordonnées

Une fois les informations obtenues, il y a potentiellement deux actions à entreprendre : exploiter directement les coordonnées sur une carte affichée sur la page, ou les mémoriser pour les valider avec un formulaire, ou les deux.

Soumettre les informations au serveur

Pour cela deux méthodes sont possibles :

Effectuer un appel AJAXavec jQuery :

$.post("http://www.votredomaine.com/position.php",{lat:position.coords.latitude,lng:position.coords.longitude});

Cette méthode envoie en POST les résultats obtenus dans l'objet position.

Se servir de champs cachés :

On place, dans le code HTML, des champs cachées pour la latitude et la longitude

<input type="hidden" name="lat" id="lat" /> 
<input type="hidden" name="lng" id="lng" />

Dans le script jQuery, on attribue la valeur de la latitude et de la longitude dans les champs correspondants.

$("#lat").val(position.coords.latitude); 
$("#lng").val(position.coords.longitude);

Puis l'on effectue la requête en PHP pour envoyer les données sur le serveur. Les données se retrouvent en entrée dans les tableaux $_POST ou $_GET selon la méthode d'envoi, ou plus simplement $_REQUEST.

echo $_REQUEST['lat'];
echo $_REQUEST['lng'];

Google Maps API

L'API Google Maps V3 est très aisée à exploiter en combinaison à la géolocalisation. Elle comprend de nombreuses fonctionnalités pour afficher une carte géographique, positionnée et équipée de marqueurs.

Vous aurez au préalable chargé l'API par une balise de script.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=set_to_true_or_false"></script>

Et préparé un élément HTML destiné à recevoir la carte.

<div id="map"></div>

Nous allons tout d'abord définir une position par défaut, puis quelques options pour l'affichage de la carte.

// Position par défaut (Châtelet à Paris)
var centerpos = new google.maps.LatLng(48.579400,7.7519);

// Options relatives à la carte
var optionsGmaps = {
    center:centerpos,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 15
};
// ROADMAP peut être remplacé par SATELLITE, HYBRID ou TERRAIN
// Zoom : 0 = terre entière, 19 = au niveau de la rue
 
// Initialisation de la carte pour l'élément portant l'id "map"
var map = new google.maps.Map(document.getElementById("map"), optionsGmaps);
  
// .. et la variable qui va stocker les coordonnées
var latlng;

Aperçu de l'affichage :

Nous pouvons désormais passer à la suite, c'est ici qu'interviennent les fonctions callback et la gestion des erreurs, vues précédemment. La fonction surveillePosition(), correspondant au suivi de la position, est déclarée afin de récupérer les coordonnées.

// Fonction de callback en cas de succès
function maPosition(position) {
 
    var infopos = "Position déterminée : 
";
    infopos += "Latitude : "+position.coords.latitude +"
";
    infopos += "Longitude: "+position.coords.longitude+"
";
    infopos += "Altitude : "+position.coords.altitude +"
";
    infopos += "Vitesse  : "+position.coords.speed +"
";
    document.getElementById("infoposition").innerHTML = infopos;
 
    // Un nouvel objet LatLng pour Google Maps avec les paramètres de position
    latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 
    // Ajout d'un marqueur à la position trouvée
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"Vous êtes ici"
    });
    
    // Permet de centrer la carte sur la position latlng
    map.panTo(latlng);
 
}

Sans oublier la gestion des erreurs !

// Fonction de callback en cas d’erreur
function erreurPosition(error) {
    var info = "Erreur lors de la géolocalisation : ";
    switch(error.code) {
    case error.TIMEOUT:
    	info += "Timeout !";
    break;
    case error.PERMISSION_DENIED:
	info += "Vous n’avez pas donné la permission";
    break;
    case error.POSITION_UNAVAILABLE:
    	info += "La position n’a pu être déterminée";
    break;
    case error.UNKNOWN_ERROR:
	info += "Erreur inconnue";
    break;
    }
    document.getElementById("infoposition").innerHTML = info;
}

Il ne vous reste plus qu'à "lancer" le suivi de la position, sans oublier la possibilité d'annuler le suivi.

if(navigator.geolocation) {
    survId = navigator.geolocation.getCurrentPosition(maPosition,erreurPosition);
} else {
    alert("Ce navigateur ne supporte pas la géolocalisation");
}

Bonus : Personnaliser le marqueur est possible avec le paramètre icon passé à l'objet du constructeur Marker().

marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title:"Vous êtes ici",
    icon: "fleche.png"
});

Autres API

Des constructeurs de mobiles ont développé leurs propres méthodes au fur et à mesure de la sortie des modèles, en attendant une unification des spécifications.

• BlackBerry
• Palm
• OMTP/Bondi
• Symbian

Heureusement le framework geo-location-javascript vient à la rescousse pour proposer le support de diverses plateformes et pour unifier toutes ces API au sein d'appels conventionnels, suivant même d'extrêmement près la spécification du W3C/WhatWG pour HTML5.

Exemple utilisant la librairie geo-location-javascript

Il n'est pourtant pas rare de rencontrer, au détour d'un clavier, un jeune webdesigner s'arracher les cheveux non pas parce qu'il ne dispose que d'Internet Explorer 6, mais parce qu'il s'embrouille dans la syntaxe employée :

Et après ça, je dois mettre quoi ? Un point ? Une virgule ? Un espace ? Des guillemets ?

Fichtre, ça change tout le temps, c'est compliqué ! Je choisis quoi, moi ? Finalement, les CSS c'est plus compliqué qu'on m'avait dit !

Voici quelques règles générales à adopter ainsi que leurs éventuels pièges.

Accolades, point-virgule, double-point ?

Le principe général d'une règle CSS est d'associer plusieurs éléments : le sélecteur (l'élément HTML sur lequel vont s'appliquer les styles), une propriété, et une valeur associée à la propriété.

Les règles typographiques sont les suivantes :

• Un bloc de déclarations (ensemble des couples propriété-valeur) est entouré d'accolades.
• La propriété est séparée de sa valeur par un double-point,
• Les déclarations ou règles (couple propriété-valeur) sont terminées par un point-virgule. Celui-ci est optionnel sur la dernière déclaration d'un bloc.

Quelques exemples :

.important {
  color: red
}
input[type="text"] {
  color: red;
}

Traits d'union ou collé ?

Lorsque les noms des propriétés ou des valeurs sont complexes ou s'expriment en plusieurs termes accolés, elles s'écrivent généralement à l'aide de traits d'union.

Les règles sont les suivantes :

• Sauf exception, une propriété s'écrit à l'aide d'un trait d'union lorsqu'elle est composée de plusieurs termes,
• Sauf exception, une valeur s'écrit à l'aide d'un trait d'union lorsqu'elle est composée de plusieurs termes,
• Il y a certaines exceptions (ex: lightblue, nowrap,…).

Quelques exemples :

border-radius: 6px 6px 0 0;
padding: 0 10px 6px 1em;
background: #000 url("img/concombre.jpg") left top no-repeat;
font-family: Arial, Verdana, serif;
background-color: rgba(255, 255, 255, .2);

Guillemets ? Simples ? Ou pas ?

Il est de notoriété publique qu'une chaîne de caractère s'écrit entre quotes simples ou doubles. Le langage CSS ne déroge pas à la règle, bien qu'il y ait certaines subtilités.

Les règles sont les suivantes :

• Pas de guillemets en règle générale pour les valeurs CSS, sauf les chaînes de caractères,
• Dans le cas des chaînes de caractères, les spécifications CSS2 et CSS3 indiquent que dès lors qu'une valeur contient des caractères non alphanumériques simples (A-Z, 0-9, tiret, underscore), elle doit être entourée de quotes simples ou doubles,
• Exception : les chaînes de caractères générées avec la propriété content nécessitent toujours des guillemets.

Quelques exemples :

Chemin basé sur la fonction url() :

background: url();
@import: url();
content: url();

Fonctions avec parenthèses :

url()
rgb()
rgba()
attr()
calc()
min()
max()
any()

Sélecteurs avec parenthèses :

:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:not()

Media queries :

@media (max-width: 800px) {...}

Préfixes ?

Depuis CSS2.1 le W3C invite les constructeurs à préfixer leurs propriétés qui sont en cours de développement, non finalisées (-webkit, -moz-, -ms-, -o-, etc.). Dans certains cas, le préfixe se place devant la valeur (lorsque la propriété est finalisée mais pas la valeur). Par exemple : display:-moz-box (et non -moz-display: box).

Les microformats ont fait leur apparition en 2003 (XFN) sous l'impulsion de personnes publiant des blogrolls (listes de blogs qui ont plu ou ont été jugés pertinents dans un domaine précis) recherchant un moyen de faire connaître la nature des relations qu'ils entretenaient avec les auteurs de ces blogs. Depuis, ils ont pris une ampleur remarquable et de nombreux microformats ont été développés et améliorés pour divers supports : CV, rapports, protocole Atom, annuaires partagés, citations, traces des discussions en ligne, formats de médias… HTML5 les remet au goût du jour et ils restent un moyen simple, efficace et puissant d'apporter à vos pages de la lisibilité tant pour un humain que pour une machine.

Définition

Les microformats apportent au langage HTML (et par extension XHTML) davantage de sémantique. HTML possède déjà des éléments ayant du sens mais ils ne suffisaient pas à exprimer toutes les subtilités que les microformats proposent. Concrètement, cela va vous permettre d'ajouter, sans employer de grands moyens et sans grandes compétences, du sens au code fourni, afin de le rendre compréhensible par les humains dans un premier temps et par les machines ensuite.

Sachez que ces petits fragments de code ajoutés à certains attributs des balises HTML vous permettent d'optimiser le sens du contenu de vos pages et du coup, d'améliorer leur prise en compte, par exemple, par les moteurs de recherches, mais pas seulement. Avant de poursuivre notre propos, signalons que plusieurs CMS (Systèmes de Gestion de Contenu) tirent déjà partie des fonctionnalités des microformats : Drupal, WordPress, MediaWiki, Plume CMS (XFN)…

Insertion des µF

Entrons à présent dans le vif du sujet : l'ajout de microformats à vos pages de blog ou de site.

Comme indiqué précédemment, le langage HTML nous fournit suffisamment d'éléments afin d'ajouter, sans autre artifice, nos microformats. Deux attributs, principalement, nous permettront de faire cela :

• L'attribut rel, signifiant « relation ». Utilisé uniquement dans une balise <a> ou <link>, il permet, par le truchement des microformats, de préciser le type de relation entre la page source (celle dans laquelle on trouve le lien) et la page cible (celle vers laquelle pointe le lien). Exemple connu utilisé pour la définition de la feuille de style dans l'entête d'un document HTML :

  <link href="theme/default/style.css" rel="stylesheet">

• L'attribut class, utilisé principalement à des fins d'identification d'élément pour la modification du style de la page via les CSS, mais permettant également d'ancrer des microformats. Exemple :

  <a href="http://forum.alsacreations.com/profile-3069-jojaba.html" class="nickname">Jojaba</a>

Il existe un troisième attribut, l'attribut rev signifiant « relation inverse » exprimant la relation entre la page cible et la page en cours. Comme il est souvent mal utilisé, nous préférons ne pas traiter cet attribut dans ce tutoriel, d'autant que certains aspects de cet élément seront dépréciés à l'avenir.

Une dernière chose à savoir à propos de ces attributs (rel et class), ils peuvent prendre plusieurs valeurs, qu'on séparera par des espaces. Exemple :

<a href="http://forum.alsacreations.com/profile-3069-jojaba.html" class="fn n nickname">Jojaba</a>

Les trois valeurs de l'attribut class sont ici : fn, n et nickname.

Les différents formats disponibles

Maintenant que nous connaissons l'endroit où insérer les microformats dans nos pages HTML, passons aux différentes manières de les utiliser. Trois composantes essentielles : les microformats simples, les design patterns (modèles de conception) et les microformats composés. Voici une liste non exhaustive pour chaque type que nous traiterons dans ce tutoriel :

• Microformats simples : Rel-License, Rel-Noffolow, Rel-Tag, Rel-Bookmark, XFN. On utilise l'attribut rel pour leur mise en oeuvre.
• Design Patterns : Abbr Pattern, Datetime Pattern, Value Class Pattern. Ces « Modèles de conception » permettent de combler le manque de sémantique du langage HTML et seront utilisés dans les microformats composés.
• Microformats composés : hCard, hCalendar, hAtom, hReview, hResume. On utilisera davantage l'attribut class pour ce type-là. Comme leur nom l'indique, ils sont composés de plusieurs microformats imbriqués et parfois dépendant les uns des autres.

Il existe bien d'autres µF, mais nous avons préféré nous focaliser sur ceux qui ont déjà fait leur preuve et, pour certains, sont accompagnés d'une spécification bien à eux. Pour de plus amples informations concernant les autres microformats, veuillez vous rendre au wiki officiel : Wiki microformats. Une Traduction d'une grande partie de ce wiki en français est proposée, le maître d'oeuvre de cette traduction étant Christophe Ducamp, grand « gourou » des elanceurs (site non mis à jour mais restant une bonne ressource francophone). Ce tutoriel est d'ailleurs entièrement basé sur des informations tirées de ce wiki.

Resssources Web

• Le site officiel des microformats
• Le wiki Microformats.org
• Explications sur Wikipédia
• Fiche synthétique de Brian Suda (datant de 2007)
• Un petit outil pour tester vos pages « microformatées » proposé par Google
• Un validateur de microformats