Mise en forme CSS

Introduction 

Les sites web et les pages qui les composent reposent sur la transmission de données via un canal numérique, tous les sites Internet reposent sur des fondamentaux communs. Un site web correspond ainsi à l'assemblage organisé de fichiers différents : 
  • Les contenus :
    • contenus rédactionnels et structurant le code HTML
    • éléments multimédias qui apparaissent au sein de la page web mais correspondent à des fichiers indépendants : images, vidéos, cartes interactives 
  • La forme et l'interactivité
    • fichiers de code CSS et Javascript permettant la mise en forme graphique et l'interactivité 

Un contenu unique et de multiples mise en forme 

L'indépendance entre les contenus et la forme est caractéristique de ce média. En effet pour un même contenu nous pouvons ainsi avoir des mises en forme différentes et adaptées aux différents canaux de consultation (devices).
 
 

Google le plus célèbre aveugle du web 

Il est à noter que l'ensemble des moteurs de recherche ne perçoivent uniquement que le code HTML des pages web, ils n'arrivent pas à lire (pour l'instant en tout cas) les autres éléments de la page web que peuvent être les images, les vidéos, les fichiers flash... Autant dire qu'en termes de référencement naturel il faut soigner le code HTML et s'assurer que les contenus rédactionnels sont bien accessibles aux moteurs de recherche.

Principes CSS

Auteur : 
 
Auteur : 

Les principes essentiels

Il y a trois façons principales d'appliquer des styles CSS :

  1. Dans le corps du code (X)HTML ;
  2. Dans l'en-tête de la page ;
  3. Dans une feuille de style totalement séparée du code (X)HTML.

Les CSS dans le corps du code (à utiliser avec modération)

Vous pouvez définir des styles CSS directement dans la définition d'une balise HTML. Dans l'exemple ci-dessous, nous utilisons une balise <div> qui permet de définir une "boîte" à l'intérieur d'un contenu :

Exemple de code
 
  <div style="background-color:orange; border:1px solid black; color:yellow; font-size:150%; padding:1em;">    Cette balise div a du style !  </div>  				  

Ce qui donne : 
Image non disponible

Elle ne présente un intérêt que lorsque vous êtes certain que le style défini ne sera utilisé à aucun autre endroit ni sur aucune autre de vos pages.

Les CSS dans l'en-tête de la page

Plutôt que par la méthode précédente, il est préférable de définir vos styles CSS une fois pour toute dans une section particulière de votre page Web (on utilise normalement la section <head>).

 
 
  <head>    <style type="text/css">      div       {        background-color:#339;        color:#fff;        padding:15px;        border-bottom:5px solid red;        margin-bottom:15px;      }    </style>  </head>     <body>    <div>      Cette phrase est présentée en fonction du style défini dans l'en-tête    </div>    <div>      Cette phrase aussi, est pourtant le style n'a été défini qu'une fois !    </div>  </body>   				  

Ce qui donne : 
Image non disponible

Grâce à cette nouvelle façon de procéder, vous n'avez besoin de définir votre style qu'une seule fois. Dans notre exemple, le style défini s'appliquera automatiquement à toutes les balises <div> de la page.

Avec cette méthode, vous pouvez appliquer le même style plusieurs fois dans la même page, mais pas à plusieurs pages d'un coup. Pour aller plus loin dans la standardisation de vos pages, vous devrez utiliser la troisième méthode.

Les CSS dans une feuille de style totalement séparée du code (X)HTML

La façon idéale de définir les CSS consiste à les enregistrer dans un document indépendant de vos pages (X)HTML. Grâce à cette méthode, toutes les pages qui font référence à cette feuille de style externe hériteront de toutes ses définitions.

Un autre intérêt de cette méthode est de pouvoir définir plusieurs feuilles de styles pour le même contenu et de basculer d'une feuille à l'autre en fonction du support sur lequel le contenu est affiché (écran, imprimante, etc.). Nous reviendrons plus tard sur cet aspect.

Une page (X)HTML peut faire référence à plusieurs feuilles de styles en même temps. Dans ce cas, les définitions contenues dans ces différentes feuilles seront combinées entre elles.

Voici un exemple de styles définis dans un document séparé :

Document 'mes-styles.css'
 
  body   {    background-color:#ccf;    letter-spacing:.1em;  }     p   {    font-style:italic;    font-family:times,serif;  }  				  
Document 'ma-page.html'
 
  <head>    <link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" />  </head>     <body>    <p>Voici un exemple de paragraphe.</p>    <p>Et voici un deuxième paragraphe.</p>  </body>   				  

Et voici le résultat : 
Image non disponible

Comme dans la méthode précédente (CSS dans l'en-tête de la page), le style n'a été défini qu'une seule fois mais peut être utilisé plusieurs fois. La différence entre cette méthode et la précédente, c'est que notre feuille de style peut être utilisée par un nombre illimité de pages. Il suffira d'ajouter la mention <link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" /> dans ces pages pour que notre feuille de style s'y applique.

Lorsque les utilisateurs du site chargeront une page, leur navigateur ira également lire la feuille de styles à laquelle cette page fait référence.

La méthode "<link href=..." permet également de mettre en place plusieurs feuilles de styles destinées aux différents medias (imprimante, navigateurs de PDA, etc.).

Vous pouvez en effet souhaiter mettre en place une présentation particulière (sans les menus, par exemple) destinée à l'impression de vos documents. Voici une liste des valeurs les plus couramment utilisées pour link :

<link href="general.css" rel="stylesheet" type="text/css" media="all"> Remplacez general.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style commune à tous les medias.
<link href="ecran.css" rel="stylesheet" type="text/css" media="screen, projection"> Remplacez ecran.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux écrans.
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld"> Remplacez mobile.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux PDA et téléphones mobiles.
<link href="impression.css" rel="stylesheet" type="text/css" media="print"> Remplacez impression.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux imprimantes.

Note : Le site blog-and-blues pourra vous apporter des détails sur ces sélecteurs de media.

Pour clore ce chapitre, précisons enfin que la déclaration "<link href=..." n'est pas la seule façon de faire appel à une feuille de style séparée. On peut également utiliser la formulation suivante :

Cette définition de style est à placer dans la section <head> de votre page.
 
  <style type="text/css">    @import url(styles.css) all;  </style>  				  

Vous devrez remplacer "styles.css" par le nom que vous souhaitez donner à votre feuille de style. Vous pouvez également remplacer "all" par le type de média auquel se destine votre feuille de style.

Avantages des feuilles de styles séparées

Il y a de multiples avantages à séparer les feuilles de styles du contenu.

Citons en particulier :
  1. La réduction de la taille des pages : Les définitions de style ne sont faites qu'une seule fois, même si elles sont utilisées plusieurs fois ;
  2. La réduction des temps de connexion : Les navigateurs garderont en mémoire (en cache) le contenu de la feuille de style CSS qui s'appliquera sur toutes les pages du site. Seuls les contenus des pages devront être chargés au cours de la navigation ;
  3. Une mise à jour plus facile : Vous n'aurez besoin que de changer la feuille de style pour mettre à jour la présentation de l'ensemble de votre site ;
  4. Scinder le travail de rédaction et le travail de présentation : Vous pouvez commencer à rédiger le contenu de vos pages sans vous soucier de leur présentation finale. Pensez simplement à placer correctement vos balises sémantiques (titre, sous-titres, listes, classes et ID, etc.). Vous pourrez travailler votre mise en page et votre design plus tard.

1. Contexte : rendu par défaut des éléments HTML

Les documents web sont globalement régis par deux normes de langages : la norme (X)HTML et la norme CSS.

  • Le langage HTML définit la structure du document à l'aide d'éléments (les balises) porteurs de sens.
  • Le langage CSS apporte le rendu (visuel, auditif, imprimé, ...) sur les différents supports (écran, plage braille, imprimante,...).

Les deux entités sont donc complémentaires mais dissociées : la première apporte le sens (la sémantique); la seconde ajoute du rendu d'affichage.

Cependant, même lorsqu'aucun style CSS n'est défini, chaque élément hérite d'un affichage par défaut (rendu initial) qui peut être légèrement différent d'un navigateur à un autre.

Selon le W3C, les éléments HTML sont regroupés dans différentes entités (%flow, %block, %inline, %headings, %lists, ...) et deux types de rendus d'affichage globaux : les éléments de niveau bloc et les éléments en-ligne.

1.1. Éléments de niveau bloc et éléments en-ligne

Les notions de « niveau bloc » et « en-ligne » dans les spécifications sont définies ainsi :

  • Certains éléments HTML, qui peuvent apparaître dans l'élément BODY, sont dits être de niveau « bloc » [ndt. block-level] tandis que d'autres sont dits de niveau « en-ligne » [ndt. inline] (aussi connu comme sous le nom « niveau texte »). La distinction se fonde sur plusieurs notions :
  • Le modèle de contenu
    • De manière générale, les éléments de bloc peuvent contenir des éléments en-ligne et d'autres éléments de bloc. Et de manière générale, les éléments en-ligne ne peuvent contenir que des données et d'autres éléments en-ligne. L'idée inhérente à cette distinction structurelle, c'est que les éléments de bloc créent des structures « plus grandes » que les éléments en-ligne
  • Le formatage
    • Par défaut, les éléments de bloc sont formatés différemment des éléments en-ligne. En général, les éléments de bloc commencent sur une nouvelle ligne, et non les éléments en-lign

1.2. Un rendu CSS initial proposé par le W3C

Les spécifications CSS proposent, elles aussi, des recommandations d'affichage initial pour chacun des éléments HTML, sous la forme d'une feuille de style d'exemple. Les développeurs de navigateurs sont invités à se conformer à cette feuille CSS « par défaut ».

Dans un monde idéal de compatibilité, tous les navigateurs et agents-utilisateurs appliqueraient à la lettre les feuilles de styles CSS initiales recommandées par le W3C... Est-ce le cas ? Pas tout à fait. Chaque navigateur est libre de proposer un rendu par défaut différent de celui proposé par les spécifications CSS, et on observe quelques discordances qui font le malheur des webdesigners. Celles-ci ne sont pas légion, mais il est important de bien les identifier.

2. Contexte : rendu CSS 

Les propriétés CSS d'un élément sont plus variées que les 2 seuls comportements inline et block des éléments HTML. De ces propriétés (display: block, inline, list-item, inline-block, table, table-cell,...) découlent ses spécificités d'affichage, et son positionnement dans le flux.

2.1. block

Les éléments de rendu CSS block se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise<p>). Par ailleurs, un élément "bloc" occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur et peut être dimensionné à l'aide des propriétés telles que width, height, min-width, ou min-height,...

Display block

<p>Paragraphe 1</p><p>Paragraphe 2</p>

Ces deux paragraphes vont s'afficher sur deux lignes, car la balise <p> est par défaut un élément de rendu "bloc" : chaque paragraphe va occuper une ligne.

2.2. inline

Les éléments de rendu inline se placent toujours l'un à côté de l'autre afin de rester dans le texte (par exemple la balise <strong>).
Par défaut, il n'est pas prévu qu'ils puissent se positionner sur la page (même si cela est possible), ni de leur donner des dimensions (hauteur, largeur, profondeur) : leur taille va être déterminée par le texte ou l'élément qu'ils contiennent. Certaines propriétés de marges peuvent être appliquées aux éléments, comme les marges latérales.

Display inline

<strong>Toto</strong> et <em>moi</em>

Ce texte va s'afficher sur une seule ligne (aucun retour à la ligne) car les éléments qui le composent sont de rendu CSS "en-ligne".

2.3. inline-block

Les éléments de rendu inline-block conservent les mêmes caractéristiques que les "inline", mais peuvent être dimensionnés, par exemple la balise <input>.

Display inline-block

2.4. list-item

Les éléments de rendu list-item ont un rendu de type "block" mais peuvent bénéficier des propriétés CSS liées aux puces (list-style, list-style-type, list-style-image, list-style-position , ...), par exemple la balise <li>.

Display list-item

2.5. table, table-row, table-cell

Les éléments de rendu tabletable-rowtable-cell possèdent le même comportement que les éléments de tableaux et cellules (<table>, <tr>, <td>). Ils permettent de centrer les contenus verticalement et d'avoir des hauteurs identiques entre éléments frères, par exemple la balise <td>.

Display table-row-cell

Il existe également inline-tabletable-row-grouptable-columntable-column-grouptable-header-grouptable-footer-group, et table-caption.

2.6. autres...

Il existe d'autres valeurs possibles pour la propriété display, notamment :

none
La fameuse valeur qui permet de masquer un élément à l'affichage : aucune boîte n'est générée dans la structure de formatage, il n'y a pas d'influence sur la mise en forme du document.
run-in et compact
Ces valeurs créent une boîte de bloc ou en-ligne, selon le contexte. Les propriétés s'appliquent aux boîtes compactes ou en enfilade en fonction de leur statut final (types bloc ou en-ligne).
marker
Cette valeur précise la qualité de marqueur du contenu généré apparaissant avant ou après une boîte. Elle ne devrait être employée qu'avec les pseudo-éléments :before et :after liés à des éléments de type bloc. Dans certains cas, cette valeur est interprétée comme 'inline'.

3. Comment appliquer des styles CSS à des éléments HTML

Les styles vont s'appliquer à des éléments HTML d'une page ou d'un site par le biais de sélecteur qui permettent de cibler les éléments HTML sur lesquels le style doit être appliqué. 

3.1. *

1
2
3
4
* {
 margin: 0;
 padding: 0;
}

L'astérisque cible tous les éléments de la page. Beaucoup de développeurs utilisent cette astuce pour remettre à zéro les margess et les espacements. C'est parfaitement indiqué pour des tests rapides mais je vous recommande de ne jamais recourir à cette méthode dans votre code en production : cela sollicite troplourdement le navigateur et ça n'est pas indispensable.

Le symbole * peut aussi être utilisé avec des sélecteurs d'enfants.

1
2
3
#container * {
 border: 1px solid black;
}

Ceci cible tous les éléments enfants de la div #container. Là encore, essayez d'utiliser cette technique le moins possible, voire pas du tout.

3.2. #X

1
2
3
4
#container {
 width: 960px;
 margin: auto;
}

L'utilisation du symbole dièse comme sélecteur nous permet de cibler un élément par son id. Ce sélecteur d'id est probablement celui qui est le plus couramment utilisé mais il doit l'être avec quelques précautions.

Demandez-vous : est-ce que j'ai absolument besoin d'appliquer un id à cet élément pour le cibler ?

Les sélecteurs d'id sont en effet très rigides et ne permettent pas une réutilisation. Si possible, essayez d'utiliser d'abord un nom de balise, un des nouveaux éléments HTML5, ou même une pseudo-classe.

3.3. .X

1
2
3
.error {
color: red;
}

Ceci est un sélecteur de classe. La principale différence entre les ids et lesclasses est que ces dernières vous permettent de cibler plusieurs éléments. Utilisez des classes quand vous souhaitez que votre mise en forme s'applique à un groupe d'éléments. Alternativement, vous pouvez donc recourir aux ids, un peu comme on chercherait une aiguille dans une botte de foin, et mettre en forme l'élément spécifique ainsi ciblé, et lui seul.

3.4. X Y

1
2
3
li a {
text-decoration: none;
}

Le quatrième sélecteur le plus répandu est le sélecteur descendant. C'est lui que vous utilisez quand vous avez besoin d'être plus spécifique avec vos sélecteurs. Par exemple, comment faire pour cibler non pas toutes les balises d'ancres mais seulement celles qui sont comprises dans une liste non ordonnée ? C'est typiquement le cas où vous ferez appel à un sélecteur descendant.

Astuce pro - Si votre sélecteur ressemble à quelque chose comme X Y Z A B.error, c'est que vous vous y êtes mal pris. Demandez-vous toujours s'il est vraiment nécessaire de recourir à une syntaxe aussi lourde.

3.5. X

1
2
a { color: red; }
ul { margin-left: 0; }

Imaginons que vous vouliez cibler tous les éléments d'une page, non pas selon leurid ou leur class mais selon leur type ? Faites simple et utilisez un sélecteur de type. Par exemple, si vous devez cibler toutes les listes non ordonnées, utilisez simplement ul {}.

3.6. X:visited et X:link

1
2
a:link { color: red; }
a:visted { color: purple; }

La pseudo-classe :link est utilisée pour cibler toutes les balises d'ancres qui ne sont pas encore cliquées.

Alternativement, la pseudo-classe :visited permet, comme vous l'aurez deviné, d'appliquer une mise en forme spécifique aux seules balises d'ancres de la page quiont été cliquées ou visitées.

3.7. X + Y

1
2
3
ul + p {
 color: red;
}

On appelle ceci un sélecteur adjacent. Il permet de ne sélectionner que l'élément qui est immédiatement précédé par le premier élément ciblé. Ici, par exemple, seul le premier paragraphe après chaque ul comprendra du texte de couleur rouge.

3.8. X > Y

1
2
3
div#container > ul {
border: 1px solid black;
}

La différence entre le X Y standard et X > Y est que ce dernier ne sélectionnera que des enfants directs. Par exemple, soit le balisage suivant :

01
02
03
04
05
06
07
08
09
10
11
12
<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

Le sélecteur #container > ul ne ciblera que les uls qui sont enfants directs de la div avec l'id container. A l'inverse, il ne ciblera pas, par exemple, le ul qui est enfant du premier li.

Pour cette raison, l'utilisation de ce combinateur d'enfant apporte de vrais bénéfices en termes de performance. En fait, il est même particulièrement recommandé de l'utiliser quand on a recours à des moteurs de sélecteurs CSS basé sur du JavaScript.

4. Construire une feuille de style CSS

Lors de la construction des consignes CSS il faudra toujours garder à l'esprit que le code CSS est lu et interprété par le navigateur de manière linéaire d'après l'ordre d'affichage.

Conséquences :
  • Il est possible de "surcharger" des styles CSS en positionnant des règles CSS
  • Cela impacte l'ordre d'écriture des CSS : il faut lors de la construction des styles CSS commencer en haut par délivrer les consignes CSS les plus générales, puis de préciser des règles CSS plus spécifiques en bas de la feuille de style CSS

4.1. Annuler les styles par défaut des navigateurs

Chaque navigateur applique ses propres styles CSS même si aucun n'a été spécifié pour une page web. Cet affichage est relativement similaire entre navigateurs mais présente cependant de légères différences. 

Il est dnc judicieux d'utiliser un fichier de type "reset css" qui va annuler tous les styles s'appliquant par défaut. Il existe de nombreux fichiers de reset CSS parmi eux on peut citer : http://meyerweb.com/eric/tools/css/reset/

Le principe est d'appliquer ces consignes CSS au tout début du document CSS, une fois ceux-ci en place tous les navigateurs ont un comportement identiques (mais tous les styles par défaut disparaissent aussi (comme les puces des listes à puces)...

4.2. Principales propriétés CSS

Tout comme pour le code HTML il existe différents standards de code CSS : CSS 1, 2, 3,... Tout ses standards définissent des propriétés CSS que l'intégrateur HTML peut utiliser. La recommandation est de privilégier des propriétés CSS des standards 1 et 2 et d'utiliser avec plus de parcimonie le standard CSS3.

4.3. Subtilités du CSS : flux et positionnement

Une des notions les plus complexes à intégrer en CSS concerne le flux et le positionnement des éléments.
Une excellente explication est à lire attentivement sur ces articles : 

5. Ressources

Ce support de cours a été rédigé en recourant aux sources suivantes : 

Principes des CSS (suite)

Rappels 

Lors du cours précédent nous avons présenté : 

  • comment appliquer des CSS dans une page web (style en ligne ou appel de fichiers externes)
  • le comportement par défaut des éléments inline/en ligne et block 
  • les méthodes pour appliquer des CSS à des éléments d'une page web (sélecteur universel, sélecteur de contexte, sélecteur d'id, sélecteur de class)
  • une introduction aux notions de positionnements et de flux 
Nous allons à l'occasion de cette séance nous focaliser sur plusieurs aspects techniques des CSS (marges, propriété position, propriété float) puis nous évoquerons différents framework CSS qui facilitent et améliorent la qualité des intégrations CSS avant d'aborder les notions permettant d'adapter un site web aux tablettes et smart phones. 


1. Marges intérieures et extérieures

Pour chaque élément html (de type block) on peut définir l'espacement qui le séparera des autres éléments (margin) et les espacements intérieurs dont il peut bénéficier (padding).

1.1. Déclaration des tailles

Les tailles de ces marges peuvent se déclarer en pixels (px), en em, en %, etc. Tout dépend si l'on veut qu'elles soient fixes ou proportionnelles.

On peut détailler les tailles des marges à l'aide des suffixes -top (haut), -right (droite), -bottom (bas),-left (gauche), ou synthétiser les quatre d'un seul coup (la première valeur étant celle du haut, puis on tourne dans le sens des aiguilles d'une montre).

 margin:2px 5px 2em 0;  

revient à :

 margin-top:2px;   margin-right:5px;   margin-bottom:2em;   margin-left:0;  

Si on ne met que deux valeurs, la 1ère s'appliquera au haut et au bas, la seconde à droite et à gauche.

 padding:2px 5px;  

revient à :

 padding-top:2px;   padding-bottom:2px;   padding-right:5px   padding-left:5px;  

1.2. Le modèle des boites

D'après le "box model", lorsqu'on attribue une taille à un élément de type block (à l'aide d'un width ou d'un height), les marges viennent s'ajouter à cette taille.

Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer horizontalement un élément.

Code CSS

p {   width:200px;   padding:40px;   margin:auto;   }  

Le paragraphe aura une largeur totale de 200 + 2*40 = 280 pixels et sera centré dans son élément parent.


A noter que les éléments de type inline ne peuvent pas se voir affecter de hauteur, de largeur et de marges verticales. 

2. Notion de flux

Le flux d'un document pourrait se définir comme étant le comportement naturel d'affichage des éléments d'une page web.

Autrement dit, les éléments se succèdent dans l'ordre où ils sont déclarés dans le code HTML avec la différence entre les éléments block et inline :

  • Les éléments de type block (h1, p, ul, ol, dl, table, blockquote, etc.)
  • Les éléments de type inline (a, img, strong, abbr, etc.)

Un élément de type block peut s'identifier à une brique, à un gros "bloc" d'informations qu'on va pouvoir manipuler aisément. Il se différencie des éléments de type en ligne sur différents points, dont ceux-ci :

  • Il occupe l'entierté de la largeur de son conteneur
  • Il permet l'attribution de marges verticales
  • Il permet la modification de sa hauteur et largeur

Expérience : ce qui ne fonctionne pas sur un élément "inline" : hauteur et marge verticales.

http://codepen.io/semantiqueweb/pen/vNdVjO

3. La propriété position

La propriété position porte merveilleusement bien son nom puisqu'elle va nous permettre de gérer les… positions.

C'est la propriété vers laquelle l'on se doit de se tourner en premier lieu dès que l'on considère une mise en page pour laquelle les possibilités du flux ne suffisent plus, et c'est là toute la raison d'être de cette puissante propriété.

3.1. La position relative

La position relative (position:relative) permet de décaler un élément par rapport à une position de référence : celle qu'il avait dans le flux. cf http://codepen.io/semantiqueweb/pen/JYpmZq

Les éléments qui le suivent et le précèdent ne sont pas influencés par ce décalage puisqu'ils considèrent que l'élément est toujours dans le flux à sa position initiale. En pratique, ce comportement est rarement recherché bien qu'il puisse s'avérer utile dans certains cas.

Attribuer à un élément une position relative peut par contre être pratique, voire indispensable, dans d'autres situations dont les plus courantes sont sans nul doute les suivantes:

  • Servir de référent à un élément enfant positionné en absolu (rappelons qu'un élément positionné absolument grâce aux propriétés top, left, … le fera par rapport à la fenêtre du navigateur à défaut d'avoir un parent lui-même positionné)
  • Bénéficier de la possibilité d'utiliser la propriété z-index pour gérer des superpositions d'éléments (propriété inopérante pour des éléments du flux)

3.2. La position absolue

La position absolue (position:absolute) permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code, contrairement aux flottants que nous verrons plus tard.

La position absolue s'affranchit définitivement du cordon liant jusqu'alors intimement contenu et présentation. L'élément étant totalement extrait du flux, il ne dépend plus du tout des éléments qui le côtoient.

Il faut voir le positionnement absolu comme étant une méthode radicale (mais puissante) qui retire tout à fait un élément du flux: il n'existe pour ainsi dire plus aux yeux des éléments qui, eux, restent dans le flux.

Rappelons un point important concernant ce mode de positionnement : un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné (en relatif) qu'il rencontre. cf http://codepen.io/semantiqueweb/pen/ZbrqVM

L'élément, n'étant plus dans le flux naturel, perd une de ses caractéristiques majeures qui est celle de recouvrir la totalité de la largeur disponible de l'élément parent.

Il est capital de noter qu'un élément bénéficiant d'une position absolue ne bougera pas de sa position initiale tant que l'une des propriétés top, bottom, left ou right n'a pas été précisée; il s'agit d'ailleurs là d'un comportement appliquable à toutes les positions.

3.3. La position fixe

Le positionnement fixe (position:fixed) s'apparente au positionnement absolu, à l'exception des points suivants:

  • Lorsque le positionnement est précisé (top, right, …), l'élément est toujours positionné par rapport à la fenêtre du navigateur
  • L'élément est fixé à un endroit et ne pourra se mouvoir, même lors de la présence d'une barre de défilement. En d'autres termes, la position intiale est fixée au chargement de la page, le fait qu'une éventuelle scrollbar puisse être utilisée n'a aucune influence sur le positionnement de l'élément: il ne bouge plus de la position initialement définie.

3.4. La position statique

La position statique (position:static) correspond simplement à la valeur par défaut d'un élément du flux. Il n'y a que peu d'intérêt à la préciser, si ce n'est dans le but de rétablir dans le flux un élément en particulier parmi une série qui serait positionnée hors du flux.

4. La propriété float

La propriété float demeure sans doute, malgré des qualités intrinsèques évidentes, la propriété la plus mal comprise mais surtout, la plus mal employée des CSS. Sa simplicité d'utilisation apparente recèle pourtant certaines subtilités fondamentales et lui confère malheureusement un choix inconsciemment systématique pour toute disposition d'éléments en plusieurs colonnes.

4.1. Rôle & détournement des flottants

La propriété float existe avant tout pour répondre à un besoin typographique précis: la création d'habillages. Un habillage est une pratique courante dans le média print consistant à "enrouler" un texte autour d'un élément (graphique ou texte); il était normal de retrouver cette ouverture de mise en page dans notre média favori.

À l'instar du positionnement absolu, un élément flottant adopte par défaut la largeur qu'occupe son contenu. Le principe de base est simple: un élément flottant est ôté partiellement du flux et placé à l'extrême gauche (float:left) ou droite (float:right) de son conteneur, forçant par la même occasion tout contenu du flux qui suit à l'envelopper. Deux objets flottants dans la même direction se rangeront côte à côte, seul un contenu demeuré dans le flux qui les succède immédiatement initiera l'habillage. C'est justement ce caractère hâtif de disposition adjacente de blocs qui est la cause d'une mauvaise et sur-utilisation de cette propriété trop souvent écartée de son application originale.

cf http://codepen.io/semantiqueweb/pen/YyvRwb

4.2. Nettoyer les flottants

Méthode 1 :

La propriété clear s'utilise conjoitement aux float et permet à un élément (qui peut être d'ailleurs lui-même flottant) de ne plus subir le comportement d'habillage dicté par un objet flottant qui le précède directement et, par conséquent, de se caler en-dessous de ce dernier. Le clear autorise un nettoyage des flottants exclusivement à gauche (clear:left), à droite (clear:right) ou les deux simultanément (clear:both).

Méthode 2 : 
Pour annuler les flottements il est également possible de déclarer en CSS les propriétés suivantes pour le conteneur des éléments flottants : 
  • déclaration d'une largeur
  • déclaration de la propriété overflow avec pour valeur : visible ou hidden.

4.3. Exemple Image & texte côte à côte

Je souhaite disposer sur un espace de 300px de large un bout de texte et une image côte à côte sur base du marquage HTML suivant:

<p>
    <img alt="" src="kiwiz.png" width="100" height="130" />
    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</p>

Le résultat auquel j'aimerais arriver sans avoir à modifier mon code HTML est le suivant:

Capture d'écran: colonne de texte aligné à droite avec une illustration sur la droite

À nouveau, grâce aux positions et aux propriétés du flux, je vais rapidement arriver au résultat escompté: il me suffira simplement d'utiliser ma boîte p comme référent pour positionner mon image en ayant préalablement réduit la zone où mon texte pourra s'étendre:

p {position:relative; width:180px; padding-right:120px; text-align:right;}
p img {position:absolute; right:0;}

cf http://codepen.io/semantiqueweb/pen/JYpeGo

4.4. Exemple de mise en forme du header d'une page

Un cas classique avec plusieurs éléments flottants : http://codepen.io/semantiqueweb/pen/YyeRGp

5. Conclusions sur les positions et les flux

La disposition des éléments en CSS est définitivement l'un des aspects de ce langage les plus subtils et mal compris. En attendant une implémentation raisonnable des différentes possibilités du display, ce sont essentiellement les propriétés position et float qui feront office de ténors en la matière.

Il n'est pas toujours aisé dans un apprentissage comme celui du positionnement CSS de savoir pour quels choix opter et dans quels cas. Aussi, une marche à suivre simple pourrait être appliquée dans le choix d'une méthode à privilégier:

  1. Je laisse tant que faire se peut les éléments dans le flux et tire parti de ses bénéfices (décalages grâce aux marges, recouvrement par un bloc de toute la largeur d'un parent, etc.)
  2. J'ai besoin de sortir un élément du flux :
    1. Si j'ai le contrôle du contenu de ma page ou que je suis assuré que mon élément hors flux sera systématiquement moins long que ce qui demeure dans le flux, je privilégie la propriété adéquate: position
    2. Si je n'ai aucun contrôle fiable sur des longueurs de contenu totalement inconnues et variables, j'opte pour des placements à base de flottants exclusivement sur les éléments qui l'imposent

Nous voyons donc que le seul cas où l'utilisation de flottants pour créer du multi-colonnage est plus adaptée est lorsque nous ne pouvons prédire quelle sera la plus haute des colonnes et qu'à celles-ci succèdent d'autres contenus.

Utilisez à bon escient les outils dont vous disposez et n'optez jamais pour une solution sans en évaluer les avantages et inconvénients; la réflexion de structuration de l'information va au-delà d'un balisage sémantique…

5.1. Pour aller plus loin

6. Les Framework CSS

Avantages des framework CSS

  • gérer la compatibilité sur les différents navigateurs (reset CSS)
  • faciliter le positionnement CSS (« grille » CSS)
  • faciliter la gestion des résolution d’écrans multiples à l’heure de la mobilité (responsive design)

Cela permet donc de vous libérer de contraintes techniques peu intéressantes et de vous consacrer pleinement au design de votre site.

Les solutions disponibles
Il existe maintenant de nombreux framework disponibles sur le marché. L’idéal est d’en essayer quelques uns pour voir lequel correspond le mieux à vos habitudes et votre projet. Il faut notamment voir de quelles fonctions vous aurez besoin, car les framework sont plus ou moins simples et légers.

Knacss : sans doute le plus léger. Il a été créé par Raphaël Goetter, fondateur d’Alsacreations dont nous avons déjà dit du bien dans ces pages. Il se compose en fait d’une simple feuille CSS à intégrer dans vos projets et qui vous servira de base. Vous pourrez trouver le code commenté (utile pour comprendre et apprendre) et aussi une galerie de réalisations utilisant Knacss.

Blueprint CSS : là c’est un framework plus complet, qui permet de gérer une grille, mais également la typographie et les formulaire. Vous pourrez trouver sur le site des démos ainsi qu’un lien vers le wiki où vous trouverez des tutoriaux, des plugins et des thèmes.

960 Grid System : vous trouverez sensiblement les mêmes fonctionnalités qu’avec Blueprint. A noter que dans le « package » se trouve des plugins pour Photoshop et Fireworks.

Kube : Peut être un peu plus simple d’accès, il propose des positionnements en grille avancés. Vous pourrez trouver un tutoriel en français sur la ferme du web.

Bootstrap : un framework CSS très complet développé par Twitter. Vous trouverez un tutoriel très complet sur le site du zéro.

Si vous voulez une vue de l’ensemble des framework CSS, vous pouvez visiter ce lien qui vous donnera une liste quasi exhaustive de framework, et ce qu’ils proposent comme fonctionnalités.

7. Notions de responsive design

7.1. Ébauche de définition

Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau).

Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages.

Le terme de "Responsive Web design" a été introduit par Ethan Marcotte dans un article de A List Apart publié en mai 2010. Il décrira par la suite sa théorie et pratique du responsive dans son ouvrage "Responsive Web Design" publié en 2011. Celle-ci se limite à des adaptations côté client (grilles flexibles en pourcentages, images fluides et CSS3 Media Queries).

7.2. Site dédié, application ou responsive ?

Nous disposons actuellement de trois moyens pour véhiculer le contenu web sur des appareils connectés : un site dédié, une application native et une version responsive de site web.

Sachez que chaque solution a des avantages et des inconvénients : selon vos besoins et contraintes (notamment de budget et de délais), il pourra être parfaitement pertinent d'opter pour l'une ou l'autre.

Un site dédié

Un projet de site dédié consiste à concevoir deux ou plusieurs entités différentes selon le dispositif visé : un site principal, un site pour smartphones, un site pour tablettes, etc.

Généralement, un test initial côté serveur détecte le type d'appareil et renvoie vers une adresse web dédiée (m.monsite.com par exemple).

Les avantages des sites web dédiés sont :

  • La possibilité d'affiner précisément la structure du site et ses contenus en regard du périphérique utilisé
  • La possibilité de cibler et de s'adapter à des fonctionnalités variées (notamment le touch)
  • Peut être une alternative "rapide", en attendant une refonte complète (et responsive) de son site web

Mais un site dédié n'est pas exempt d'inconvénients :

  • Le contenu dupliqué ("duplicate content")
  • La maintenance de plusieurs versions de site et de plusieurs adresses web (moins facilement indexables par un moteur de recherche)
  • La détection côté serveur ("UA sniffing") souvent biaisée ou non à jour
Une application native

Une application native est un produit développé spécifiquement dans divers "langages" (iOS, Android, WindowsPhone) et qui se télécharge et se référence au sein d'un "Store" (AppStore, Google Play, Windows store).

Cela lui confère certains avantages :

  • La prise en charge facilitée de fonctionnalités natives (touch, accéléromètre, notifications, GPS, etc.)
  • Un installation possible sur son périphérique
  • Une totale "acclimatation" au périphérique (ergonomie, performances, densité de pixels)
  • La présence de sa marque sur l'AppStore (pour ne citer que lui) et de pouvoir disposer d'un "raccourci" sur le smartphone de l'utilisateur

… Mais aussi certains inconvénients :

  • Un développement spécifique dans plusieurs langages (propres à iOS, Android, WindowsPhone, etc.)
  • Le coût du développement, des licences, et de la maintenance pour chaque système d'exploitation
  • Un contenu non indexable par un moteur de recherche web classique
  • La mise à jour de l'application nécessite une action de l'utilisateur
Une version responsive

À l'heure où des centaines de tailles et formats d'écrans différents se connectent à chaque instant, la méthode du Responsive Web design apparaît comme la "solution de facilité" en vertu de son objectif principal : s'adapter à tout type d'appareil de manière transparente pour l'utilisateur

  • Des coûts et des délais généralement inférieurs aux techniques citées précédemment
  • Une maintenance de projet facilitée (une seule feuille de style, un seul fichier HTML, etc.)
  • Une mise à jour transparente et un déploiment multi-plateformes
  • Le Responsive peut être envisagé après la conception initiale du site (même si ce n'est pas l'idéal)

L'un des avantages indéniables depuis quelques temps est que Google met en avant les sites "adaptés au mobile" au sein de ses résultats de recherche :

Les inconvénients ne sont cependant pas nuls :

  • De bonnes connaissances techniques, et une veille technologique constante, sont indispensables
  • Il est nécessaire de prévoir des tests nombreux et variés tout au long du projet ("device labs", simulateurs)
  • Il est difficile de contourner les limites ergonomiques et de performances des navigateurs web
  • Faire du responsive, c'est… plus long que de ne rien faire (25% du temps supplémentaire)

Au final, le Responsive Web design n'est qu'un moyen parmi d'autres de parvenir à ses objectifs mais ne doit pas être considéré comme la seule éventualité ni comme une "solution magique" à tous les problèmes.

D'ailleurs, il est fréquent qu'un cumul de différentes méthodes soit employé : par exemple un site à la fois dédié et responsive, ou un site responsive garni de certaines détections côté serveur (on parle alors de RESS), etc.

Le site mediaqueri.es est une excellente ressource pour découvrir d'autres sites web responsive à travers un annuaire.

7.3. Responsive, Adaptatif ou Liquide ?

En France, et selon Wikipedia, le Responsive Web Design est un synonyme de "site web adaptatif". Techniquement, il conviendrait de distinguer les sites web Statiques, Liquides, Adaptatifs et Responsive :

Un design "Static"

Un design statique (ou fixe) se réfère à des dimensions figées (par exemple 960px) quelle que soit la surface de l'écran. La grande majorité des sites web était construite sur cette base avant l'arrivée du Responsive Web Design dans les années 2010.

Un design "Liquid"

Un site web Liquide (ou fluide) est un site web dont toutes les largeurs de colonnes sont exprimées en unités variables (pourcentages, em, vw, etc.) et qui s'adapte généralement automatiquement à la taille de fenêtre, jusqu'à une certaine mesure.

Démo design Liquide

Un design "Adaptive"

Un design Adaptatif est une amélioration du design statique : les unités de largeur sont fixes, mais différentes selon la taille de l'écran, qui est détectée via CSS3 Media Queries.

Un tel design tient uniquement compte des principaux points de rupture (320px, 480px, 768px, 1024px, etc.) et adapte le gabarit en conséquence. Au final, on se retrouve avec autant de gabarits fixes que de points de ruptures.

Démo design Adaptatif

Un design "Responsive"

Un site web Responsive est une amélioration du design liquide associé à des méthodes CSS3 Media Queries permettant de modifier les styles (ré-organisation de la page par exemple) selon certains critères, pour s'adapter complètement à la taille d'écran, quel que soit le point de rupture.

Démo design Responsive

En résumé

Le site liquidapsive.com propose de tester visuellement ces différents types de design.

7.4. et techniquement, le RWD ça implique quoi ?

Depuis sa première appellation en 2010, le Responsive Web design a quelque peu évolué. Il nécessite actuellement - en général - les technologies et méthodes suivantes :

  • Une grille fluide, où les largeurs des éléments de structure sont débarrassées des unités de pixels
  • Des images, des médias et des contenus flexibles
  • Une adaptation de l'affichage au Viewport du terminal
  • Des CSS3 Media Queries permettant d'appliquer différentes règles de styles CSS selon la taille, l'orientation ou le ratio du device
  • Éventuellement des adaptations conditionnelles (menu de navigation) côté client, basées sur JavaScript ou jQuery
  • Une philosophie "Mobile First" et "Enrichissement progressif" facilitant l'accessibilité, la compatibilité et la performance des pages produites
  • De plus en plus souvent de parties détectées et générées côté serveur (RESS), là aussi notamment pour accélérer l'affichage de certains composants ou ressources.

7.5. Le récapitulatif en une image ? 

responsive/adaptive/mobile dédié pour quelle utilisation ?

==> voir l'image en plus grand

7.6. Ressources

Article par sur http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html


8. Exemple d'adaptations aux mobiles et tablettes d'un site classique

Sur un site dont l'intégration HTML n'a pas été prévue pour s'adapter aux mobiles et smart phone, comme lors de la création d'un site directement responsive les procédures sont assez similaires :

  • Modification (unique) du code HTML pour ajouter la balise : <meta name="viewport" content="width=device-width, maximum-scale=1.0" />, cette balise permet aux navigateurs de ne pas appliquer par défaut le redimensionnement de la page en conservant son homotétie
  • Ajout de code CSS (à la fin du code CSS si c'est une adaptation de site existant, et plutôt en début du code CSS dans le cas d'un site codé avec l'approche mobile first)

8.1. Ajout du code CSS

Nous pouvons utiliser pour appliquer un code CSS différentes conditions :

  • des conditions de largeur d'écran disponibles en pixels
    • @media (max-width: 1000px) {/* ici votre code CSS */}
  • des formats d'affichage (paysage/portraits)

Même s'il existe toujours des adaptations, on peut s'aider de feuille de style type (code CSS proposé sur le site http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html) pour adapter un site pour mobile et tablettes comme celle-ci (il ne s'agit que d'un exemple mais les principes sont toujours similaires) :

@media (max-width: 1000px) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
    
    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes (remplacer    "element1,element2" par les éléments à cibler) */

    element1,
    element2 {
        float: none;
        width: auto;
    }
    
    /* masquer (éventuellement) les éléments superflus (nécessite d'ajouter cette class hide_mobile aux éléments HTML à cacher) */

    .hide_mobile {
        display: none !important;
    }
    
    /* Un message personnalisé apparaissant spécifiquement */

    body:before {
        content: "Version mobile du site";
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }
}

> Voici un exemple d'adaptation du site http://interco.aquitaine.fr/ : http://codepen.io/semantiqueweb/pen/JYZQRe

  • dans la colonne html on a repris le contenu HTML de la page http://interco.aquitaine.fr/
  • puis a été ajouté la balise <meta name="viewport" content="width=device-width, maximum-scale=1.0" /> dans la partie <head></head> de la page
  • Dans le code CSS ont été mis en place
    • le code de la feuille de style type présenté ci dessus avec le conditionnement d'affichage pour des écrans de moins de 1000px de large
    • le code suivant spécifiquement mis en place pour ce site web afin d'ajuster certains autres éléments :
@media only screen and (max-width: 1000px)  
{ 
	*{max-width:100%; height:auto!important; float:none} 
	#menudroite{display:none} 
	#navigation{background:#000 none!important; padding-bottom:10px} 
	.menusearch{display:none} 
} 

Il reste du travail à produire pour ajuster l'affichage sur mobile et tablette, mais les principes sont les mêmes :

  • suppression des largeurs/hauteurs fixes
  • suppression des flottements, des positions absolues
  • centrage des éléments
  • éventuellement affichage/masquage de certains éléments spécifiques
  • ajustement des tailles de police
+ travail sous différentes conditions d'affichage (moins de 768px, moins de 480px,...) ou de type d'affichage (landscape) 

8.2. Pour aller plus loin 

9. De la pratique...  

  • Ouvrez un compte sur Code Academy : https://www.codecademy.com/
  • Finissez le tutoriel : "HTML & CSS" les 9 chapitres : https://www.codecademy.com/fr/tracks/web
  • Ce travail est à réaliser avant le 30/10/2016
    • Le travail que vous aurez réaliser sur Code Academy en réalisant l'exhausitivité du tutoriel "HTML & CSS" pourra être pris en compte dans votre note globale (en accédant à chacun de vos comptes)