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

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

6Commentaires

  • Avatar_thumb
    Antoine PLU

    le 16/11/2011 | #1

    Tu tombe à pique je vais en avoir besoin très prochainement !
    L'article manque peut-être un peu de visuel pour être plus agréable (ce n'est qu'un détails).
    Très bien expliqué sinon nickel merci ;)

  • Avatar_thumb
    exootia

    le 16/11/2011 | #2

    Simple mais efficace :D

  • Avatar_thumb
    Fabien Bourgeois

    le 17/11/2011 | #3

    AH ouai stylé !!

  • Avatar_thumb
    Christophe HERMANN

    le 17/11/2011 | #4

    Content que cela puisse servir ! :)
    Ce que j'ai trouvé intéressant dans cette technique, c'est qu'elle évite d'ajouter du code (balise) supplémentaire (un par exemple).

    Attention toute fois, les propriétés ":before" et ":after" ne sont pas supporté par IE7 (et IE6 mais ça c'est pas trop étonnant comme il supporte rien ).

    (@AntoinePlu : en effet, ça manque un peu d'image, mais je me suis demandé si c'était réellement nécessaire ? Puisqu'il s'agit purement de code. Mais il est vrai qu'un petit screenshot pour montrer un résultat plus avancé peut-être intéressant ... )

  • Avatar_thumb
    Buddyweb

    le 17/11/2011 | #5

    Simple et pertinent! Merci.

  • Avatar_thumb
    Bigou

    le 17/11/2011 | #6

    Merci pour l'info.

Ecrire un commentaire

captcha

Ouvrir