2015, une année de transition vers CSS4

         Miniature

Le CSS est une langage de mise en forme qui évolue de manière constante. En ce début d’année 2015, il est temps de passer en revu quelques nouvelles fonctionnalités que nous pouvons d’ores et déjà expérimenter.

Dans cet article, nous survolerons des modules du langage qui sont de plus en plus implémentés par les navigateurs. Attention, tout ce qui va suivre ne peut pas être immédiatement utilisé en production.

Les navigateurs ont implanté à différents niveaux les modules de CSS3. Ces derniers mettent à notre disposition des sélecteurs nous permettant de cibler un élément précis avec «nth-child» par exemple. Comme nous allons le voir, il est également possible de cibler des éléments de façon beaucoup plus fine.

La pseudo-classe de négation :not

Il prends en argument un sélecteur, dans l’exemple suivant, une font-weight: normal sera appliquée à tous les paragraphes sauf à celui ayant la classe .intro
CSS4-01
Ce module a été grandement amélioré, vous avez la possibilité maintenant d'ajouter plusieurs éléments.
CSS4-02

La pseudo-classe de relation :has

Elle prend un sélecteur en argument, dans l’exemple suivant, la bordure noire d’un pixel s’appliquera à tous les liens ayant comme enfant direct une image.

CSS4-03

Il est également possible de faire des combinaisons, ainsi dans l’exemple suivant,  la marge inférieure s’appliquera à tous les <li> ne contenant PAS de paragraphe.

CSS4-04

La pseudo-classe d’équivalence :matches

Elle permet d’imputer des propriétés semblables à plusieurs éléments, ainsi les paragraphes ayant la classe «alert», «error» et «warn» auront une couleur de police rouge.
CSS4-05

Si vous souhaitez vérifier le support des pseudo-classes que nous venons de voir sur votre navigateur, rendez-vous sur css4-selectors.com, le test suivant a été fait sur le navigateur Chrome 39 et; ce n’est pas une surprise, le support est pour le moment moyen.

CSS4-06

Les modes de fusion

Si vous êtes familier avec les modes de fusion de Photoshop, ce qui va suivre va vous intéresser. Rendez-vous sur l’aide de Photoshop pour lire un petit rappel.

Dans le CSS suivant, nous avons 3 éléments contenant l’image de fond ballons.jpg. En appliquant une couleur de fond et un mode de fusion avec la propriété background-blend-mode, il est possible de donner des effets intéressants à nos images.

Pour en savoir plus, je vous renvoie à cette excellent article paru dans CSS Tricks

CSS4-07

CSS4-08

Dans l’exemple suivant, le mode de fusion est appliqué à la balise <h1>

CSS4-09

CSS4-10

A l’heure actuelle, le support de cette propriété est correcte… sauf sur Internet Explorer ce qui n’est pas une surprise.

Utilisez cette propriété avec parcimonie, le résultat ne doit pas allez à l’encontre de l’accessibilité.

Un peu de mathématiques avec calc() function

Elle rend possible l’utilisation d’opérations mathématiques au sein de vos feuilles de styles et vous allez voir que c’est très pratique.

Nous souhaitons positionner une image de fond (désolé pour le nom, je n’étais pas très inspiré) à 30px du coin supérieur gauche de notre conteneur.
C’est simple, nous utilisons la propriété background-position avec les valeurs suivantes :
30px en partant du haut et 30px en partant de la gauche.

CSS4-11

Maintenant, admettons que nous devons placer une image dans le coin inférieur droit dans un conteneur sans en connaitre la taille.
Nous mettons en argument la largeur de notre conteneur (100%) en retranchant les 30px nécessaires.

CSS4-12

Le support de cette fonctionnalité est très bon. Cependant certains utilisateurs rapportent des bugs que je vous recommande de consulter en cliquant sur l’onglet «Known Issues».

Vous trouverez d’autres «Uses Cases» intéressants sur le site d’Hugo Giraudel et sur CSS Tricks

Les variables

L’une des fonctionnalités des préprocesseurs comme SASS est de permettre l’utilisation de variables en CSS. Il est possible et de manière très simple de sauvegarder par exemple la police de caractère, une couleur principale… et de changer toutes ces informations en un seul endroit.

Dans l’exemple suivant nos variables sont stockées à l’aide de la pseudo classe :root.
CSS4-13

Malheureusement le support des variables est limité pour l’heure à Firefox.

Les exclusions

Les éléments flottants font partis du langage courant en CSS. Le premier exemple qui me vient à l’esprit est celui d’une image mise en «float : left» ou «right» et le contenu qui s’écoule autour d’elle. Cependant les flottants sont limités, pour l’heure il est uniquement possible de positionner un élément flottant à gauche ou à droite.

Dans l’exemple suivant, nous allons positionner une image au centre de notre contenu avec le positionnement absolu, toute la magie réside dans la propriété wrap-flow qui permettra à l’image d’habiller le texte.

Le support est uniquement disponible sur IE10+, le préfixe –ms- est obligatoire.

CSS4-14

CSS4-15

Les formes

Le print s’applique de nouveau au Web avec la possibilité de créer des habillages de texte comme sur Indesign ou Xpress. J’entends par là des formes géométriques plus ou moins complexes autour desquelles le texte viendra se positionner.

Dans notre exemple, nous allons appliquer à l’image la classe .shape avec les propriétés suivantes.

CSS4-16

Pour obtenir l’effet escompté, il est important de mettre en «float» notre élément, j’y ai ajouté une marge à droite de 30px pour que le contenu puisse respirer.
Le logo utilisé pour cet exemple est celui de l’Alliance Rebelle dans l’univers Star Wars.

CSS4-17

La propriété shape-outside correspond à la zone décrite par un cercle violet dans l’image suivante.

CSS4-18

Cette fonctionnalité offre des possibilités intéressantes, malheureusement le support des navigateurs et bien trop faible pour envisager une utilisation en production.
Si vous souhaitez en apprendre davantage, je vous invite à lire cet article de Sara Soueidan

La grille

Nous allons terminer cet article par un module nous permettant de réaliser une grille de mise en page avec CSS. Cette fonctionnalité n’est implémentée pour le moment que sur Internet Explorer 10.

Le module de grille n’utilise pas une structure en tableau, la structure du tableau est construite entièrement dans la feuille de style, ce qui facilitera les modifications via les mediaquerries pour l’adapter à différents contextes.

CSS4-19

La structure HTML elle est très classique.

CSS4-21

Bien que le support soit assez faible, vous pouvez expérimenter ce module très prometteur sur Chrome en vous rendant sur la page des  extensions expérimentales : chrome://flags/  et en activant la ligne suivante :

CSS4-20

Si vous souhaitez en savoir plus :
http://gridbyexample.com/
https://www.youtube.com/watch?v=GRexIOtGhBU

N’hésitez pas à partager de nouveaux modules qui ne sont pas mentionnés ici en commentaire de cet article.

Les photos utilisées dans cet article proviennent de la bibliothèque Shutterstock

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.