Découvrir CSS3

2- Les nouveautés css3

Il ne s’agit pas de l’intégralité des nouveautés, mais ça vous permettra d’avoir un très bon aperçu global.

Nous allons maintenant voir un bon nombre de nouveautés que je vais diviser en 3 grandes catégories :

• Les effets visuels
• Les sélecteurs
• Les nouveaux outils pratiques

2 – 1- Les effets visuels :

• border-radius: Arrondit les bords d’un bloc.
  • Syntaxe : 1-4 length|% / 1-4 length|%;
  • Exemple : border-radius: 2px 1px 4px / 5px 3px;
  • Equivalent à:
    border-top-left-radius: 2px 5px;
    border-top-right-radius: 1px 3px;
    border-bottom-right-radius: 4px 5xp;
    border-bottom-left-radius: 1px 3xp;
• box-shadow : Applique une ombre sur un bloc
  • Syntax : box-shadow: h-shadow v-shadow blur spread color inset;
  • Exemple : box-shadow: 10px 10px 5px #000;
• text-shadow : Applique une ombre sur un texte
  • Syntax : text-shadow: h-shadow v-shadow blur color;
  • Exemple : text-shadow: 2px 2px #000;
• Gradients : Affiche un dégradé de couleurs
  • Syntax: background: linear-gradient (top, black 0%, white 100%);
  • Exemple : background: linear-gradient (-90deg, red 0%, white 100%);
• font face : Permet d’utiliser n’importe quelle police.
  • Syntax: @font-face { font-family: ‘ mafonte’;
    src: url(‘ chemin de votre dossier font/ mafonte-webfont.eot’); /* IE9 Compat Modes */
    src: url(‘ chemin de votre dossier font/ mafonte-webfont.eot?iefix’) format(‘eot’), /* IE6-IE8 */
    url(‘ chemin de votre dossier font/ mafonte-webfont.woff’) format(‘woff’), /* Modern Browsers */
    url(‘ chemin de votre dossier font/ mafonte-webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    url(‘ chemin de votre dossier font/ mafonte-webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
    }
  • Exemple : @font-face { font-family: ‘Plume’;
    src: url(‘../font/plumbae-webfont.eot’);
    src: url(‘ ../font/plumbae-webfont.eot?iefix’) format(‘eot’),
    url(‘../font/plumbae-webfont.woff’) format(‘woff’),
    url(‘../font/plumbae-webfont.ttf’) format(‘truetype’),
    url(‘../font/plumbae-webfont.svg#svgFontName’) format(‘svg’);
    }
    Div {
    font-family: ‘Plume’, arial, serif;
    font-size:12px;
    line-height:15px;
    color: #000;
    }
• Opacity : Ajuste la transparence d’un element.
  • Syntax : opacity: value|inherit;
  • Exemple: div {
    opacity:0.5;
    }
• Transform : Déplace, déforme, ou effectue la rotation d’un élément.
  • Syntax : transform : none|transform-functions;
  • Exemple : div { transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
    }
• Transition : Passe d’un état à un autre d’un élément avec par une transition animée.
  • Syntax: transition: property duration timing-function delay;
  • Exemple : div {
    width:100px;
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari and Chrome */
    -o-transition: width 2s; /* Opera */
    }
    div:hover {width:300px;}
• 3D transform : Effectue des transformations en 3D
  • Syntax : rotateX(angle), rotateY(angle) et rotateZ(angle) pour des rotations autour de chaque axe.
    rotate3d(x,y,z,angle) pour une rotation autour du vecteur 3D x,y,z.
    translateZ(z) pour des translations sur l’axe Z (profondeur).
    translate3d(x,y,z) pour des translations en 3D.
    scaleZ(z) pour des changements d’échelle sur l’axe Z
    scale3d(x,y,z) pour des changements d’échelle en 3D.
    matrix3d() spécifie une matrice de transformation 4×4.
  • Exemple : div {
    -webkit-perspective: 300;
    -webkit-transform-style: preserve-3d;
    -moz-perspective: 300;
    -moz-transform-style: preserve-3d;
    -ms-perspective: 300;
    -ms-transform-style: preserve-3d;
    perspective: 300;
    transform-style: preserve-3d;
    } div {
    -webkit-transition: -webkit-transform 1s linear;
    -moz-transition: -moz-transform 1s linear;
    -ms-transition: -ms-transform 1s linear;
    -o-transition: -o-transform 1s linear;
    transition: transform 1s linear;
    }
    div {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    }
    div {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }

2 – 2- Les sélecteurs :

Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel immédiatement suivi par un sélecteur d’attribut, un sélecteur d’ID ou une pseudo-classes, zéro ou plusieurs de ceux-ci, dans n’importe quel ordre. Le sélecteur simple a une correspondance si tous ses composants sont vérifiés.
Un sélecteur consiste en une succession d’un, ou plusieurs, sélecteurs simples, séparés par des combinateurs. Ces combinateurs sont : les caractères blancs et les caractères « > » et « + ». Des caractères blancs peuvent être insérés entre un combinateur et ses sélecteurs simples.

• Rappel : des sélecteurs en CSS2 :
  • * : Correspond à tout élément.
  • E : Correspond à tout élément E (c.à.d., un élément de type E).
  • E F : Correspond à tout élément F qui est un descendant de l’élément E.
  • E > F : Correspond à tout élément F aussi un enfant de l’élément E.
  • E:first-child : Correspond à un élément E aussi le premier enfant de son élément parent.
  • E:link, E:visited : Correspond à un élément E qui est une ancre dans la source dont le lien n’a pas été visité (:link) ou bien l’a déjà été (:visited).
  • E:active, E:hover, E:focus : Correspond à l’élément E au cours de certaines actions de l’utilisateur.
  • E:lang(c) : Correspond à l’élément de type E qui emploie une langue c (la détermination de cette langue est spécifique au langage du document).
  • E + F : Correspond à tout élément F immédiatement précédé par un élément E.
  • E[foo] : Correspond à tout élément E avec l’attribut « foo » (quelles qu’en soient les valeurs).
  • E[foo= »warning »] : Correspond à tout élément E dont l’attribut « foo » a exactement la valeur « warning ».
  • E[foo~= »warning »] : Correspond à tout élément E dont l’attribut « foo » a pour valeur une liste de valeurs séparées par des caractères blancs et dont une de celles-ci est « warning ».
  • E[lang|= »en »] : Correspond à tout élément E dont l’attribut « lang » a pour valeur une liste de valeurs séparées par des tirets, cette liste commençant (à gauche) par « en ».
  • DIV.warning : Seulement en HTML. Identique à DIV[class~= »warning »].
  • E#myid : Correspond à tout élément E dont l’ID est « myid ».

• Les sélecteurs en css3 : Les nouveautés incluent entre autres les sélecteurs d’attributs, le combinateur d’adjacence directe, les pseudo-classes et les pseudo-éléments.
  • Les sélecteurs d’attributs : Il y a 3 nouveaux sélecteurs
    • [attr^= »stringValue »]
      Ce sélecteur permet de sélectionner un élément DOM dont l’attribut « attr » commence exactement par la valeur « stringValue ».
      Exemple : p.example[title^= »ess »]{
      color:#fff;
      background:#333;
      }
    • [attr$= »stringValue »]
      Ce sélecteur permet de sélectionner un élément DOM dont l’attribut « attr » finit exactement par la valeur « stringValue ».
      Exemple : p.example2[title$= »sai »]{
      color:#fff;
      background:#045FB4;
      }
    • [attr*= »stringValue »]
      Ce sélecteur permet de sélectionner un élément DOM dont l’attribut « attr » comporte au moins une fois la valeur « stringValue ».
      Exemple : p.example3[title*= »val »]{
      color:#fff;
      background:#990000;
      }
  • Le combinateur d’adjacence directe : Permet d’ajouter un style à tous les éléments qui suivent un élément particulier.
    • Exemple : .div div~p{
      color:#fff;
      margin:20px;
      width:200px;
      padding:5px;
      border:1px solid #333;
      background:#006644;
      }
  • Les pseudo-classes : Plusieurs pseudo-classes ont été ajouté
    • :root
      Ce sélecteur représente un élément qui est la racine d’un document. Par exemple, en HTML 4, l’élément est html.
    • :nth-child(expression)
      Ce sélecteur permet de cibler tous les éléments en se basant sur leur position dans la liste des enfants de leur parent. expression peut être un nombre, une expression numérique ou un mot clé tel que « odd » ou « even ».
      Exemple :
      table.class tr:nth-child(even){ //tous les enfants aux numéros pairs
      background:#999999;
      text-shadow: 2px 2px 5px #111;
      color:#fff;
      }
      table.class tr:nth-child(odd){ //tous les enfants aux numéros impairs
      background:#990000;
      color:#fff;
      }
      table.class tr:nth-child(3n){ //tous les 3 enfants
      background:#045FB4;
      color:#fff;
      }
      table.class tr:nth-child(7){ //l’enfant numéro 7
      background:#006400;
      text-shadow: 2px 2px 2px #fff;
      color:#000;
      }
    • :nth-last-child(expression)
      Ce sélecteur accepte les mêmes arguments que :nth-child() et correspond au dernier enfant d’un élément parent.
      C’est le même principe que le :nth-child() sauf que l’on part de la fin.
      Exemple :
      table.class tr:nth-last-child(odd){ /*tous les enfants aux numéros impairs depuis la fin.*/
      background:#990000;
      color:#fff;
      }
      table.class tr:nth-last-child(-n+2){ /*les 2 derniers enfants.*/
      background:#045FB4;
      color:#fff;
      }
      table.class tr:nth-last-child(7){ /*l’enfant numéro 7 en partant de la fin donc la 2ème ligne du tableau.*/
      background:#006400;
      text-shadow: 2px 2px 2px #fff;
      color:#000;
      }
    • :last-child
      Correspond à :nth-last-child(1).
    • :first-child
      Correspond à :nth-child(1).
    • :nth-of-type(expression)
      Ce sélecteur représente un élément qui a expression frères du même type devant lui dans l’arbre DOM.
      img:nth-of-type(2n+1) { float: right; }
      img:nth-of-type(2n) { float: left; }
      alternance de la position des images en flottant.
    • :nth-last-of-type(expression)
      Ce sélecteur représente un élément qui a expression – 1 frères du même type après lui dans l’arbre DOM.
      body > h2:nth-of-type(n+2):nth-last-of-type(n+2)
      représente tous les h2 fils d’un élément XHTML body sauf le premier et le dernier.
    • :first-of-type
      Correspond à :nth-of-type(1). :first-of-type représente un élément qui est le premier enfant de son type dans la liste des enfants de son élément parent.
    • :last-of-type
      Correspond à :nth-last-of-type(1). Représente un élément qui est le dernier enfant de son type dans la liste des enfants de son élément parent.
    • :only-child
      Correspond à un élément qui n’a aucun frère. Cette pseudo-classe correspond à :first-of-type:last-of-type ou :nth-of-type(1):nth-last-of-type(1).
    • :checked
      Correspond aux éléments cochés d’un formulaire.
    • :contains(value)
      Correspond aux éléments dont le contenu textuel contient la sous-chaîne donnée en argument.
      Exemple :
      p:contains(‘essai’){
      background:#900;
      }
      signifie que tous les éléments « p » contenant la sous chaine « essai » auront pour couleur d’arrière plan, la valeur ‘#900’.
      L’usage de la pseudo-classe de contenu (:contain) est restreint aux médias statiques.
    • :empty
      Correspond aux éléments n’ayant pas d’enfant.
    • :not([expression])
      Représente un élement qui n’est pas représenté par l’expression donnée en argument.
      Exemple :
      button:not([DISABLED]){
      …
      }
      a:not(:visited) {
      …
      }
    • :target
      Représente un élément qui est la cible de l’URI.
      Exemple :
      p:target { background:#900}
      Tout élement p qui sera la cible de l’URI (via l’ID # en tant que ancre) aura pour couleur d’arrière plan la valeur « #900 ».
  • Les pseudo-élements :
    • ::first-line
      Applique la règle de style à la premiere ligne du texte de l’élément.
      p::first-line { text-transform: uppercase }
      La 1ère ligne de ou des éléments « p » est mise en majuscule.
    • ::first-letter
      Applique la règle de style à la première lettre du texte de l’élément.
      p::first-letter { font-size: 2em }
      La 1ère lettre de ou des éléments « p » a une taille de police de 2em.
    • ::selection
      Applique la règle de style à la sélection du texte de l’élément faite par l’utilisateur.
      p::selection { background:#006644 }
      A la sélection, le texte sélectionné aura une couleur d’arrière plan de valeur ‘#006644’.
    • ::before et ::after
      Génère un contenu avant ou après un contenu d’un élément.
      Ces pseudo-elements existent en CSS2.1 sous forme :before et :after

2-3- Les nouveaux outils pratiques :

• Les media queries :
  Les media queries sont une manière élégante de définir des styles différents selon le type de média de l’utilisateur. C’est particulièrement utile pour avoir des styles différents sur les écrans de petite taille des smartphones et des tablettes tactiles.
  Ainsi une seule page HTML utilisant les media queries peut distribuer des versions différentes de son design, afin de s’adapter par exemple à la largeur de l’écran ou même à l’orientation du téléphone.
  body{
  background-color:green;
  }
  @media screen and (max-device-width: 600px) {
  /* Style appliqué uniquement sur les écrans de moins de 600px de largeur */
  body{
  background-color:red;
  }
  }
  Dans cet exemple le fond de la page s’affichera en vert sur les grands écrans et en rouge sur les petits écrans.
• Les colonnes:
  Avec le CSS3 il est désormais possible de définir des colonnes, à la manière des contenus éditoriaux de journaux. Ce cas d’utilisation était assez rare avant l’apparition du CSS3, qui simplifie grandement les choses. Avec un code aussi simple que :
  p{
  column-count:2;
  }
  Il était auparavant très délicat de reproduire une telle structure de page, ce qui impliquait un découpage du texte avec du code serveur ou Javascript. Cette nouvelle méthode ultra simple permet de créer des mises en page originales afin d’aérer davantage le texte.
• RGBA et HSL(A):
  Il est désormais également possible d’utiliser de nouvelles notation pour spécifier des couleurs. La méthode standard RGB accueille maintenant une composante Alpha qui gère l’opacité. Cette nouvelle notation diffère beaucoup de la précédente.
  On utilise le format rgba(r, g, b, a) avec « r », « g » et « b » étant des entiers de 0 à 255 et « a » un décimal de 0 à 1.
  Ainsi pour colorer un arrière plan en rouge semi-transparent nous devons écrire :
  div{
  background-color: rgba(255, 0, 0, 0.5);
  }
  La notation HSL (Hue, Saturation, Lightness) un peu moins commune permet d’obtenir les mêmes résultats en jouant sur la teinte, la saturation et la luminosité.