• A la une
  • Catégories
  • Dossiers
  • +

Notifications avec HTML5 et CSS

Dans les interfaces utilisateurs, il peut être intéressant d'ajouter des notifications pour informer l'utilisateur de nouveautés (messages, demande d'amis, rappels, etc...). Il est possible d'afficher ces notifications en utilisant un sélecteur CSS ":after" et l'attribut HTML5 "data-"

Rentrons dans le vif du sujet. Imaginons que vous disposez d'un menu sous forme de liste, dans ce menu il y a un lien menant vers la boite de réception de l'utilisateur : ses messages.

Voici la structure HTML de votre menu :

<ul>
  <li><a href="#">Compte</a></li>
  <li><a href="#">Message</a></li>
  <li><a href="#">Déconnexion</a></li>
<ul> 

Afin de signaler le nombre de notifications, nous utiliserons un attribut HTML5 qui permet de créer des attributs personnalisables et ne pas utiliser les existants à mauvais escient. Il s'agit de l'attribut "data-", très simple d'utilisation, il suffit d'ajouter votre attribut personnalisé à votre balise HTML. Dans notre cas, nous utiliserons l'attribut "data-notification" (logique, non ?). On en profite pour ajouter une .class CSS "notifications". Ce qui nous donne le code suivant - en admettant qu'il y a 5 messages non-lus :

<ul>
  <li><a href="#">Compte</a></li>
  <li><a href="#" data-notification="5" class="notifications">Message</a></li>
  <li><a href="#">Déconnexion</a></li>
<ul> 

C'est bien beau d'avoir spécifié le nombre de notifications, mais pour l'instant, elles ne sont pas visibles par l'utilisateur ... réglons le problème à grand coup de CSS. Les sélecteurs ":after" et ":before" permettent, comme leur noms l'indiquent, d'ajouter du contenu après ou avant le contenu d'un élément. Vous l'avez compris, si on veut ajouter le nombre de notification après le contenu on utilisera ":after", si on veut l'afficher avant on utilisera ":before". Le code CSS est le suivant :

.notifications:after { content:attr(data-notification); }

La propriété CSS "content" permet de générer du contenu. En utilisant "attr(data-notification)", on précise qu'on veut ajouter le contenu de l'attribut "data-notification" et avec ":after" on place ce contenu après. Vous me suivez toujours ?
Le résultat obtenu est le suivant :

Message5

En ajoutant des propriétés CSS, vous pouvez styliser et positionner vos notifications. Amusez-vous et créez de belles notifications ! 
Trois exemples de ce que nous pouvons faire via cette méthode : christophe-hermann.fr/labs/notifications/ !

 

 

Un petit remerciement à @nighcrawl pour m'avoir fait découvrir l'attribut "data-".
 

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Christophe voir son blog

Intégrateur et webdesigner, je suis passionné par les technologies liées à ces métiers : HTML(5), CSS(3), jQuery etc. J'aime découvrir, expérimenter et partager de nouvelles choses !
N'hésitez pas à me suivre sur twitter : @chrishrmnn

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir