Les animations en CSS semblent être un peu hors du cadre pour les débutants en CSS. La philosophie, la syntaxe, c’est complètement différent du CSS de propriété et valeur qu’on connait tous.

Animation en CSS3

Avec les animations en CSS, il faut commencer d’abord par définir les règles Keyframes, qui sont autrement dit, les phases de transitions que votre animation va devoir passer

Et c’est après la définition du keyframes que l’habitude du CSS ordinaire se reprenne. Les propriétés et valeurs.

Tester ce code

Se répéter dans le but d’apprentissage n’est pas mauvais mais dans un cadre professionnel n’est vraiment pas évident si ce n’est nécessaire.

Animate.css

Découvrez avec moi dans cet article animate.css, une petite librairie CSS qui regroupe plusieurs animations utilisable facilement avec l’appelle des classes CSS prédéfinies !

Installation

Tous ce que vous avez à faire c’est d’inclure le fichier animate.css dans le head de votre document HTML et le tour est joué.

Utilisation

L’utilisation est simple. Tous vos éléments ou balises HTML à animer doivent avoir deux classes.

  1. animated
  2. Le nom de l’animation que vous voulez utiliser, à retrouver dans ce lien

Exemple

Tester ce code

Listes de nom des animations

Voulez-vous faire un formulaire d’auto complétion avec HTML5 ? Dans cet article je veux vous présenter comment le faire sans trop d’effort. Habituellement, pour faire une telle chose, on fait recourt au Javascript mais ce dernier a une réputation d’être difficile à prendre à main.

Système d’auto complétion, KEZAKO ?

N’allons pas par quatre chemins, un système d’auto complétion c’est du genre ça

facebook auto complétion

Ou ça

auto complétion google

Bref, cela complète le terme qu’on écrit au fur et à mesure qu’on écrit le terme.

Auto complétion en HTML5

En HTML5, c’est très simple de faire un système d’auto complétion. Avec la balise datalist, vous pouvez lister les éléments avec la balise option de la même manière que ça se fait avec la balise select

Après vous avez besoin d’un input de type text ou search par le quel vous allez indiquer l’attribut list qui aura comme valeur l’id de la balise datalist précédent.

Le code complet est donc

Exemple :


Remarques

Cette manière de faire bien que très simple mais a certains désavantages. Pour par exemple faire un système d’auto complète de données statique, ce système sera suffisant. Par exemple, l’auto complétion des villes, communes; mais quand c’est une base de données dynamiques comme les articles d’un blog ou bien évidemment le cas de Google ou Facebook dans les images ci-haut, malheureusement il n’y a pas de choix que de faire recourt à JavaScript et l’API Ajax. Vous pouvez utilisez cette librairie jQuery EasyComplete qui est facile à mettre en place.

Javascript,  un langage de programmation tout de même mais sa syntaxe fait souvent peur. Adepte de la programmation web qu’on peut être,  bien que souvent on a l’habitude de vérifier les données issues d’un formulaire dans le serveur (backend), mais souvent nous vérifions aussi les données côté client (front) pour éviter de surcharger le serveur à des requêtes inutiles. On le fais majoritairement avec Javascript qui parait difficile à prendre à main. Mais avec l’arrivé de HTML5 et CSS3, ce coté peut être géré sans Javascript.

Coté HTML5

La structure classique d’un formulaire ressemble à ceci

Avec HTML5, On spécifie souvent l’attribut type pour vérifier certains champ avec les valeurs :

  • email: vérifie le champ s’il correspond à une adresse email
  • number: vérifie le champ s’il contient que les données de type numériques

Et juste l’attribut required pour dire que le formulaire ne peut pas être envoyé si le champ est vide où en mettant n’importe quoi envoie le formulaire.

Aussi, avec l’attribut type c’est impossible  d’aller un peu plus loin pour vérifier par exemple le nombre de caractère qu’un champ doit avoir ou vérifier la structure des données que le champ doit recevoir (Ex: 11/07/1996) comme on fait souvent avec Javascript. Heureusement qu’il y a aussi l’attribut pattern

L’attribut pattern prend comme valeur une expression régulière (RegEx).

Ici j’ai vérifié dans la ligne 12 le format de la date pour qu’il correspond à une structure comme suit : JJ/MM/AAAA et la ligne 4 le nom qui doit contenir une chaine de caractère entre 4 et 15 caractères. Si quelqu’un s’hasarde d’introduire quoi que ce soit, il a droit à une erreur côté client.

html pattern

Toutes les expressions régulières sont prises en charge, donc ceux le RegEx leur dit quelque chose, voient déjà des multitudes de possibilités de vérifier les champs de la façon dont on veut.

Faites attention
Bien que la vérification peut se faire coté client, il est toute fois recommandé de vérifier aussi les données coté serveur car dans le navigateur tout peut être modifié. Never trust user input

Du style, du style et du style (Coté CSS)

Quand le navigateur détecte l’erreur, C’est en validant qu’il affiche le message d’erreur mais si maintenant le champ n’a pas d’erreur, il y a rien qui s’affiche aussi. Or du style fait bonne impression par exemple, mettre les bordures du champ en rouge quand il y a l’erreur et en vert quand tout est OK. Alors on gère en CSS avec les pseudo-classes :valide et :invalide

 

En ajoutant un peu de style, l’utilisateur saura que le champs contient les erreurs ou non au fur et à mesure qu’il tape les données. l’équivalent de l’événement onkeyup de Javascript pour ceux qui sont habitués avec.

invalide and valide

C’est très claire maintenant car le nom ne correspond pas aux règles qui requis de 4 à 15 caractères et ses bordures sont en rouge. Pour la date tout semble aller et c’est en vert.