CSS3 avancées, transitions et layouts

Vincent De Oliveira · SFEIR'Plays (janvier 2013)

Vincent De Oliveira

CSS3 n'existe pas!

  • C'est la suite logique au langage CSS, le langage des feuilles de styles.

CSS1

  • Recommandation en 1996
  • Sélecteurs simples, positionnements basiques, tailles, marges, couleurs, polices, etc.

CSS3 n'existe pas!

CSS2

  • Abandonnée en 1998
  • Trop de choses, trop complexes ou sous-spécifiées
  • Pseudo-classes dynamiques, pseudo-éléments, polices personnalisées, gestion des médias, ombres sur les textes, etc.

CSS2.1

  • Version "corrigée" de CSS2, ce qui a été retiré est mis à l'étude dans CSS3
  • Recommandation en juin 2011

CSS3 n'existe pas!

CSS3

  • En cours depuis 1999
  • Standard fragmenté en modules
  • 3 modules en Recommandation, une trentaine à l'étude

CSS4

Démocratisation de CSS3

Pourquoi entends t'on beaucoup parler de CSS3?

  • Meilleur ami de HTML5
  • Sélecteurs étoffés
  • Effets graphiques simplifiés: opacité, angles arrondis, ombres, dégradés, polices personnalisées, etc. (maintenance++)
  • Accès à ce qui était réservé avant à JavaScript (interaction, animation, etc.)
  • Nouveaux modes de positionnement
  • Support amélioré de CSS2.1
  • Fin de IE6, IE7

Utiliser CSS3?

Oui! Mais comment?

  • Connaitre l'état d'avancement des modules
  • Conserver la dégradation gracieuse
  • Mettre en place l'amélioration progressive

Pour cela:

  • Ne rien faire
  • Utilisation des préfixes: -webkit-,-moz-,-ms- et -o-
  • Utilisation de styles alternatifs, via la cascade CSS.
  • Détection de fonctionnalités (requiert JS)

Sélecteurs avancés

Les sélecteurs CSS1, 2.1 et 3

  • Plus de 40 sélecteurs
    • Sélecteur d'enfants (E F, E>F)
    • Sélecteur de frères suivants (E+F, E~F)
    • Sélecteur d'id (E#id) et de classe (E.class)
    • Pseudo-classes (E:first-child, E:last-child...)
    • Pseudo-classes dynamiques (E:hover, E:focus, E:active...)
    • Pseudo-éléments (E::first-letter, E::after, E::before...)

Les sélecteurs d'attributs

  • Cibler des éléments en fonction de leur attributs (et de leurs valeurs), mêmes les data-attributes de HTML5.
  • [attr], [attr=val], [attr~=val]
  • [attr^=val], [attr$=val], [attr*=val]
<ul>
   <li id="art18">Vers article 18</li>
   <li id="art12">Vers article 12</li>
   <li id="rub4">Vers rubrique 4</li>
   <li id="art3">Vers article 3</li>
</ul>
ul li[id^=art]{
   color: tomato;
}
  • Vers article 18
  • Vers article 12
  • Vers rubrique 4
  • Vers article 3

La pseudo-classe :nth-child()

  • Cible le nième enfant d'un élément
    • :nth-child(3) cible le 3ème enfant
    • :nth-child(an+b) ou a et b sont des entiers
  • Ex: :nth-child(3n+2), pour chaque entier positif de n:
    • n=0, total= 2
    • n=1, total= 5
    • n=2, total= 8
    • Les 2e, 5e et 8e enfants sont sélectionnés.

La pseudo-classe :nth-child()

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
   <li>Item 7</li>
   <li>Item 8</li>
   <li>Item 9</li>
   <li>Item 10</li>
</ul>
ul li:nth-child(3n+2){
   color: tomato;
}
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

La pseudo-classe :nth-child()

  • Se décline:
    • :nth-last-child()
    • :nth-of-type(), :nth-last-of-type()

La pseudo-classe :not()

  • :not() permet de retirer un sélecteur simple:
    • div:not(.toto)
    • ul li a:not(:hover)
    • .toto:not(p)
    • a:not([href^=http])
  • Pas de sélecteur avancé
    • :not(div p) est invalide.

Les pseudo-classes de formulaires

  • :enabled, :disabled
  • :checked
input{
   vertical-align: middle;
}
input:checked + label{
   color: tomato;
}

Les sélecteurs CSS3

Tableau de compatibilité des Sélecteurs CSS3

Les effets graphiques

Les coins arrondis

border-radius: 10px;

  • Crée des coins arrondis
  • Chaque angle peut avoir son propre arrondi
    • ex: border-radius: 0 10px 2px 20px;
  • Accepte les pourcentages (par rapport à la boite elle-même)
    • ex: border-radius: 50%; crée un rond

Les coins arrondis

Tableau de compatibilité des coins arrondis

Les ombres

text-shadow: 2px 2px 5px black;

  • Ajoute une (ou plusieurs) ombre(s) sur le texte

box-shadow: 2px 2px 5px (5px) black (inset);

  • Ajoute une (ou plusieurs) ombre(s) sur une boite
  • L'ombre peut être interne: inset
  • L'ombre peut être plus grande ou plus petite (4ème valeur numérique)

Les ombres

Tableau de compatibilité des ombres sur les textes avec text-shadow Tableau de compatibilité des ombres sur les boites avec box-shadow

Les dégradés

linear-gradient((to left), red, green);

  • Crée un dégradé linéaire
  • La direction est optionnelle. La valeur par défaut est to bottom
  • Nombre de couleurs "illimité"
  • Positionnement des color-stops automatiques/manuels
  • Existe les dégradés radiaux

Les dégradés

Utilisation

  • Préfixes encore obligatoires (Chrome et Safari en retard)
  • Pensez à la dégradation gracieuse
E{
    background: dodgerblue;
    background: -webkit-linear-gradient(deepskyblue,dodgerblue);
    background:    -moz-linear-gradient(deepskyblue,dodgerblue);
    background:     -ms-linear-gradient(deepskyblue,dodgerblue);
    background:      -o-linear-gradient(deepskyblue,dodgerblue);
    background:         linear-gradient(deepskyblue,dodgerblue);
}

Les dégradés

Tableau de compatibilité des dégradés CSS3

La transparence

background: rgb(235, 162, 53);
opacity: 0.5;

  • Rends l'élément transparent (et tous les enfants)

background: rgba(235, 162, 53, 0.5);

  • Rends la couleur appliquée transparente
  • Extension de rgb(r,v,b) avec l'alpha
  • Existe également hsl(t,s,l) et hsla(t,s,l,a)
  • Pensez à la dégradation gracieuse.

La transparence

Tableau de compatibilité des couleurs CSS3

Les effets graphiques: un menu de navigation

ul{
    ...
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.3),
                0 5px 10px rgba(0,0,0,.25),
                0 20px 20px rgba(0,0,0,.15); 
}
ul li{
    ...
    background: dodgerblue;
    background: -webkit-linear-gradient(deepskyblue,dodgerblue);
    background:    -moz-linear-gradient(deepskyblue,dodgerblue);
    background:     -ms-linear-gradient(deepskyblue,dodgerblue);
    background:      -o-linear-gradient(deepskyblue,dodgerblue);
    background:         linear-gradient(deepskyblue,dodgerblue);
}
ul li:first-child,
ul li:first-child a{
    border-radius: 3px 0 0 3px;
}
ul li:last-child,
ul li:last-child a{
    border-radius: 0 3px 3px 0;
}
ul li a{
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 8px 8px 17px 8px;
    
    color: black;    
    color: rgba(0,0,0,.7);
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 
                0 -1px 0 hsl(210,100%,32%) inset,
                0 -2px 0 hsl(210,100%,38%) inset,
                0 -3px 0 hsl(210,100%,44%) inset,
                0 -4px 0 hsl(210,100%,50%) inset,
                0 -5px 0 hsl(210,100%,60%) inset;
}
ul li a:hover,
ul li a:focus{
    background: rgba(255,255,255,.2);
    padding: 8px 25px 17px 25px;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 
                0 -1px 0 hsl(210,100%,42%) inset,
                0 -2px 0 hsl(210,100%,48%) inset,
                0 -3px 0 hsl(210,100%,54%) inset,
                0 -4px 0 hsl(210,100%,60%) inset,
                0 -5px 0 hsl(210,100%,70%) inset; 
}
ul li a:active{
    background: rgba(0,0,0,.15);
    background: -webkit-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:    -moz-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:     -ms-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:      -o-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:         linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}

Les transitions et animations CSS

C'est quoi une transition?

  • Animer une propriété CSS d'une valeur A à une valeur B, lors d'un changement d'état.
    • Pseudo-classes (:hover, :focus, etc.)
    • Modification via JS (ajout de classe)
    • Chargement de la page (?)

Utilisation

transition: width 2s ease;

  • 5 propriétés:
    • transition-property: propriété à animer
    • transition-duration: durée de la transition
    • transition-delay: retardement de la transition
    • transition-timing-function: méthode d'interpolation
    • transition: propriété raccourcie
  • Préfixes: Chrome et Safari à la traine.

transition-timing-function

  • 5 méthodes:
    • linear: linéaire
    • ease: départ rapide, arrivée lente (défaut)
    • ease-in: départ lent
    • ease-out: arrivée lente
    • ease-in-out: départ lent, arrivée lente
Methode d'interpolation des transitions CSS

transition-timing-function

  • cubic-bezier(x1,y1,x2,y2)
    • Définit une courbe avec 4 "points"
Courbe de bezier pour les transitions CSS

Compatibilité

Tableau de compatibilité des Transitions CSS3

C'est quoi une animation?

  • Plusieurs transitions qui s'enchainent
  • Chaque changement de valeur est défini sous forme d'étape, avec les @keyframes
  • 2 actions nécessaires:
    • Création des étapes-clés
    • Utilisation de l'animation créée

Création

@keyframes nomAnim{
   from{ ... }
   40% { ... }
   to  { ... }
}

  • Définit 3 étapes, soit 2 transitions
  • Revient à l'état initial une fois l'animation terminée
  • Préfixes: Chrome et Safari à la traine.

Utilisation

animation: nomAnim 2s ease 5;

  • 8 propriétés:
    • animation-name: nom de l'animation utilisée
    • animation-duration: durée de l'animation
    • animation-delay: retardement de l'animation
    • animation-direction: joue l'animation en sens inverse
    • animation-iteration-count: nombre de répétition
    • animation-timing-function: méthode d'interpolation
    • animation-fill-mode: état de l'animation avant et après celle-ci
    • animation: propriété raccourcie
  • Préfixes: Chrome et Safari à la traine.

Compatibilité

Tableau de compatibilité des Animations CSS3

Positionnement

Les différentes «méthodes»

  • La propriété display
    • block, inline
    • inline-block
    • table, table-row, table-cell...
  • La propriété float
    • left, right
  • La propriété position
    • relative, absolute, fixed

display: inline-block

  • Mode «hybride»
  • Éléments en ligne, mais dimensionnables
  • Alignables entre eux avec vertical-align
Alignement vertical d'éléments affichés avec display: inline-block

display: inline-block

Tableau de compatibilité de display: inline-block en CSS3

display: table

  • Mode tabulaire
    • display: table simule <table>
    • display: table-row simule <tr>
    • display: table-cell simule <td>
  • Toute la structure n'est pas obligatoire (éléments «anonymes»)
  • table-layout modifie le calcul d'affichage du tableau
    • auto le tableau s'adapte au contenu
    • fixed le contenu s'adapte au tableau

display: table

Les plus

  • Pas de sortie de flux
  • Éléments «frères» de même hauteur
  • Largeur étirable dans le tableau
  • Alignement vertical du contenu avec vertical-align

display: table

Les moins

  • Pas de marges externes
  • Réorganisation des éléments difficile
    • Possible (un peu) avec table-header-group, table-footer-group
  • Imbrication plus complexe

display: table

Tableau de compatibilité de display: table en CSS3

Nouveaux modes CSS3

  • Multicolonnes Layout
  • Flexbox
  • Grid Layout

Flexbox

La promesse

  • Affichage en bloc ou en ligne
  • Flexibilité des boites
  • Réorganisation des éléments
  • Alignements verticaux et horizontaux
  • Promesse tenue! Module arrivé en CR (bientôt finalisé)

L'élément Flexbox

display: flex;

  • Définit l'élément principal Flexbox
  • Les enfants «subissent» ce mode
  • Préfixes obligatoires...

Ordre d'affichage

flex-flow: row wrap;

  • Propriété raccourcie de 2 autres:
    • flex-direction définit l'axe principal et l'axe secondaire du Flexbox: affichage en colonnes ou lignes
      • column, column-reverse
      • row, row-reverse
    • flex-wrap gestion du débordement des lignes
      • nowrap
      • wrap, wrap-reverse

Ordre d'affichage

order: 2;

  • Change l'ordre d'apparition au cas par cas
  • Pratique pour réorganiser mais attention à l'accessibilité

Ordre d'affichage (Playground)

> div{
    display: -webkit-flex; /*prefix*/
    flex-direction: row;
}
> div > div:nth-child(2){
    order: 0;
}
> div > div{
    margin: 5px;
    padding: 5px 30px;
    background: tomato;
}
1
2
3
4
5

La flexibilité

flex: 1 100px;

  • Propriété raccourcie de 3 autres:
    • flex-grow contrainte d'agrandissement
    • flex-shrink contrainte de réduction
    • flex-basis taille de base

La flexibilité (Playground)

> div{
    height: 100%;
    display: -webkit-flex; /*prefix*/
    flex-direction: row;
}
> div > div:nth-child(2){
    
}
> div > div{
    flex: 0;
    margin: 1px;
    background: tomato;
}
1
2
3
4
5

Alignements

  • Alignements en fonction de l'axe (principal ou secondaire)
  • Suit le Box Alignment Module (non spécifique à Flexbox)
Tableau des nouvelles propriétés d'alignement

Alignement axe principal

  • justify-content sur le parent Flexbox
    • flex-start, flex-end, center, space-between, space-around
Résultat des différentes valeurs d'alignement sur l'axe principal dans Flexbox

Alignement axe secondaire

  • align-items sur le parent Flexbox
    • flex-start, flex-end, center, baseline, stretch
Résultat des différentes valeurs d'alignement sur l'axe secondaire dans Flexbox

Alignement axe secondaire

  • Un élément peut avoir son propre alignement
  • align-self sur un Flexbox item (enfant)
    • flex-start, flex-end, center, baseline, stretch
Résultat des différentes valeurs d'alignement sur l'axe secondaire pour un élement particulier dans Flexbox

Alignements (Playground)

> div{
    height: 100%;
    display: -webkit-flex; /*prefix*/
    flex-direction: row;
    
}
> div > div:nth-child(2){

}
> div > div{
    flex: 0 40px;
    margin: 1px;
    background: tomato;
}
1
2
3
4
5

Compatibilité

Tableau de compatibilité de Flexbox en CSS3

Conclusion

Merci.

Vincent De Oliveira · @iamvdo