Intro

Présentation

Stéphane Dumoulin, développeur Front-end depuis 8 ans, actuellement en freelance

  • Intégration de sites en HTML et CSS
  • Développement JavaScript
  • Développement Wordpress et PHP
  • Animation 2D / 3D

Une brève histoire d'Internet

Les débuts d'Internet...

Internet a été prédit de manière utopique par Paul Otlet dans les années 30 avec le Mondaneum.

""Ici, la Table de Travail n’est plus chargée d’aucun livre. À leur place se dresse un écran et à portée un téléphone. Là-bas, au loin, dans un édifice immense, sont tous les livres et tous les renseignements, avec tout l'espace que requiert leur enregistrement et leur manutention, [...] De là, on fait apparaître sur l’écran la page à lire pour connaître la question posée par téléphone avec ou sans fil. Un écran serait double, quadruple ou décuple s'il s'agissait de multiplier les textes et les documents à confronter simultanément...""

Le prototype du Net

Internet a été théorisé, d'un point de vue technique, au début des années 60, avec les recherches sur la commutation de paquets.

Les premiers groupes de recherche

Dans les années 60, trois groupes de recherche travaillent à l'élaboration de l'informatique en réseau.

  • La DARPA
  • La RAND
  • Le Laboratoire National de Physique en Angleterre

Arpanet et Internet

De ces recherches nait le projet Arpanet.

Arpanet

Au début des années 70, la première ébauche d'Internet comprend 4 serveurs répartis aux Etats Unis. Le projet devient public en 1972.

Premières applications

Deux applications importantes d'Arpanet apparaîssent dans les années 70 :

  • Les mails (1972)
  • Usenet (1979)

Internet

A la fin des années 80, le réseau connait un succès grandissant avec l'ouverture de grands centres informatiques.

Au début des années 90, le réseau s'ouvre au trafic commercial et le Web apparait.

Un article du Monde : Comment le Web a « avalé » Internet

Aux origines du web

Le World Wide Web...

Le web est une application qui fonctionne sur le réseau Internet.

Il a été inventé par Tim Berners Lee en 1990 au CERN à coté de Genève.

A l'origine...

Le Web est projet informatique dont le but était de permettre aux chercheurs du CERN de partager leur document en utilisant un nouveau concept de navigation : l'hypertexte

Le premier navigateur expérimental s'appelle World Wide Web

  • Début du projet en 89
  • En 90, Robert Cailliau, ingénieur belge, se joint au projet
  • Première page en ligne en novembre 90
  • Première image en ligne en 92
  • Premier navigateur web : MOSAIC en 93
  • Fondation WWW Consortium en 94

Quelques dates clé de l'histoire du web

  • 1994 : apparition du navigateur Netscape, création de Yahoo
  • 1995 :
    • Microsoft lance MSN pour concurrencer Internet et le web
    • Apparition du serveur Apache et du navigateur Internet Explorer
  • 1996 : le site Internet Archive commence à archiver le web
  • 1998 :
    • apparition du navigateur Mozilla
    • apparition du site Google
  • 2001 : apparition du site Wikipedia
  • 2003 : apparition du navigateur Safari
  • 2004 : apparition du site Facebook
  • 2005 : apparition du navigateur Firefox
  • 2005 : apparition du navigateur Chrome

Le web en stats...

InternetLiveStats

Le webdesign de 97 à 2019

The history of Webdesign

Les navigateurs

Une page web se consulte grâce à un navigateur, aussi appelé navigateur internet ou browser.

Une page web, distante ou locale, peut y être ouverte et lue directement.

Les 4 grands navigateurs

  • Firefox - développé par la Mozilla Fundation
  • Chrome - développé par Google
  • Internet Explorer - développé par Microsoft
  • Safari - développé par Apple

A noter qu'il existe Opéra, développé par une société norvégienne

Différences entre les navigateurs

  • la vitesse de lancement du navigateur
  • les ressources au niveau du processeur
  • la vitesse de rendu
  • la qualité du rendu

Parts de marché des navigateurs

Statistiques d'utilisation des navigateurs en septembre 2018

Source : Wikipedia

Introduction au HTML

Introduction au HTML

Le HTML est un langage de balisage conçu pour structurer les pages web issu du langage SGML.

Sa première version date de 1993

<h1>La balise de titre du langage HTML</h1>

HyperText Language Markup

Le langage HTML, ou langage de balisage d’hypertexte, a été inventé en 1989. Il est à la base de la technologie du World Wide Web.

Les 3 inventions à la base du web :

  • Le protocole HTTP
  • Les URL
  • Le langage HTML

Le concept de l'hypertexte

HTML permet d'écrire des documents hypertexte, c'est à dire qui ont vocation à être liés entre eux et dont la consultation peut se faire de manière non linéaire.

L'idée centrale du langage est l'hyperlien qui ajoute une nouvelle dimension dans la navigation.

Quelques propriétés du langage HTML

HTML est un métalangage

  • La portabilité : HTML fonctionne au sein d'un navigateur web et sur tous les systèmes d'exploitation
  • Il est gratuit
  • Il est normé
  • Il est utilisé de manière universelle

Un peu de documentation sur le langage...

HTML et sémantique

Le HTML est un méta langage. Son but originel est de décrire la sémantique du document.

Dans le cas du HTML, on va devoir décrire au navigateur le contenu du document, et ses différentes parties

  • des titres
  • des paragraphes
  • des liens hypertextes
  • des tableau de données
  • ...

L'intérêt de la sémantique

A l'origine, les navigateurs web appliquaient des styles de mise en page diférentes selon les balises pour signifier la sémantique de manière visuelle à l'internaute.

Autre intérêt : la lisibilité du code par les concepteurs de page web

Les moteurs de recherche

Avec l'avènement du langage CSS, la mise en page n'a plus été confiée au navigateur.

L'intérêt de la sémantique des balises réside maintenant dans la lisibilité par les moteurs de recherche et dans l'accessibilité.

Structurer les documents

Dans les premiers temps du web, le HTML a surtout un but de stylisation.

Un langage de rangement

HTML permet aussi de structurer logiquement et de mettre en forme le contenu des pages

  • signifier des contenus de différents niveaux d'importance
  • englober des contenus au sein d'une même entité
  • créer des boites séparés
  • mettre en place des hiérarchie dans le document

L'arrivée des CSS

Au début des années 2000, le langage CSS commence à se standardiser et son utilisation augmente exponentiellement dans la communauté du développement web.

L'écriture du HTML conserve son impératif sémantique mais doit aussi permettre l'élaboration d'un design sophistiqué

  • le HTML perd son rôle stylistique
  • le nombre de balises à l'intérieur des documents augmente
  • l'écriture du HTML nécessite plus de reflexion en amont

Les trois technologies du web

Le HTML est un métalangage qui permet de structurer et d'assurer la sémantique d'un document web. Il s'agit de la première couche des technologies standards du web, les deux autres étant JavaScript et CSS.

  • HTML est un langage de balisage utilisé pour structurer et donner sens au contenu web, par exemple définir des paragraphes, entêtes et table de données ou encore intégrer des images ou des vidéos dans la page
  • CSS est un langage de règles de style utilisé pour applquer un style au contenu HTML, par exemple en modifiant la couleur d’arrière-plan ou les polices, ou en disposant le contenu en plusieurs colonnes
  • JavaScript est un langage de programmation qui permet de modifier dynamiquement le contenu d'une page web

Créer une page web

La page web

Une page web est un fichier html. Son contenu est généralement appelé : document web

Proprités d'une page web

Elle possède :

  • un contenu propre : les textes, les images...
  • le HTML qui structure l'ensemble du document
  • une extension de fichier : .html (quelque soit le système d'exploitation)

Créer une page web

Il existe différentes manières de créer une page web

  • en la programmant manuellement
  • grâce à logiciel d'édition web à interface graphique
    • Dreamweaver
    • Frontpage
  • Via l'interface en ligne d'un CMS
    • Wordpress
    • Drupal

Les outils du programmeur HTML

Pour créer une page web à la main (sans interface graphique), on a besoin :

  • d'un navigateur web
  • d'un éditeur de code

Quelques éditeurs...

Il existe énormément d'éditeurs de texte gratuits. Leur intérêt principal réside dans la coloration syntaxique.

  • Notepad++ (pour Windows)
  • Bracket
  • Visual Studio Code
  • Sublime Text
  • Atom

Pour les navigateurs...

  • Firefox
  • Chrome

Ma première page web

On commence par créer le fichier html

  • ouvrir l'éditeur de code
  • créer un nouveau fichier
  • saisir un texte
  • enregistrer le fichier sous forme de fichier HTML
  • ouvrir le fichier dans un navigateur en double cliquant dessus

Déclarer un document web

Le doctype

Depuis l'avènement du HTML 5, un document web se déclare grâce avec le doctype.

<!DOCTYPE html>

Le Doctype garantit que le navigateur fait de son mieux pour suivre les spécifications actuelles du langage HTML, plutôt que d'utiliser un mode de rendu différent incompatible avec certaines spécifications.

La balise HTML

L'intérieur d'un document web est englobé dans une balise <html>

Anatomie d'une balise HTML

Deux types de balises

Une balise HTML commence et se termine toujours par un chevron <balise>

Il existe deux types de balises

  • les balises classiques : il y a une balise ouvrante et une balise fermante

    Exemple :

    • <body></body>
    • <h1></h1>
    • <p></p>
  • les balises auto fermantes :

    Exemple :

    • <img/>
    • <link/>

On parle souvent de tag (balise en anglais), ou de markup pour désigner l'ensemble ou une partie des balises d'un site

Les attributs

Une balise peut posséder des attributs qui viennent compléter un tag.

Syntaxe de l'attribut

<balise name="value"></balise>

Exemple :

<h1 id="titre-principale"></h1>
<img src="panda.gif" />
<p id="text_intro" style="width: 250px;"></p>

Caractère facultatif ou obligatoire

  • la plupart des balises peuvent posséder 0, 1 ou plusieurs attributs
  • certaines balises doivent obligatoirement posséder des attributs pour fonctionner
    • la balise IMG
    • la balise FORM
    • la balise INPUT
  • certaines balises ne possèdent jamais d'attributs
    • la balise TR
    • la balise HEAD

A quoi servent les attributs

Ils peuvent fournir des méta-informations sur la balise ou bien changer le comportement du tag.

Des exemples d'attributs :

  • id : il permet d'identifier de manière unique une balise
  • class : permet de signifier l'appartenance d'une balise à une même catégorie d'entités
  • src : src attend comme valeur un chemin d'accès à un fichier
  • type : modifie le comportement et/ou l'aspect de certaines balises de formulaires
  • onclick : attribut d'évènement, il attend comme valeur un code JavaScript
  • data-* : nouveau type d'attribut autorisé par la norme HTML5, qui permet de stocker une donnée arbitraire

Il existe certains attributs obsolètes

...mais que l'on rencontre encore souvent

  • width
  • height
  • border

Attributs universels

  • ils peuvent être utiles à toutes les balises
  • ils sont généralement facultatifs

Exemples :

  • l'identifiant : id
  • la classe : class
  • l'attribut de stockage de données : data-*
  • les attributs d'évènement : onclick, onmouseover, ...

Attributs spécifiques

  • ils sont spécifiques à certaines balises
  • s'ils sont utilisés sur des balises auxquelles ils ne sont pas destinés, ils seront sans effet
  • ils sont parfois obligatoires

Exemples :

Les balises images possèdent des attributs specifiques :

  • src : qui est le chemin vers le fichier source de l'image
  • alt : qui décrit l'image aux moteurs de recherche
  • title : qui décrit l'image aux utilisateurs

L'attribut src n'est pas spécifique à la balise image, il sert aussi à d'autres balises :

  • <video src="films/biglebowski.mp4"> pour afficher des vidéos
  • <script src="javascript/slider.js"> pour charger des scripts JavaScript
  • <link src="css/style.css"> pour charger les feuilles de style du site

Le contenu des balises

Sauf exception, une balise doit toujours posséder un contenu.

Différents types de contenus :

  • du texte
  • une ou plusieurs autres balises
  • un mélange de texte et de balises

Le cas des balises auto-fermantes

mais la plupart d'entre elles d

  • elles ne possèdent par définititon pas de contenu
  • la plupart d'entre elles définissent leur apparence grâce à leurs attributs

Exemples :

La balise <img /> possède l'attribut src=""

La balise <br /> ne possède aucun attribut obligatoire : son comportement est intrinsèque.

Les balises

Hiérarchie des balises

Les balises d'un document HTML sont soumises à une hiérarchie.

Dans le jargon HTML, on parlera de :

  • parent, ou balise parent
  • enfant, ou balise enfant
  • balise frère ou soeur, plus souvent de siblings, ou de balises de même niveau hiérarchique

Une capture d'écran de l'éditeur Notepad++

On représente visuellement la hiérarchie des balises grâce à l'indentation

Le corps et l'entête

Le document web se scinde en suite en deux grandes parties

En bref...

  • L'entête contient des informations sur la page web qui ne sont pas visibles par l'internaute
  • Le corps contient le contenu du document web, sa charge utile, visible et consultable



L'entête

Balise <head>

Elle peut contenir :

  • des dépendances
    • des appels de feuilles de style CSS
    • des appels de fichiers JavaScript
  • des balises de style
  • des balises de script
  • des balises meta description
  • des balises meta keywords

Elle doit contenir :

  • une balise title
  • une balise meta charset

Le corps

Balise <body>

Il peut contenir :

  • quasiment toutes les balises existantes
    à certaines exceptions près :
    • html
    • head
    • meta
    • link
  • du texte
  • des images
  • des vidéos
  • des balises d'animation canvas
  • ...

La balise BODY n'a pas d'attribut, ni aucune balise enfant obligatoire.

Quelques balises de texte...

Un document basique va généralement contenir au minimumu un titre et un paragraphe.

Deux grandes balises du langage HTML

La balise de titre H1

<h1>Le titre de ma page</h1>

La balise de paragraphe P

<p>Lorem ipsum deloreane sit amet, consectetur adipiscing nostromo commodo consequat sulaco.
Duis aute irure dolor jabba in reprehenderit in voluptate dagoba velit esse cillum klendathu dolore </p>

Les différents niveaux de titre

Il existe 6 niveaux de titrage différents : de <h1> à <h6>

La règle générale veut qu'il n'y ait qu'une seule balise H1 par page web.

La balise BR

<br/> est une balise autofermante qui permet de matérialiser un saut de ligne.

Sauter une ligne dans le code source n'aura aucun visuel en front !

le HTML :

<p>Lorem ipsum deloreane sit amet, consectetur adipiscing <br/>nostromo commodo consequat sulaco. <br/>Duis caute irure dolor jabba in reprehenderit in voluptate dagoba
cvelit esse cillum klendathu dolore </p>

le résultat :


Lorem ipsum deloreane sit amet, consectetur adipiscing
nostromo commodo consequat sulaco.
Duis aute irure dolor jabba in reprehenderit in voluptate dagoba velit esse cillum klendathu dolore


Attention à ne pas confondre saut de ligne et paragraphe, visuellement et sémantiquement, les deux ne sont pas identiques.

Les listes à puce

Les listes à puces peuvent être créées en HTML grâce à deux balises

UL et LI

La balise de liste UL

UL signifie Unordered List : elle va contenir les items de la liste

<ul></ul>

La balise d'item LI

<li>Sith amet, consectetur adipiscing</li>

Le code complet :

<ul> <li>Sith amet, consectetur adipiscing</li> <li>Duis aute terminator</li> <li>Reprehenderit in voluptate</li> </ul>

La version à chiffres

Il existe également une version ordonnée, avec des puces chiffrées

<ol></ol>

    A, une balise pour les gouverner toutes

Le lien hypertexte est le concept phare du Web. Il permet la navigation entre les pages et les sites.

Relier les pages entre elles

La balise <a> va permettre de créer des liens

Par défaut, un lien sera souligné et de couleur bleue.

href, l'attribut obligatoire

La balise A possède un attribut obligatoire : href=""

La valeur de href est l'URL qui pointe vers la page web que l'on veut lier.

Exemple

<a href="ma-deuxieme-page.html">Accéder à ma deuxième page</a>

URL relatives et absolues

On différencie trois types d'URL pour l'attribut href

  • l'URL relative
  • l'URL semi relative
  • l'URL absolue

L'URL relative

Elle permet de créer un lien entre deux pages appartenant au même site relativement à leur emplacement dans l'arborescence du site

Exemple

<a href="pages/presentation.html">Présentation</a>

L'URL absolue

Elle permet de créer un lien entre deux pages situées sur des sites différents

Elle commence toujours par :

  • http://
  • https://

Exemple

<a href="http://perdu.com">Un lien vers le site Perdu.com</a>

L'URL semi absolue

Elle permet de créer un lien entre deux pages appartenant au même site relativement à la racine du site

Exemple

<a href="/pages/presentation.html">Présentation</a>

Les balises de mise en avant

Certaines balises ont pour rôle d'accentuer l'importance d'un mot ou d'un groupe de mots.

  • <strong>
  • <em>

La balise STRONG

<strong> (pour renforcement) indique que le texte a une importance particulière.
Cela se traduit généralement par un affichage en gras.

Exemple

<p>Lorem ipsum deloreane sit amet, <strong>nostromo</strong> commodo consequat narcissus.</p>

La balise EM

<em> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister, ou que l'on veut faire remarquer.
Cela se traduit généralement par un affichage en italique.

Exemple

<p>Lorem ipsum deloreane sit amet, <em>nostromo</em> commodo consequat narcissus.</p>

La balise image

Les images

La balise image ne possède pas de contenu, seulement un attribut src.

L'attribut src

L'attribut src attend comme valeur une URL correspondant à l'adresse d'un fichier image

Comme pour le lien A, l'URL peut être relative, semi relative ou absolue.

<img src="images/panda.jpg"/>
<img src="raton.gif"/>

L'attribut ALT

L'attribut alt est un attribut obligatoire des balises image. Il contient la description détaillée de l'image.

  • Décrire l'image aux lecteurs vocaux
  • Améliorer la sémantique du site
  • Fournir un texte alternatif en cas de problème de téléchargement
<img src="images/raton.gif" alt="Un raton laveur qui se gratte la tête"/>

Différents formats, différentes utilisations

Un navigateur web est capable d'afficher de nombreux types d'images

  • .jpg
  • .png
  • .gif

Ces formats correspondent aux méthodes de compression utilisées pour réduire le poids des images.

Quand les utiliser ?

Le PNG, le GIF et le JPEG correspondent à trois formats de compression différents, qui ont chacun des cas d'utilisation bien spécifiques.

  • GIF est utilisé pour des visuels contenant des aplats de couleurs marqués, des formes géométriques ou de la typographie. Et dans certains cas d'animation.
  • Le PNG est dans les mêmes cas que GIF, mais lorsque les images possèdent en plus de la transparence
  • Le JPEG est utilisé pour les images riches et complexes possédant beaucoup de couleurs, ainsi que des dégradés

Quelques exemples...

  • JPEG : photographies, illustrations
  • GIF : pictogrammes, typos, logos, séquences animées courtes
  • PNG : pictogrammes, typos, logos, images de tous types possédant un niveau de transparence

Le format JPEG

JPEG signifie Joint Photographic Experts Group. C'est un format mis au point dans les années 80 pour améliorer le fonctionnement du fax.

La compression avec perte

Avec le format JPEG, la diminution du poids est toujours associée à une perte de données : la compression fonctionne par interpolation de couleurs. L'image résultante est une "approximation" de l'image d'origine.

Caractéristiques du format JPEG

  • Très gros ratio de compression
  • Images en 16 millions de couleurs
  • Pas d'animation, ni de transparence
<img src="raton-100.jpg"/>

Poids de l'image : 142 ko

<img src="raton-0.jpg"/>

Poids de l'image : 31 ko

Le format GIF

Le format GIF a été créé dans les années 80 pour permettre de télécharger des images sur Internet plus rapidement

Une compression sans perte, mais limitée

La diminution de poids des images GIF est dûe à un algorithme qui enregistre les occurences de couleurs dans un dictionnaire. C'est la technique de stockage des données qui diminue le poids, et non leur approximation, comme avec JPEG.

Caractèristiques du format GIF

  • Compression sans perte
  • Autorise les pixels transparents
  • Possibilité d'embarquer des animations
  • Entrelaçage
  • Limité à 256 couleurs
  • Pas de couche alpha

Essais de compression avec GIF

Avec une photographie

<img src="landscape.jpg"/>

Compression JPEG. Poids de l'image : 136 ko

<img src="landscape.gif"/>

Compression GIF. Poids de l'image : 94 ko

On constate des problèmes de dégradé !

Avec un logo

<img src="logo.jpg"/>

Poids de l'image : 26 ko

<img src="logo.gif"/>

Poids de l'image : 10 ko

Le format PNG

PNG signifie Portable Network Graphics . C'est un format mis au point dans le milieu des années 90 pour prendre le relais du GIF et offrir un solution de remplacement libre.

Pas de perte de données avec PNG

Comme pour GIF, le système de compression est basé sur un dictionnaire d'occurences qui références les couleurs présentes en plus grand nombre. PNG présente cependant des différences notables avec GIF.

Caractéristiques du format PNG

  • Images en 16 millions de couleurs, à partir du format PNG32
  • Autorise les pixels transparents
  • Possède une couche alpha qui définit des niveaux de transparence de 0 à 100
  • Pas d'animation possible
<img src="cube.png"/>

Poids de l'image : 42 ko

<img src="cube.gif"/>

Poids de l'image : 12 ko

Le format SVG

SVG signifie Scalable Vector Graphics . C'est un format dérivé du XML mis au point au début des années 2000 par le W3C.

Le format vectoriel

Le SVG n'est pas un algorithme de compression. Il se base sur des formes vectorielles définies à l'intérieur de balises XML.

Caractéristiques du format SVG

  • Images redimensionnables à l'infini
  • Autorise la transparence
  • Animations possibles
  • Modifications possibles avec CSS
  • Intéractivité avec JavaScript

Quand utiliser SVG ?

  • Logos
  • Icônes
  • Formes basiques ou géométriques possédant des aplats de couleurs ou des dégradés
  • Cartes intéractives
  • Texte inclus dans une image
  • Flat design

Des exemples

Des formes géométriques basiques

<img src="forme.svg"/>

Le SVG est très utilisé pour les cartes

<img src="carte.svg"/>

Les types de balises

Les balises de type block

On différencie deux types de balises : les balises inline et les balises block

Leur comportement par défaut est l'empilement

Exemples :

  • <div>
  • <h1> - <h6>
  • <p>
  • <ul>
  • <li>
  • <section>
  • <article>
  • <form>
  • <table>

Il faut bien connaitre la catégorie d'une balise pour comprendre sa mise en page en CSS

Les balises de type inline

Leur comportement par défaut est de se positionner à la suite de l'élément précédent (balise, texte, image...)

Exemples :

  • <a>
  • <strong>
  • <em>
  • <img>
  • <span>
  • <button>
  • <select>

Une forêt de balises !

Il existe une centaine de balises HTML standards.

Au quotidien, on en utilise rarement plus d'une vingtaine

Quelques balises importantes à connaître

  • les tableaux
  • les formulaires
  • les balises video et audio
  • picture

Quelques balises plus confidentielles

  • la balise <map>
  • la balise <pre>
  • la balise <time>

Des balises pour organiser son document

  • <header>
  • <footer>
  • <article>
  • <aside>
  • <nav>

Balises sémantiques et non sémantiques

On distingue les balises sémantiques et les balises qui n'ont pas de signification particulière

Les balises sémantiques

Elles donnent un sens particulier au contenu qu'elles englobent

Exemples :

  • <article>
  • <h1>
  • <ul> <li>
  • <header>
  • <table>
  • <strong>

Les balises non sémantiques

Elles servent à isoler certaines parties du contenu dans un but de présentation uniqement.

L'utilisation de ces balises doit se faire lorsque la mise en page avec CSS nécessite un squelette HTML particulier.

Exemples :

  • <div>
  • <span>
  • <section>

Ces balises doivent être utilisées en dernier recours.

Les containers

Les balises container sont des types de balises dont le but est d'englober d'autres balises.

Pourquoi utiliser des containers

  • la sémantique du document
  • la structure du document
  • la mise en page réalisée grâce aux styles CSS

Principales balises containers

  • <div>
  • <article>
  • <section>
  • <sidebar>
  • <main>
  • <header>
  • <footer>

Exemple

<article> <h1>Le titre de ma page</h1> <p>Lorem ipsum deloreane sit amet, consectetur adipiscing nostromo commodo consequat sulaco.</p> </article>

Introduction aux CSS

Les débuts du CSS

Vers 1995, Netscape introduit les premières balises HTML destinées à la présentation et à la mise en page.

Parmi elles...

  • la balise <b>
  • la balise <i>
  • la balise <font>
  • la balise <center>

L'apparition des CSS

Elle répond à une volonté de faire évoluer HTML d'un langage de structuration à un langage de présentation.

Plusieurs questions se posent

  • HTML est-il un langage de structuration ou un langage mixte de mise en forme et de structuration ?
  • Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?
  • La réponse aux besoins est-elle un langage de description de la mise en forme ou un langage de transformation ?

La toute première version de CSS sort en décembre 1996

Le problème Internet Explorer 6

Un des premiers navigateurs à prendre en compte de manière étendue les CSS est Internet Explorer 6

... malheureusement, la prise en compte du lange est largement buguée et le monopole de Windows et IE6 restera indétronable pendant presque 7 ans

La propriété CSS

La syntaxe du langage CSS est très simple

selecteur { propriété: valeur; }

Exemple :

#main-content { font-family: Raleway, sans-serif; } .intro { color: #ff0045; float: left; background-color: yellow; }

Le CSS est un langage déclaratif.

Cascading Style Sheets

CSS signifie "Feuilles de style en cascade"

La « cascade » est la combinaison de différentes sources de styles appliqués au document.

Selon leur degré respectif de priorité. Différents modes de cascade peuvent se combiner :

Déclaration des styles CSS

Les styles CSS peuvent s'appliquer de 3 manières différentes :

  • depuis une feuille de style externe
  • depuis une balise <style> située dans le ficher html
  • depuis un attribut style="" située dans n'importe quelle balise

Déclaration des styles CSS

La feuille de style

<link rel="stylesheet" type="text/css" href="style.css" />

Cette balise se place toujours dans l'entête de la page

La balise style

<style> #main-content { font-family: Raleway, sans-serif; } .intro { color: #ff0045; float: left; background-color: yellow; } </style>

Cette balise peut être placée n'importe où dans le document. Le plus souvent, on la rencontre dans l'entête.

Les styles en ligne

Chaque balise possède un attribut facultatif et universel style=""

<p style="color: #ff0045; float: left;">Lorem ipsum dolor sit amet, lebowski ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>

Les outils de l'intégrateur CSS

La console !

Les générateurs en ligne...

  • ColorZilla pour les dégradés
  • FontSquirrel pour les typos
  • Flexbox.help pour le positionnement flex : flexbox.help

Les sélecteurs

Les sélecteurs

Le but du sélecteur

Il doit cibler une balise ou un ensemble de balise pour leur appliquer une une série de règles

L'ensemble des règles définit le style global d'une balise et son comportement vis à vis des autres balises du document

Les différents types de sélecteur

Il existe trois sélecteurs principaux

  • le sélecteur de balise
  • le sélecteur d'ID
  • le sélecteur de classe

Il existe des sélecteurs plus confidentiels :

  • le sélecteur d'attribut
  • le sélecteur de pseudo classe
  • le sélecteur global

Les attributs class et id

Les balises HTML possèdent deux attributs facultatifs

  • l'ID
  • la classe

La classe

La classe permettent de donner une catégorie à une balise. Un élément peut posséder plusieurs classes séparées par des espaces

<p class="intro-article">Lorem ipsum dolor sit amet. Ut enim georges romero ad minim veniam.</p>
<button class="bouton large yellow">Cliquez ici.</button>

L'id

<article id="article-principal">Lorem ipsum dolor sit amet. Ut enim starship troopers ad minim veniam.</article>

Il permet d'attribuer un identifiant unique à une balise.

Donner deux identifiants identiques dans une même page web est interdit par le langage HTML.

Exploitation des classes et des id

Ces deux attributs permettent de manipuler les éléments HTML via JavaScript et CSS

En pratique, on essaie de limiter le ciblage CSS via les id.

Le sélecteur de classe

Son but est de cibler toutes les balises appartenant à la même classe

La syntaxe est .nom-de-la-classe

Le HTML

<p class="intro-article">Lorem ipsum dolor sit amet. Ut enim starship troopers ad minim veniam.</p>

Le CSS

.intro-article { border-radius: 2px; background-color: black; color: white; border: 0; padding: 5px; }

Ces règles (ou cette déclaration de style) s'appliquera à toutes les balises possèdant la classe intro-article

Le sélecteur d'id

Son but est de cibler la balise possèdant cet id

La syntaxe est #identifiant

Le HTML

<p id="article-principal">Lorem ipsum dolor sit metropolis. Ut enim ad minim veniam.</p>

Le CSS

#article-principal { border-radius: 2px; background-color: black; color: white; border: 0; padding: 5px; }

Ces règles s'appliquera à la balise unique possèdant l'id article-principal

Le sélecteur de balise

Son but est de cibler toutes les balises appartenant au même type

Le HTML

<p>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</p>

Le CSS

p { border-radius: 2px; background-color: black; color: white; border: 0; padding: 5px; }

Ces règles (ou cette déclaration de style) s'appliquera à TOUTES les balises <p> de la page web.

Les combinaisons de sélecteurs

Pour cibler plus précisément une balise ou un ensemble de balises, on peut combiner les sélecteurs

La hiérarchie en CSS

La syntaxe CSS permet de cibler les balises HTML selon leur hiérarchie, c'est à dire selon leur imbrication.

Syntaxe de la hiérarchie

On distingue deux marqueurs importants :

  • l'espace
  • le chevron >

Exemple avec

Le HTML

<article> <h1>Ex ea commode maximus.</p> <p class="intro">Lorem ipsum dolor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</p> </article>

Le CSS

article .intro { padding: 20px; font-family: Montserrat, sans-serif; }

Ici on cible uniquement les balises de classe intro placées à l'intérieur de balises de type article

Le sélecteur d'enfant direct

le sélecteur chevron > permet de cibler le sélecteur suivant uniquement si celui-ci est un enfant direct

Le HTML

<article> <h1>Ex ea commode maximus.</p> <p class="intro">Lorem ipsum dolor amet. Ut enim ut aliquip ex ea
commodo consequat ad minim veniam <button>En savoir plus</button>.</p> </article>

Le CSS

article > button { padding: 20px; font-family: Montserrat, sans-serif; }

La typographie

Les propriétés de fonte

Il existe plusieurs propriétés pour définir la typographie

  • font-size pour définir la taille de la fonte
  • font-family pour définir le nom de la fonte
  • font-weight pour définir la graisse de la fonte
  • font-style pour définir le type d'italique

Au sujet de font-size

Il existe différents types d'unités :

  • le pixel px, la plus populaire et la plus utilisée
  • le rem rem, une unité relative à la taille de typo définie pour la balise html
  • le em em, une unité relative à la taille de typo définie pour la balise parent
  • le point pt
  • le viewportvw

Au sujet de font-weight

Il existe différents types de valeurs :

  • la valeur numérique
    Exemple : 400, 700, 900
  • la valeur littéraire
    Exemple : normal ou bold...

Bien choisir sa typo !

La propriété font-family permet de spécifier une famille de typo à une balise ou à un ensemble de balises

article > button { padding: 20px; font-family: Montserrat, sans-serif; } header { padding: 20px; font-family: 'Times New Roman', serif; }

Si la typo est composée de plusieurs mots, on l'encadre avec des quotes.

Fontes et compatibilité

Il faut s'assurer que la fonte spécifiée sera disponible sur tous les systèmes d'exploitation

Des exemples de fontes serif compatibles

  • Georgia
  • Times New Roman

Des exemples de fontes sans serif compatibles

  • Arial
  • Verdana
  • Tahoma
  • Impact

Il faut toujours préciser le type d'empatement en dernier recours !

Typos libres et typos propriétaires

Lorsque l'on choisit d'exploiter une typo sur un site, on doit faire attention aux éventuels copyright.

Les droits sur les typos

  • Les typos libres
  • Les typos gratuites pour un usage personnel
  • Les typos payantes

L'utilisation des typos payantes peut être soumise à une limitation en terme de nombre de visiteurs !

Ressources en ligne

Un article sur le choix des typos

Alsacréations : Quelles polices de caractères (fontes) utiliser sur le Web ?

Déclarer une fonte

Par défaut, le navigateur cherche la fonte spécifiée sur le disque dur de l'utilisateur.

Utiliser une fonte exotique

Pour forcer le navigateur à utiliser une typo qui ne se trouve pas sur l'ordinateur de l'internaute, on utilise la règle @font-face

Générer des règles font-face

Font Squirrel Generator

Il faut disposer d'une typo :

  • .ttf
  • .otf
  • .woff

Les autres proporiétés de mise en page du texte

Les autres propriétés avec des exemples de valeurs :

  • color: #ff7700;
  • letter-spacing: 1px;
  • line-height: 1.5;
  • text-transform: uppercase;
  • text-decoration: underline;
  • text-shadow: 3px 3px 5px blue;

Les valeurs de color

En langage CSS, la couleur peut être codée de 4 manières différentes

  • l'héxadécimal
  • le rgb
  • le rgba
  • littéralement

Les dimensions

Largeur et hauteur

CSS propose les propriétés width et height pour imposer des dimensions aux blocs HTML

Les balises de type block

Par défaut, ces balises ont une largeur de 100% et une hauteur définie par leur contenu.

Les balises de type inline

Par défaut, ces balises ont une largeur et une hauteur définie par leur contenu.

En l'état, ces balises ne sont pas dimensionnables.

Le HTML

<article>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</article>

Le CSS

article { width: 800px; height: 500px; }

Appliquer des marges

Les marges permettent de créer des espaces entre les différents blocs HTML

On peut modifier indépendament :

  • margin-top : la marge haute
  • margin-bottom : la marge basse
  • margin-left : la marge gauche
  • margin-right : la marge droite

Les balises inline

Elles n'acceptent que les propriétés de marge gauche et droite !

Le HTML

<article>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</article>

Le CSS

article { width: 800px; height: 500px; margin-top: 40px; margin-bottom: 60px; }

Appliquer des marges internes : le padding

Les padding permettent de créer une marge entre le bord du bloc et son contenu

On peut modifier indépendament :

padding-top, padding-bottom, padding-left, padding-right

Exemple

Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam

Le HTML

<p>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</p>

Le CSS

p { padding-top: 20px; padding-bottom: 30px; background-color: salmon; }

Les bordures

Les bordures définissent des contours matériels aux blocs HTML.

Une bordure se définit par plusieurs propriétés

  • La largeur
  • Le style
  • La couleur

On peut modifier indépendament :

border-top, border-bottom, border-left, border-right

Ou bien les quatres cotés simultanément : border

Exemple

Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam

Le HTML

<p>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</p>

Le CSS

p { border: 3px solid #ff2a09; }

L'héritage

L'héritage

Les propriétés CSS s'héritent de parents à enfants

Cas pratique

Si une balise parent possède une couleur de texte orange, tous ses enfants la posséderont par défaut.

Exemple


Ex ea commode maximus

Lorem ipsum dolor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam sulaco narcissus fiorina

  • enim ut aliquip
  • auriga enim ut aliquip
  • giger enim ut aliquip

Le HTML

<article> <h1>Ex ea commode maximus</h1> <p>Lorem ipsum dolor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam <strong><em>sulaco narcissus</strong> fiorina</p></em> <ul> <li>enim ut aliquip</li> <li>auriga enim ut aliquip</li> <li>giger enim ut aliquip</li> </ul> </article>

Le CSS

article { color: orange; }

Hériter ou ne pas hériter

Les cas où l'héritage n'est pas valable

Sur les propriétés de bloc

  • width
  • margin
  • padding
  • border

En cas de surcharge

Un sélecteur de priorité supérieure prend l'ascendant

article { color: orange; } p { color: green; }

Les cas où l'héritage est valable

Sur les propriétés inline

  • color
  • font-...
  • text-...
  • letter-spacing

Exemples

Deux cas où l'héritage ne fonctionne pas :

Bloc article :

Ex ea commode maximus

Lorem ipsum dolor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam sulaco narcissus fiorina

  • enim ut aliquip
  • auriga enim ut aliquip
  • giger enim ut aliquip

Le HTML

<article> <h1>Ex ea commode maximus</h1> <p>Lorem ipsum dolor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam <strong><em>sulaco narcissus</strong> fiorina</p></em> <ul> <li>auriga enim ut aliquip</li> <li>giger enim ut aliquip</li> </ul> </article>

Le CSS

article { color: orange; border: 1px solid #000000; padding: 20px; } li { color: green; }

Les arrière-plans

La couleur de fond

Un élément HTML, qu'il soit inline ou block, peut se voir attribuer une couleur de fond.

La propriété background-color

Elle peut prendre plusieurs valeurs

  • background-color: orange; littérale
  • background-color: #ff023c; hexadécimale
  • background-color: rgb(102, 23, 46); RGB
  • background-color: rgba(255, 12, 78, 0.3); RGBA

Exemple


Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam

Le HTML

</p> Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam </p>

Le CSS

p { background-color: #ff02e5; }

Cette proporiété ne s'applique généralement pas sur certaines balises telles que IMG, BR, HR...

L'image d'arrière-plan

Un élément HTML, qu'il soit inline ou block, peut se voir attribuer une image d'arrière-plan.

La propriété background-image

On doit lui spécifier le chemin de l'image par rapport à l'endroit du projet où est déclarée la propriété background-image

background-image: url('dossier/mon-image.jpg');

Exemple


Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sconsequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed ed consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed aperiam, eaque ipsa quae ab ill, sed consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam

Le HTML

</p> Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam </p>

Le CSS

p { background-image: url('../images/panda-roux.jpg'); }

Cette proporiété s'utilise généralement en combinaison avec background-position et background-repeat

Positionnement des arrière-plans

Le positionnement et le mode de répétition de l'arrière-plan peuvent être controlés.

La propriété background-position

Elle spécifie les coordonnées de placement de l'image d'arrière-plan.

background-position: 0% 50%;

Les unités

background-position accepte plusieurs types de valeurs

  • 50% 100% les valeurs en %
  • 5px 2px les valeurs en pixels
  • center top les valeurs littérales

L'origine du repère est le coin haut supérieur de la balise

Répétition des arrière-plans

La répétition détermine comment doit se répéter l'image d'arrière-plan.

La propriété background-repeat

Exemple : background-repeat: repeat-x

Les unités

background-repeat accepte plusieurs types de valeurs

  • repeat la valeur par défaut : l'arrière-plan est répété sur toute la surface du bloc
  • no-repeat l'arrière-plan n'est pas répété
  • repeat-x l'arrière-plan est répété uniquement sur l'horizontale
  • repeat-y l'arrière-plan est répété uniquement sur la verticale

NB : il existe aussi des valeurs plus confidentielles comme space et round

Exemple

Exemple avec background-position et background-repeat


Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sconsequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed ed consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed aperiam, eaque ipsa quae ab ill, sed consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed ed consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed aperiam, eaque ipsa quae ab ill, sed consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam

Le HTML

</p> Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam </p>

Le CSS

p { background-color: rgba(0, 255, 0, 0.1); background-image: url('images/dali.jpg'); background-position: center 90%; background-repeat: no-repeat; }

Les valeurs de position de différentes unités peuvent être combinées !

Contrôler la taille du background

Une des propriétés CSS3 les plus intéressantes est la proporiété background-size

La propriété background-size

Elle spécifie la surface d'occupation de d'arrière-plan.

Exemple

background-size: 450px 100px;

La première valeur représente la largeur de l'image, la seconde sa hauteur

Les unités

background-size accepte plusieurs types de valeurs

  • 50% 100% les valeurs en %
  • 500px 200px les valeurs en pixels
  • 500px auto les valeurs automatiques
  • cover la valeur de recouvrement optimal

cover : la valeur magique !

cover est une propriété très utile lorsqu'il s'agit de recouvrir l'arrière-plan d'un élément de manière optimale et sans se soucier des dimensions physiques de l'image de fond

Exemple

Exemple avec background-size


Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sconsequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed ed consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatnatus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam

Le HTML

</p> Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam </p>

Le CSS

p { background-color: rgba(0, 255, 0, 0.1); background-image: url('images/dali.jpg'); background-position: center 90%; background-repeat: no-repeat; background-size: 500px 100px; }

Exemple avec background-size: cover

Exemple avec background-size: cover


Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sconsequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed ed consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem consequat ad minim veniam ut perspiciatis unde omnis iste natus ensequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed ed consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem consequat ad minim veniam ut perspiciatis unde omnis iste natus error sit voluptatnatus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ill, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam

Le HTML

</p> Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam </p>

Le CSS

p { background-image: url('images/dali.jpg'); background-position: 0 0; background-size: cover; }

Le modèle des boîtes

Le modèle classique

Comment un navigateur calcule t-il les dimensions d'un bloc HTML ?

La surface totale du bloc est calculée par le navigateur en additionnant

  • width
  • padding
  • border

Calcul de dimensions par un navigateur standardisé

La propriété width n'est pas la largeur totale du bloc si celui-ci possède un padding ou une border, ou les deux.

Exemple

Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam

Le HTML

<p>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</p>

Le CSS

p { width: 300px; border: 5px solid #ff2a09; padding: 20px; background-color: orange; }

Modifier la méthode de calcul

La propriété box-sizing

Le mode de calcul des dimensions d'un bloc peut être modifié avec la proporiété CSS3 box-sizing

Elle possède 2 valeurs

  • content-box la valeur par défaut
  • border-box qui inclut border et padding dans le calcul de dimensions

Exemple avec box-sizing

Exemple

Le HTML

<p>La largeur totale est de : 300 + 5 + 5 + 20 + 20 = 350 pixels.</p>

Sans box-sizing

La largeur totale est de :
300 + 5 + 5 + 20 + 20 = 350 pixels

Le CSS

p { width: 300px; border: 5px solid #ff2a09; padding: 20px; background-color: orange; }

Avec box-sizing

La largeur totale est de :
300 pixels

Le CSS

p { box-sizing: border-box; width: 300px; height: 150px; border: 5px solid #ff2a09; padding: 20px; background-color: orange; }

Pourquoi utiliser box-sizing ?

Cette technique est maintenant très largement répandue. Beaucoup de sites ne sont plus intégrés sur le modèle classique.

  • Pour se faciliter les calculs
  • Pour utiliser des unités différentes entre width, padding et border

Container de largeur width: 100%;

La largeur totale est de : 50%
et non 50% + 2em + 2em + 20px + 20px

Le CSS

div { width: 100%; background-color: #aaa; } p { box-sizing: border-box; width: 50%; height: 150px; border: 2em solid #ff2a09; padding: 20px; background-color: orange; }

Le HTML

<div> Container de largeur width: 100%; <p>La largeur totale est de 50% et non 50% + 2em + 2em + 20px + 20px .</p> </div>

Box-sizing et le sélecteur étoile

Pour appliquer cette méthode de calcul à toutes les balises d'une page, on utilise le sélecteur universel *

Le code

En général, cette déclaration est placée dans la feuille de style de reset

* { box-sizing: border-box; }

On peut extrapoler cette propriété aux pseudo-éléments

*, *:before, *:after { box-sizing: border-box; }

Note sur le dépassement de contenu

Lorsque les dimensions d'une boîte sont fixées en largeur et en hauteur, le contenu peut parfois dépasser.

La règle overflow: hidden;

Exemple :

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur



overflow: visible;

p { box-sizing: border-box; width: 300px; height: 150px; background-color: orange; }

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur



overflow: hidden;

p { overflow: hidden; box-sizing: border-box; width: 300px; height: 150px; background-color: orange; }

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur



overflow: scroll;

p { overflow: scroll; box-sizing: border-box; width: 300px; height: 150px; background-color: orange; }

Le positionnement

Positionner les éléments inline

Les éléments inline se placent par défaut les uns après les autres.

Le texte, les images, les balises a, strong, em, span

L'alignement

  • text-align permet d'aligner ou de centrer texte et image
  • vertical-align permet de maitriser l'alignement vertical entre éléments inline

L'espacement

Les éléments inline acceptent les propriétés :

  • margin-left et margin-right
  • padding-left, padding-right, padding-top, padding-bottom

les marges hautes et basses ne sont pas pris en compte pour les éléments inline !

L'interlignage

line-height peut contrôler la hauteur d'une ligne de texte

Positionner les éléments de type block

Le positionnement classique entre balises s'effectue grâce aux marges externes

Syd mead nulla pariatur

Quis avatar autem vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur

  • Ron cobb fugiat quo voluptas
  • Lorem fugiat quo voluptas

Le CSS

h1 { margin: 20px 0 30px 0; background-color: #ff2a09; } ul { background-color: lime; }
li { margin: 5px; background-color: greenyellow; } p { margin-top: 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; background-color: orange; }

Le HTML

<h1>Syd mead nulla pariatur</h1> <p>Quis avatar autem vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur</p>

Le centrage des blocks

Le centrage d'un bloc ne peut pas se faire avec text-align

margin: auto;

La marge automatique à droite et à gauche d'une balise de type bloc permet de la centrer au milieu de son container.

Exemple


Container de largeur width: 100%;

Paragraphe de 300 pixels de large centré

Le CSS

div { width: 100%; background-color: #aaa; } p { width: 300px; margin-right: auto; margin-left: auto; background-color: orange; }

Le HTML

<div> Container de largeur width: 100%; <p>Paragraphe de 300 pixels de large centré</p> </div>

La fusion de marges

Entre deux balises, les marges basses et hautes ne s'additionnent pas, elles fusionnent.

Quis avatar autem vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur

Robocop autem vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur

Le CSS

p { margin-top: 20px; margin-bottom: 20px; background-color: lime; }

Le HTML

<p>Quis autem vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur</p> <p>Robocop autem vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur</p>

Ici l'espace entre les blocs est de 20 pixels, et non 40.

La position relative

Elle permet de décaler un bloc par rapport à son positionnement d'origine sans impact sur la position des blocs au dessus et en dessous.

Autem vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur

Vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur

Sidious reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur

Le CSS

p { margin-top: 20px; margin-bottom: 20px; background-color: lime; } .decalage { position: relative; top: -30px; left: 30px; }

Le HTML

<p>Autem vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur</p> <p class="decalage">Vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur</p> <p>Sidious eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur</p>

La position absolue

Elle permet de placer un élément en le sortant du flux, c'est à dire que son emplacement ne tient plus compte des balises qui le précèdent ou le suivent dans le code.

position: absolute;

Abscisse et ordonnée

Comme pour la position relative, la position absolue s'accompagne des propriétés top et left qui sont des coordonnées de repérage.

Origine du repère

  • Par défaut, la balise <body>
  • Le bloc parent positionné le plus proche hiérarchiquement

En CSS, un bloc est considéré comme positionné s'il possède une position relative ou absolue.

Un bloc n'est donc pas "positionné" par défaut !

Positionner par rapport à body

Par défaut, une balise positionnée en absolue prend comme référence pour son repère la balise <body>

Cela revient à considérer qu'il s'agit de l'angle supérieur gauche du navigateur

Exemple

Un paragraphe positionné en absolu

Le CSS

.text { position: absolute; top: 70px; left: 250px; width: 150px; height: 150px; padding: 10px; background-color: orange; }

Le HTML

<p class="text">Un paragraphe positionné en absolu</p>

Positionner par rapport à un élément

Les balises peuvent se positionner par rapport à un élément de référence qui n'est pas la balise <body>

Déclarer un élément de référence

Pour signifier à une balise que l'origine de son repère est une balise parent différente de BODY, on utilise la commande CSS position: relative;

Exemple

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Un paragraphe positionné en absolu par rapport à un parent

Le CSS

.parent { position: relative; } .text { position: absolute; top: 70px; left: 250px; width: 150px; height: 150px; padding: 10px; background-color: orange; }

Le HTML

<div class="parent">Lorem ipsum dolor sit amet, consectetur adipiscing... <p class="text">Un paragraphe
positionné en absolu</p> </div>

La position absolue : que retenir ?

La position absolue est un positionnement particulier

  • Il rend l'élément complètement indépendant du reste de la mise en page
  • Il fonctionne par combinaison de coordonnées verticales et horizontales
  • Il utilise comme origine de repère :
    • Soit la balise BODY
    • Soit un élément positionné en relatif

Utilisation courante du posionnement absolu

On l'utilise lorsque l'on est certain que l'élément à positionner n'a aucune influence sur le reste de la mise en page

Origine du repère

On utilise dans quasiment tous les cas un élément positionné en relatif, et jamais la balise BODY comme origine.

Le code minimal

Le CSS

.parent { position: relative; } .enfant { position: absolute; top: 70px; left: 250px; }

Le HTML

<div class="parent"> <p class="enfant">Un paragraphe...</p> </div>

La profondeur

Lorsque des blocs positionnés sont amenés à se chevaucher, la propriété z-index permet de spécifier leur profondeur.

Balise DIV positionnée en relative

.first_P

.second_P

.third_P

div { width: 500px; height: 400px; position: relative; background-color: #bbb; }
p { position: absolute; width:200px; height: 200px; } .first_P { z-index: 3; top: 30px; left: 100px; background-color: #bbb023; } .second_P { z-index: 20; top: 100px; left: 150px; background-color: orange; } .third_P { z-index: 10; top: 145px; left: 50px; background-color: lightblue; }

z-index ne peut pas s'appliquer sur une balise qui n'est pas positionnée en relative ou absolute, ni entre des balises positionnées et non positionnées.

La position flottante

Elle détache une balise du flux pour la positionner à droite ou à gauche de son container tout en étant contournée par les autres balises (block ou inline).

float: left; float: right;

La propriété flottante est très largement utilisée sur les images

Exemple

Vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur el eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.

Le CSS

img { float: left; }

Le HTML

<p>Vel eum iure reprehenderit .... quo voluptas nulla pariatur. <img src="images/big-lebowski.jpg"/> Quis autem vel eum iure reprehenderit .... vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>

Modifier le display d'une balise

Par défaut une balise HTML est, soit block, soit inline.

La propriété Display

Elle permet de modifier artificiellement le type d'affichage d'une balise.

  • display: inline;
  • display: block;
  • display: inline-block;

Exemple : des paragraphes inline



Lorem eum han solo nulla pariatur onsequatur.

Anakin nulla pariatur onsequatur.

Sid nulla pariatur jabba.



Le CSS

p { display: inline; margin-right: 10px; height: 100px; }

Le HTML

<p style="background-color: orange;">Lorem eum han solo nulla pariatur onsequatur.</p> <p style="background-color: lightblue;">Lorem eum han solo nulla pariatur onsequatur.</p> <p style="background-color: #aaa;">Lorem eum han solo nulla pariatur onsequatur.</p>

Les balises paragraphe se comportent maintenant comme des balises de type inline (<a href=""> <span> ...)

Display: block

Exemple : des liens A affichées comme des block

Le CSS

a { display: block; margin-bottom: 10px; width: 100px; height: 100px; }

Le HTML

<a style="background-color: orange;">Lorem eum vador nulla pariatur onsequatur.</a> <a style="background-color: lightblue;">Alien eum han solo nulla pariatur onsequatur.</a> <a style="background-color: #aaa;">Sid nulla pariatur jocker.</a>

Les balises A se comportent maintenant comme des balises de type block (<div> <p> ...)

Inline-block : l'hybride

La valeur inline-block n'existe pas naturellement.
Si elle est spécifiée à une balise, celle-ci va combiner les propriétés des balises block et des balises inline.

Ce qu'elle conserve du comportement inline

  • Le positionnement côte à côte
  • Les espaces qui séparent éventuellement les éléments inline

Ce qu'elle conserve du comportement block

  • Le dimensionnement forcé avec width et height
  • Le positionnement avec avec les marge hautes et basses

Inline-block en action

Exemple : des articles affichés en ligne



Lorem eum vador onsequatur

Circa hos dies Lollianus primae lanuginis adulescens, ut sperabatur, patris inpulsu provocavit ad principem, et iussus ad eius comitatum duci, de fumo, ut aiunt, in flammam traditus Phalangio Baeticae consulari cecidit adulescens, ut sperabatur funesti carnificis manu.

Lollianus eum jabba

Circa hos dies Lollianus primae lanuginis adulescens, ut traditus Phalangio Baeticae consulari cecidit adulescens, ut sperabatur funesti carnificis manu.

Eum ripley onsequatur

Circa hos dies Lollianus primae lanuginis adulescens, ut speraba tatum duci, de fumo, ut aiunt, in flammam trens, ut speraba tatum duci, de fumo, ut aiunt, in flammam trens, ut speraba tatum duci, de fumo, ut aiunt, in flammam trens, ut speraba tatum duci, de fumo, ut aiunt, in flammam traditus Phalangio Baeticae consulari cecidit adulescens, ut sperabatur funesti carnificis manu.



Le CSS

article { display: inline-block; width: 300px; margin-right: 20px; } #article_1 { height: 400px; background: #ffcc6f } #article_2 { height: 400px; background: #c7ffe9 } #article_3 { height: 450px; background: #e5ffe2 }

Le HTML

<article id="article_1"> <h2>Lorem eum jabba</h2> <p>Circa hos dies Lollianus primae lanuginis adulescens, ut traditus Phalangio Baeticae consulari cecidit adulescens, ut sperabatur funesti carnificis manu.</p> <button>Lire la suite</button> </article> <article id="article_2"> <h2>Lollianus eum jabba</h2> <p>Circa hos dies Lollianus primae lanuginis adulescens, ut traditus Phalangio Baeticae consulari cecidit adulescens, ut sperabatur funesti carnificis manu.</p> <button>Lire la suite</button> </article> <article id="article_3"> <h2>Eum ripley onsequatur</h2> <p>Circa hos dies Lollianus primae lanuginis adulescens, ut traditus Phalangio Baeticae consulari cecidit adulescens, ut sperabatur funesti carnificis manu.</p> <button>Lire la suite</button> </article>

L'alignement vertical

Des éléments possédant un comportement inline ou inline-block peuvent s'aligner verticalement de différentes manières.

vertical-align

Cette propriété détermine comment deux éléments inline ou inline-block doivent se positionner l'un par rapport à l'autre dans le sens de la hauteur.

middle

Les 3 div possèdent la propriété vertical-align: middle

top

Les 3 div possèdent la propriété vertical-align: top

Le CSS avec middle

article { display: inline-block; width: 200px; margin-right: 20px; vertical-align: middle; }

Le CSS avec top

article { display: inline-block; width: 200px; margin-right: 20px; vertical-align: top; }

Les pseudo-classes

Définition d'une pseudo classe

La pseudo-classe est un mot-clé particulier qui peut être ajouté à un sélecteur CSS.

Syntaxe

La pseudo classe est toujours précédée de deux points :
Elle est tojours collée au sélécteur.

.article:last-child { }

Utilité

La pseudo-classe permet d'indiquer l'état spécifique dans lequel doit se trouver un élément pour être pour être ciblé par la déclaration.

Exemple avec :last-child

header a:last-child { color: green; }

Ici, le dernier lien A enfant de la balise <header> sera affiché en vert.

Le survol en CSS avec :hover

hover est la pseudo-classe du survol. Elle permet d'activer des règles CSS lorsqu'un élément HTML est survolé par la souris



Lorem eum vador onsequatur. Alien eum han solo nulla pariatur onsequatur.



Le CSS

p { width: 200px; background-color: orange; } p:hover { background-color: brown; }

Le HTML

<p style="background-color: orange;">Lorem eum vador onsequatur. Alien eum han solo nulla pariatur onsequatur.</p>

:hover gère aussi la sortie de zone (le mouseout en JavaScript)

:hover avancé

hover permet d'activer toutes les règles CSS que l'on veut.
Et pas uniquement des règles de mise en page classique !





Le CSS

div { width: 300px; padding: 20px; background: orange; } div ul { display: none; } div:hover ul { display: block; }

Le HTML

<div> Survole-moi ! <ul> <li><a href="">Lien #1</a> </li><a href="">Lien #2</a></li> <li><a href="">Lien #3</a></li> </ul> </div>

Cette technique est à la base du fonctionnement des menus déroulants en pur CSS.

:last-child et :first-child

Elles permettent d'appliquer des styles spécifiques respectivement sur le dernier et le premier élément HTML d'un élément parent.

Exemple



  • Accueil
  • Nos services
  • Notre équipe
  • Contactez-nous

Le CSS

ul { background-color: #eee; } ul li:first-child { text-transform: uppercase; font-weight: 700; } ul li:last-child { background-color: orange; }

Le HTML

<ul> <li>Accueil</li> <li>Nos services</li> <li>Notre équipe</li> <li>Contactez-nous</li> </ul>

:nth-child(): Le "n-ième enfant"

La pseudo-classe :nth-child() permet de sélectionner un ou plusieurs éléments en fonction de leur ordre dans le code source.

Exemple avec :nth-child(3)



  • Accueil
  • Nos services
  • Notre équipe
  • Contactez-nous

Le CSS

ul li { display: inline-block } ul li:nth-child(3) { color: white; font-weight: 700; background-color: purple; }

Le HTML

<ul> <li>Accueil</li> <li>Nos services</li> <li>Notre équipe</li> <li>Contactez-nous</li> </ul>

L'alternance avec :nth-child()

Les mots clés even et odd permettent de créer des alternances de type "1 sur 2"

Exemple avec :nth-child(even)

Film Genre Année de sortie
Alien Science-fiction 1979
The Big Lebowski Comédie 1996
V pour Vendetta Anticipation 2005
Blade Runner Thriller SF 1982
Titanic Drame 1997
Heat Thriller 1999

Le CSS

table tr { background-color: #000; color: white; } table tr:nth-child(even) { background-color: #ccc; color: black; }

Le HTML

<table id="nth-child2"> <tr> <th>Film</th> <th>Genre</th> <th>Année de sortie</th> </tr> <tr> <td>Alien</td> <td>Science-fiction</td> <td>1979</td> </tr> <tr> <td>The Big Lebowski</td> <td>Comédie</td> <td>1996</td> </tr> <tr> <td>V pour Vendetta</td> <td>Anticipation</td> <td>2005</td> </tr> <tr> <td>Titanic</td> <td>Drame</td> <td>1997</td> </tr> </table>

L'aternance avec formules de régularité

:nth-child() accepte également comme paramètre des formules mathématiques pour cibler les balises enfant.

Exemples de formules

  • 2n : un élément sur 2
  • 3n : un élément sur 3
  • 3n + 1 : un élément sur 3 en commençant au premier élément
  • 4n + 2 : un élément sur 4 en commençant au second élément

Exemple : cibler un élément sur 3 avec :nth-child(3n)

Lorem

ingeni

dicendi

ratio

disciplina

quidem

huic

Le CSS

p { background-color: #ccc; } p:nth-child(3n) { background-color: orange; color: black; }

Le HTML

<p>Lorem</p> <p>ingeni</p> <p>dicendi</p> <p>ratio</p> <p>disciplina</p> <p>quidem</p> <p>huic</p>

Les pseudo-éléments

Définition d'un pseudo-élément

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui autorise la mise en forme d'une partie de l'élément ciblé.

Exemples :

  • ::first-line permettra de cibler la première ligne de texte d'une balise
  • ::first-letter permettra de cibler la première lettre du texte d'une balise

Syntaxe du pseudo-élément

Le pseudo-élément est toujours précédée d'un double deux points ::
Il est tojours collé au sélécteur.

.intro::first-line { color: blue; }

Pseudo-élément VS pseudo-classe

La pseudo-classe

La pseudo-classe cible un élément parmi un lot d'éléments du même type selon son sa situation

  • Si l'élément est survolé...
  • Si l'élément est le dernier de sa liste...
  • Si l'élément est ciblé par une ancre d'URL...

Syntaxe : :first-child

Le pseudo-élément

Le pseudo-élément cible une partie bien précise de l'élément indépendamment de sa situation par rapport aux autres éléments du même type que lui.

  • La première ligne...
  • La première lettre...
  • La valeur par défaut du champ...

Syntaxe : ::first-letter

::first-letter, pour faire de la lettrine

first-letter permet de modifier le style de la première lettre de texte.

Exemple



Ex turba vero imae sortis et neo morpheus tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.

Saraceni tamen nec amici agent smith nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.


CSS

p::first-letter { font-size: 50px; font-family: Georgia; font-weight: 700; line-height: 0.7; }

HTML

<p>Ex turba vero imae sortis et paupertinae in tabernis... </p> <p>Saraceni tamen nec amici nobis umquam nec hostes optandi... </p>

::placeholder pour les formulaires

::placeholder offre la possibilité de styliser un texte d'exemple dans un champ de formulaire

Exemple


HTML

<input type="email" placeholder="the.dude@mjm.com"/>

CSS

input::-webkit-input-placeholder { /* WebKit, Blink */ color: purple; font-family: Montserrat; } input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: purple; font-family: Montserrat; } input::-ms-input-placeholder { /* Microsoft Edge */ color: purple; font-family: Montserrat; } input::placeholder { color: purple; font-family: Montserrat; }

Bien qu'encore expérimentale, ce pseudo-élément est largement utilisé grâce à des version préfixées

::selection, pour embellir le copié-collé !

::selection permet d'appliquer un style sur le texte lorsque celui-ci est sélectionné par l'utilisateur.

Exemple


Ex turba vero imae sortis et neo morpheus tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, q spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.


CSS

p::selection { color: orange; background-color: black; font-size: 40px; /* non pris en compte ! */ }

HTML

<p>Ex turba vero imae sortis et paupertinae in tabernis...</p>

Seules un nombre réduit de proporiétés CSS sont applicables. font-size par exemple, n'en fait pas partie.

Créer du contenu en CSS avec ::after et ::before

Les pseudo-éléments::after et ::before permettent d'ajouter un pseudo-contenu après ou avant l'élément sur lequels ils s'appliquent.

La propriété content

::after et ::before s'appliquent en association avec la propriété content

Syntaxe :

a::before { content: '»'; }

Comportement de la propriété content

Le contenu défini comme valeur pour content se stylise comme n'importe quelle balise HTML

a::before { content: '»'; background-color: #ff02c9; margin-right: 10px; font-family: Georgia, serif; }

content pour créer des éléments inline

La propriété content se comporte par défaut comme un élément INLINE

Créer des puces personnalisées

Par copié collé direct

On peut utiliser le caractère en le copiant-collant directement dans l'éditeur

  • Daft Punk
  • Vitalic
  • Giorgio Moroder
li { list-style-type: none; } li::before { content: '♥'; margin-right: 5px; font-size: 30px; color: darkred; }

La propriété content utilisée avec un code hexadécimal

content: '\003A9';

A la place du caractère, on peut utiliser le code héxadécimal

...précédé d'un slash /

  • Iggy Pop
  • Kings of Leon
  • The Kinks
li { list-style-type: none; } li::before { content: '\003A9'; margin-right: 5px; font-size: 30px; color: green; }

Liste des caractères spéciaux en code hexa :

https://dev.w3.org/html5/html-author/charref

Un pseudo-contenu de type block

Comme n'importe quel élément, le contenu de du pseudo-élément peut être émulé en block ou en inline-block

Exemple


a::before { content: ''; display: inline-block; width: 50px; height: 50px; border-radius: 50%; background: url('images/panda-roux.jpg') -20px -3px no-repeat; background-size: 100px; vertical-align: middle; margin-right: 15px; }
<a href="#">Les pandas roux</a>

Appliquer un pseudo-élément sur une pseudo-classe

a:hover::before { }


a:hover::before { width: 70px; height: 70px; background-size: 130px; background-position: -5px -3px; margin-right: 5px; }

Les transitions

Animer une propriété CSS

Les CSS3 ont apporté une évolution majeure du langage : l'animation, via la propriété transition.

L'interpolation

La transition CSS consiste à interpoler une propriété CSS, d'une valeur de départ jusqu'à une valeur d'arrivée.

Exemple :

  • width: 0px; (valeur de départ)
  • width: 500px; (valeur de fin)

Le navigateur va interpoler la propriété width en passant par toutes les valeurs de 0 à 500

Le code

L'idée est de modifier la valeur d'une propriété à un instant donné, au moment où la balise change d'état. En précisant la propriété de transition, on va passer de la valeur par défaut à la nouvelle valeur progressivement.

<p>Hey the Dude </p>
  • Le changement d'état concerne la propriété width
  • Le changement d'état se produit au survol de p
p { background-color: red; width: 100px; transition: width 1s; } p:hover { width: 500px; }

Un exemple simple

On fait disparaitre progressivement le paragraphe au survol de la souris.

Survole moi ! Survole moi ! Survole moi ! Remplis ma tête d'autres horizons, d'autres mots. Survole moi !

Le CSS

.anime { transition: opacity 1s; } .anime:hover { opacity: 0; }

Le HTML

<p class="anime">Survole moi ! Survole moi !
Survole moi !</p>

On n'a pas besoin de préciser la valeur par défaut de l'opacité. Celle-ci est égale à 1.

Attention : les propriétés de transition se placent toujours sur le sélecteur de la balise dans son état par défaut !

Les paramètres de transition

L'exemple ci-dessus illustre un cas simple réalisé avec la propriété transition qui est en réalité une propriété raccourcie.

Contrôler les transitions finement

En réalité, il existe 4 propriétés distinctes qui permettent de contrôler une transition.

  • transition-delay : au bout de combien l'animation démarre
  • transition-duration : combien de temps doit durer l'animation
  • transition-property : sur quelle propriété CSS l'animation doit s'appliquer
  • transition-timing-function spécifie le "easing", c'est à dire l'accélération de l'animation au cours du temps

Exemple

Loading...

Le CSS

.loader { /* Propriétés de mise en page */ width: 0px; padding: 5px; overflow: hidden; background-color: orange; text-align: center; /* Transition */ transition-delay: 2s; transition-duration: 3.5s; transition-property: width; transition-timing-function: linear; } .loader:hover { width: 100%; }

Le HTML

<p class="loader">Loading...</p>

Explication

Au survol du bloc de classe "loader", sa largeur passe de 0 à 100% en 3 secondes et demi

L'animation démarre au bout de 2 secondes et suit une évolution de type linéaire, c'est à dire une vitesse constante sans phase d'accélération décélération.

Plus d'infos sur les courbes d'accélération :
W3Shool : CSS transition-timing-function Property

La propriété raccourcie

Comme pour les propriétés background, margin et padding, les transitions possèdent elles aussi leur propriété raccourcie.

transition: width 2s ease-out 1s;

Ordre des valeurs

  1. La propriété à animer (transition-property)
  2. La durée d'animation (transition-duration)
  3. Le easing (transition-timing-function)
  4. Le délai avant que l'animation ne démarre (transition-delay)

Logiquement, les deux valeurs les plus importantes sont les deux premières, ce qui permet généralement d'oublier les deux suivantes

Valeurs par défaut

  1. transition-property: all; (toutes les propriétés)
  2. transition-duration: 0s; (donc pas de transition)
  3. transition-timing-function: ease;
  4. transition-delay: 0s; (donc pas de transition)

"transition-property: all;" signifie que toutes les propriétés dont la valeur sera modifiée au changement d'état de la balise seront animées.

Exemple : un bouton

Le CSS

button { height: 50px; border-radius: 5px; background-color: orange; color: black; transition: all 0.3s; } button:hover { background-color: black; color: orange; }

Le HTML

<button>En savoir plus</button>

Explication

Au survol d'une balise button, sa couleur passe du noir au orange, sa couleur d'arrière plan passe du orange au noir, le tout en 0.3 seconde

L'utilisation du mot clé all évite de spécifier des transitions pour chaque propriété.

Exemple : un accordéon

Les festivals rennais

Rock'n Solex

Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem.

Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli? rationem.

Mythos

Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem.

Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli? rationem.

Les Transmusicales

Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem.

Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli? rationem.

Le CSS

.accordion { /* Les propriétés importantes ! */ height: 50px; overflow: hidden; transition: height 0.75s; /* Autres propriétés de mise en page */ width: 350px; padding: 10px; font-size: 20px; font-weight: 700; margin-bottom: 30px; background-color: black; color: white; } .accordion:hover { height: 200px; }

Le HTML

<div class="accordion"> <h5>Rock'n Solex</h5> <p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem.</p> <p>Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli? rationem.</p> </div> <div class="accordion"> <h5>Mythos</h5> <p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem.</p> <p>Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli? rationem.</p> </div> <div class="accordion"> <h5>Les Transmusicales</h5> <p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem.</p> <p>Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli? rationem.</p> </div>

Les transitions interdites

L'effet de transition ne peut pas s'appliquer à toutes les propriétés.

Comprendre l'interpolation

La transition fonctionne partout où la propriété CSS accepte une valeur interpolable, c'est à dire qui accepte des valeurs intermédiaires entre une valeur de départ et une valeur d'arrivée.

Des exemples de propriétés interpolables

  • width
  • margin, top, left
  • opacity (entre 0 et 1)
  • color et background-color (l'hexadécimal et le RGB sont interpolables)
  • ...

Des exemples de propriétés qui n'acceptent pas les transitions

  • display
  • visibility
  • background-image
  • font-family

Exemple avec background-image

Pas de transition au survol

Le CSS

.block { height: 150px; width: 350px; background-image: url('images/raton.jpg'); transition: background-image 0.5s; } .block:hover { background-image: url('images/panda.jpg'); }

Des interactions augmentées

La seule intéraction que permet CSS est le survol avec la pseudo-classe :hover ce qui limite franchement les possibilités.

Comment créer d'autres types d'intéractions ?

JavaScript et jQuery

JavaScript

JavaScript est la troisième technologie standard du Web. Elle a introduit le concept d'évènements qui gère les interactions entre l'internaute et le document web.
A une balise peut être associée une ou plusieurs intéractions qui vont ensuite déclencher des actions.

jQuery

jQuery est une surcouche de JavaScript. C'est un pseudo langage qui facilite l'écriture des commandes JavaScript.

La librairie peut être exploitée au sein d'une page web grâce à la balise script suivante placée dans le HEAD.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">{{{

Exemples de code jQuery

Modifier la valeur de l'opacité d'un élément de menu au clic sur un bouton de classe "burger"

$('button.burger').on('click', function(){ $('.menu').css({ 'opacity': '1' }); });

Ajouter une classe CSS sur un élément de menu au clic sur un bouton de classe "burger"

$('button.burger').on('click', function(){ $('.menu').addClass('open'); });
.menu { opacity: 0; width: 0px; transition: all 0.5s; } .open { opacity: 1; width: 100%; }

Avec ce code, on ajoute plusieurs propriétés avec une seule commande jQuery. La transition "all" permet de tout animer en une seule commande CSS.

Un menu déroulant activé par jQuery

Ajouter une classe dynamiquement

Au clic sur un bouton, on fait apparaitre un menu grâce à l'ajout d'une classe CSS.

Le HTML

<button class="burger"> Afficher la navigation </button> <nav class="menu"> <ul> <li>Notre agence</li> <li>Nos réalisations</li> <li>Notre équipe</li> </ul> <button class="close">×</button> </nav>

Le CSS

.menu { position: absolute; left: -320px; top: 0; opacity: 0; transition: all 0.5s; } .open { left: 0px; opacity: 1; }

Le jQuery

$('.burger').on('click', function(){ $('.menu').addClass('open'); }); $('.close').on('click', function(){ $('.menu').removeClass('open'); });

Explication

Au clic sur le bouton de classe burger, on ajoute la classe open à la balise nav de classe menu. Comme la classe open a été déclarée dans les CSS, les styles de open s'appliquent donc maintenant à la balise de classe menu.
La transition all permet de créer une animation à la fois sur la propriété left et sur opacity.

Le changement d'état ne se produit donc pas que grâce à des pseudo-classes telles que :hover mais peut aussi fonctionner avec des vraies classes, pour peu qu'on sache les manipuler avec JS ou jQuery.