A la découverte d’animate.css

Aujourd’hui petite présentation d’animate.css, une feuille de style CSS permettant d’animer des éléments de notre DOM, à l’aide des animations CSS3.

Pour avoir un aperçu de ce que cela donne, rendez-vous sur le site officiel : animate.css

Au total on y retrouve plus de 70 animations différentes, il y a donc de quoi faire !

Techniquement il ne s’agit ni plus ni moins que d’une feuille de style CSS (avec des propriétés CSS3) à charger. Ensuite on appelle la classe « animated » sur un élément, puis la classe portant le nom de l’animation désirée.

Vous pouvez également jouer avec vos animations en personnalisant la « duration« , le « delay » et l' »iteration » le tout en CSS :

Pour jouer une animation lors d’un événement, il est tout à fait possible de la déclencher avec un peu de javascript. Il est également possible de détecter en javascript la « fin » d’une animation, très pratique donc pour supprimer notamment les classes que l’on vient d’ajouter pour permettre de ré-exécuter notre animation ensuite.

Ce fichier nous permettra de gagner du temps à réaliser des animations CSS3 basiques que l’on pourra appliquer par exemple sur des formulaires, des slideshows ou pour donner un effet lors de l’affichage d’un contenu au scroll etc. Attention toutefois de ne pas en abuser et d’utiliser les animations à bon escient …

Démo : animate.css
Code sources et exemples : https://github.com/daneden/animate.css

Quelques rappels sur les fonts et les em

  • Différences entre em et rem : l’unité em est relative à son parent contrairement à rem qui est relative à la balise html
  • Mettre font-size: 100% sur l’élément html (et non 1em). Normalement c’est inutile mais il s’agit en fait d’un correctif pour un bug d’Internet Explorer (de 5 à 7), bug qui rend « anarchique » le redimensionnement du texte à la volée dans ce navigateur. Il a du mal à gérer des tailles de texte en em si aucune déclaration en pourcentage ne les précède.
  • Ne pas avoir peur d’utiliser du texte un peu gros pour votre corps de texte, et ne pas trop chercher à « minimiser » les textes « subalternes » en les ramenant à des tailles ridicules (pas en dessous de 80%)

Points sur la propriété line-height :

  • Elle prend soit un nombre (valeur sans unité qui correspond à un coefficient multiplicateur de la taille de fonte utilisée) soit une longueur (valeur utilisée pour calculer la hauteur de la boîte de la ligne)
  • Elle fonctionne mieux si on utilise un facteur / multiplicateur, ce qui signifie pas d’unité, mais seulement un nombre qui multiplie la taille de police.
  • Il est donc préférable de ne pas de mettre d’unité à cette propriété pour éviter les problèmes des cascades.

NB : A la place de 1.2 mettre la valeur souhaitée (1.2 est généralement la valeur par défaut des navigateurs mais selon la police utilisée)

  • Pour du texte, une line-height à 1.4 fois la taille du texte est recommandée.
  • Pour les titres, une line-height à 1.2 est recommandée.

Sources :

Un peu d’interactivité avec la pseudo-classe :target

Menu, onglet, modal, pourquoi ne pas amener un peu d’interactivité sur un site sans forcément passer par du JS ?

Il existe en CSS une pseudo-classe très intéressante :target.

Si on regarde la définition du W3C de cette pseudo-classe, il s’agît d’un élément qui est la cible d’un lien (comme les ancres par exemple).

Prenons un petit exemple, pour montrer l’intérêt de ce :target.

Vous pouvez retrouver le code sur Codepen, c’est par ici.

Imaginons un bouton, représenté par une div qui portera l’id  bouton_menu, et que sera entouré d’un lien pointant sur l’ancre #menu dont le but sera de faire afficher le menu.

Puis un autre bloc, qui sera ce fameux menu et qui portera l’id menu

Le but va être d’afficher le bloc menu (qui par défaut est caché) en cliquant sur notre lien Afficher le menu.

Pour cela, dans la feuille de style, il suffit d’ajouter l’id ici #menu suivi de la pseudo-classe :target et d’ajouter entre accolade, le code qui va permettre de venir afficher le menu (en utilisant des transitions, si vous voulez faire du joli).

Pseudo classe :target

Faîtes un petit test en cliquant sur Afficher le menu. Génial, non?

Et tout cela en CSS.

Pour l’exemple, j’ai ajouté aussi un petit bouton Fermer pour que cela soit plus pratique.

Comme vous le voyez, cette pseudo-classe peut se révéler extrêmement pratique pour limiter l’utilisation du javascript tout en apportant une touche de dynamisme.

Concernant la compatibilité des navigateurs

La pseudo-classe :target est actuellement supportée par la plupart des navigateurs sauf IE8 et inférieur

Si vous souhaitez connaître exactement tous les navigateurs supportés, vous pouvez consulter cette page.

:target compatibilité

#Barcamp : Les unités CSS

Taille de police

Par défaut, la taille de la police sous Firefox est fixée à 16px. Mais l’internaute peut modifier cette taille (et la fixer à 32px par exemple). Pareil pour la taille minimale de la police : elle n’est pas définie par défaut, mais peut l’être par l’utilisateur.

Pour améliorer l’accessibilité d’un site, il faut donc laisser la possibilité à l’internaute de redimensionner le texte. Pour cela, il faut utiliser les unités relatives (em ou rem) et non les pixels. Cela est valable autant pour la propriété font-size que pour line-height.

Sources : alsacréations

em.

L’ em est une unité relative qui se base sur l’élément parent pour déterminer sa taille. A savoir que la balise HTML se base sur la taille de police par défaut du navigateur. Attention à ne pas tomber dans le piège de la cascade qui vas augmenter rapidement la taille de police.

rem

le rem pour root em se comporte exactement comme le em à la différence que le rem se base sur l’élément racine, donc soit la balise HTML soit la police par défaut du navigateur.

vh et vw.

Il est pratique de vouloir que le texte soit d’une taille adapté en fonction de la taille de l’écran. Si vous avez une tablette, le titre de l’application va être en plus gros que le titre de la même application mais sur mobile. Et  les unités VW et WH vont permettre de réaliser cela facilement.

D’abord il faut savoir que la première lettre V de ces unités signifie viewport (donc ce sont des unités relative à la taille du viewport que vous avez définie -ou non-), ensuite, w pour width et h pour height.

Donc :

  • vw : « Viewport Width », correspond à l’unité relative à la largeur de votre écran
  • vh : « Viewport Height », correspond à l’unité relative à la hauteur de votre écran

Prenons un exemple en supposant que vous avez un écran (enfin un viewport…) de 1000px de hauteur :

La taille du texte à l’intérieur de votre div sera donc de (1000 * 20/100) = 200px.

Et si vous passez à un écran de 800px de hauteur, vous aurez alors une taille de texte de 160px.

Source : graphikArt

vmin et vmax

vmin et vmax pour viewport min et max : il correspondent à l’unité à la plus petite ou grande des deux dimensions (largeur ou hauteur selon l’orientation).

Du responsive en em ?

Pour aller plus loin il est aussi possible de définir les medias queries avec des unités relative. Ainsi si l’utilisateur utilise une taille de police importante l’interface passe en mode « tablette » ou « mobile ».  ainsi la police seras toujours adaptée en fonction du device.

Sources :

#Barcamp : Aller plus loin avec SCSS

Nous utilisons quotidiennement deux fonctionnalités de SASS dans nos projets : les variables et l’imbrication. Mais cela n’est qu’une infime partie des fonctionnalités proposées par SASS.

Les variables

L’imbrication

Il est conseillé de ne pas trop imbriquer les selecteurs (pas plus de 3 niveaux d’imbrication) : « Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. »

Les mixins

Un mixin permet de regrouper des propriétés CSS réutilisables. On peut passer des paramètres à un mixin pour le rendre plus modulaire.

Les fonctions

Une fonction se distingue d’un mixin car elle ne définit pas une série de propriétés mais retourne une valeur en fonction de paramètres passés en arguments.

Sass définit une série de fonctions natives qu’on peut utiliser directement sans avoir à les redéfinir (http://sass-lang.com/documentation/Sass/Script/Functions.html).

Les partials

On peut structurer les fichiers SCSS en les scindant en plusieurs partials. Ces différents fichiers sont compilés dans un même fichier lorsqu’ils sont inclus dans ce fichier, et ne nécessite pas d’être tous inclus dans le <head> de la page.  La convention de  nommage est la suivante : _nom_du_partial.scss.

L’héritage

Le mot-clé extend permet à un sélecteur d’hériter des propriétés d’un autre sélecteur.

À noter que cet héritage est multiple.

Les opérateurs

Grâce à Sass, on peut utiliser les opérateurs mathématiques de base (pour calculer les hauteurs, largeurs, marges, …).

Un exemple d’utilisation des opérateurs est la création de grilles responsives.

Le sélecteur « & »

Le sélecteur & fait référence au sélecteur parent. Il est donc forcément imbriqué.

Les conditions

Sass introduit les conditions.

Les boucles

Sass introduit également les boucles while, for et each.

Liens supplémentaires :

Personnaliser les checkbox en CSS

Voici une méthode simple sans javascript pour personnaliser vos checkbox.

  • Partir du code suivant : checkbox + label

  • Enlever l’input de type checkbox avec un « display:none ». Pas de panique, l’action de cocher est toujours présente grâce au « for » du label.

  • Créer une nouvelle case à cocher en css :

Ce code va sélectionner le label qui se trouve après une checkbox ( + ) et met un bloc vide (content: «  ») devant le label (pseudo-élément :before)

  • Pour créer le style de la checkbox « checkée », rien de plus simple :

On sélectionne la checkbox « checkée » (:checked) et on remplit le bloc vide devant le label avec une coche (content: « \2713 ») et un fond de couleur différent.

Voici le code complet pour tester :

CSS : Fixer le footer en bas de page

La principale problématique lorsqu’on souhaite fixer le footer en bas de page, c’est de positionner ce footer en bas de la fenêtre même lorsque le contenu ne l’atteint pas.

Voici une méthode pour réaliser cela.

Le HTML :

Header
Content
Footer

Le CSS :

Le résultat est consultable sur codepen.io

EDIT : Emmanuel Béziat détaille plusieurs méthodes intéressantes pour arriver à ce résultat : Un site qui prend toute la hauteur disponible

CSS : les modèles de boîte

Le modèle de boîte par défaut

Par défaut, en CSS, le modèle de boîte fonctionne de la manière suivante : la largeur totale de la boîte correspond à la somme de sa largeur, son padding et de sa bordure.

aaaa

Par défaut : Box = Width + Padding + Border

Ce qui oblige à faire quelques calculs lorsque l’on souhaite placer nos différents éléments les uns par rapport aux autres.

La propriété box-sizing

Pour résoudre les « problèmes » que les développeurs peuvent rencontrés avec le modèle de boîte classique, une nouvelle propriété est arrivée avec CSS3 : box-sizing. Elle permet de modifier le modèle de boîte d’un élément. Cette propriété peut prendre 3 valeurs différentes : content-box, border-box ou padding-box.

La valeur content-box est la valeur par défaut. Elle correspond au modèle classique.

Celle qui va nous intéresser est la valeur border-box. Elle permet de définir une taille fixe à notre boîte, qui ne varie pas selon son padding et sa bordure. Ainsi, le padding et la border sont compris dans la width.

borderboxAvec box-sizing: border-box

La valeur padding-box quant à elle, inclut le padding dans la width de la boîte mais pas la bordure. Pas forcément intéressant, surtout qu’il n’est compatible qu’avec Firefox.

Pour illustrer tout ça, voici un exemple : codepen.io

Le travers à éviter est d’utiliser le sélecteur CSS * pour appliquer la propriété box-sizing (source). L’issue intelligente serait plutôt celle expliquée dans cet article.

À noter que le W3C estime que le comportement de border-box: margin-box aurait dû être celui par défaut (source).

Sources : css-tricks.com, developer.mozilla.org, learnlayout.com

Bonnes pratiques de l’intégration

Le but des intégrations est de fournir un contenu de qualité qui fonctionne sur plusieurs navigateurs et appareils.

Navigateurs

Chaque projet étant différent, c’est en vérifiant les données de navigation, que vous allez choisir quels navigateurs vous supporterez.
Un site ne doit pas s’afficher de la même façon sur tous les navigateurs mais les pages ne doivent pas être cassées et offrir aux utilisateurs le meilleur contenu en fonction de l’appareil.

Quels navigateurs supporter ?

Les navigateurs modernes et les navigateurs mobiles :

  • IE 9+, Firefox, Chrome, Safari, Opera
  • Iphone et Ipad, Android téléphone et tablette, Blackberry, Windows Phone, Firefox mobile et Opera mobile

Mobile

Quelques astuces à ne pas oublier lors d’une intégration :

    • optimiser les styles pour les petits écrans avec les requêtes @media et la balise meta viewport
    • pour le support tactile, les zones cliquables doivent avoir des dimensions minimales de 44px x 44px
    • pas d’événements mouseover, ou de propriétés css :hover

Moteurs de rendu

Le moteur de rendu d’un navigateur interprète le HTML, CSS et autres standards et converti le tout en pixels. Comprendre les différences des moteurs de rendu permet de réduire le temps pour la mise en page et les tests de compatibilité.
Il y en a quatre :

  • Trident (IE)
  • Gecko (Firefox)
  • Webkit (Safari et appareils Apple)
  • Blonk (Chrome, Opera et appareils Android)

Un site qui permet de connaître les compatibilités multi-navigateurs pour le HTML5, CSS3 et autres technologies : http://caniuse.com/

HTML

Il faut respecter le marquage : si c’est un titre, on utilise une balise titre (h1, h2), si c’est une liste, on utilise des listes (ul, li, ol).

Sémantique

Les titres h1 et h5 mettent le contenu en avant pour une navigation plus facile. Quand un utilisateur clique sur un label for=« nom », ça coche l’input associé à l‘id id=« nom ».

Bonnes pratiques

  • le HTML doit fonctionner sans CSS, ni Javascript
  • utiliser le HTML5 dès que possible
  • utiliser le moins d’éléments possible
  • ne jamais coder les styles de façon inline (tout comme le Javascript)

CSS

 Maintenable

  • css séparé du HTML
  • modules pour le système (reset, formulaires, typographie)
  • priorité : coder pour les navigateurs respectueux des standards. Fixer les bugs pour IE par la suite

Internet Explorer

Pour rendre compatible votre site à Internet Explorer, vous pouvez utiliser des commentaires conditionnels :

En modifiant l’en-tête HTML, on peut utiliser des classes pour cibler des versions spécifiques.

Media queries

Elles permettent de donner des styles spécifiques aux différents appareils. Ca identifie : écran ou print, hauteur/largeur, portrait/paysage.

La balise meta viewport est nécessaire pour gérer correctement l’affichage des appareils mobile et la version pc :

Bonnes pratiques

Un site intéressant qui donnent des conseils et des bonnes pratiques pour le CSS : http://guidecss.fr/