Les propriétés avancées
15 novembre 2013

Cette page traite encore des propriétés et des règles CSS qui s'y appliquent mais à un niveau de difficulté un peu plus grand et pour lesquelles j'ai donné quelques exemples. Voyez le tableau en position absolue près de ce résumé ainsi que le tableau en position fixe qui est collé dans le coin droit de votre écran (Internet Explorer me place cependant dans le coin inférieur gauche de l'écran).

Cette quatrième partie de ce tutoriel considère plus particulièrement des propriétés s'appliquant au boîtes (type block), aux tableaux, au positionnement. Il s'agît de propriétés dont j'ai trouvé la compréhension moins facile que pour les propriétés de pa Partie 3 de ce tutoriel.

Propriétés des boîtes

La notion de boîte (block) s'oppose à celle en-ligne (in-line). Par défaut, les éléments <div>, <p> sont des boîtes alors que les éléments <b>, <i> et <span> sont des éléments en-ligne. La distinction entre les deux est simple: les éléments de type block se placent toujours l'un en dessous de l'autre (comme un retour chariot) alors que les élément de type inline se placent sur une même ligne que le contenu adjacent (sans retour de chariot). Par ailleurs, un élément de type block occupe automatiquement toute la largeur disponible dans son conteneur, peut contenir des éléments de type block ou in-line, et peut être dimensionné à l'aide des propriétés telles que width, height, min-width, ou min-height,...

modèle de boîte
Illustration du modèle d'élément de type "block"

 

width, height, max-width, max-height

Les propriétés width et height désignent la largeur et la hauteur et pixels ou en pourcentage (%) alors que max-width et max-height empêchent width et height de devenir plus grandes que ces valeurs.

padding

La propriété padding désigne la marge interne laissée entre un élément et sa bordure. C'est une super-propriété qui combine les propriétés padding-left, padding-top, padding-right et padding-bottom. Elle s'exprime en terme de pixels, de pourcentage (%) ou d'unités de mesures (cm, pouces, ...). Cette marge interne prend la couleur d'arrière plan de l'élément. La valeur auto implique un règlage automatique par le fureteur.

margin

La propriété margin désigne la marge externe laissée entre la bordure d'un élément et ses voisins. C'est une super-propriété qui combine les propriétés margin-left, margin-top, margin-right et margin-bottom. Elle s'espriment en terme de pixels, de pourcentage (%) ou d'unités de mesures (cm, pouces, ...). La valeur auto implique un règlage automatique. Notons que la marge est toujours transparente et ne supporte aucune couleur de fond.

Elle peut prendre les valeurs suivantes [w3schools.com: margin]:

Valeurs de la propriété margin
Valeur Description
auto Le fureteur calcule lui-même la marge
length Spécifie la largeur de la marge en pixels.La valeur par défaut est 0px
% Spécifie une marge comme pourcentage de la largeur de l'élément conteneur
inherit Même valeur que celle de l'élément parent

border

La propriété border, introduite avec CSS-1, permet de personaliser les bordures qui apparaîssent autour des éléments HTML de type "block". Il s'agît d'une super-proptiété qui combine les propriétés border-width, border-color et border-style. Cette proptiété se décompose aussi en border-top, border-right, border-bottom, border-left.

border-width

La propriété border-width, introduite avec CSS-1, définit la largeur de la bordure. Elle peut prendre les valeurs suivantes [w3schools.com: border-width]:

Valeurs de la propriété border-width
Valeur Description
thin La bordure est mnce
medium Spécifie une bordure d'épaisseur moyenne. C'est la valeur par défaut
thick La bordure est épaisse
length Permet de définit l'épaisseur de la bordure
inherit Même valeur que celle de l'élément parent

border-color

La propriété border-color, introduite avec CSS-1, définit la couleur de la bordure. Elle peut prendre les valeurs suivantes [w3schools.com: border-color]:

Valeurs de la propriété border-color
Valeur Description
color Définit la couleur de la bordure.Voir Color dans la Partie 3 de cet article pour une liste complète des valeurs de couleur.
transparent La bordure sera transparence. C'est la valeur par défaut
inherit Même valeur que celle de l'élément parent

border-style

La propriété border-style, introduite avec CSS-1, définit le style de bordure entourant un élément de type block. Le tableau suivant illustre l'apparence des bordures selon le style. Pour les rendre correctement, j'ai donné 10 pixels en épaisseur et j'ai utilisé des marges à gauche et à droite de 50 pixels.

Elle peut prendre les valeurs suivantes [w3schools.com: border-style]:

Valeurs de la propriété border-style
Valeur Exemple Apparence
solid p.borderSolid

Exemple de bordure de type "solid"

double p.borderDouble

Exemple de bordure de type "double"

dotted p.borderDotted

Exemple de bordure de type "dotted"

dashed p.borderDashed

Exemple de bordure de type "dashed"

inset p.borderInset *

Exemple de bordure de type "inset"

outset p.borderOutset *

Exemple de bordure de type "outset"

ridge p.borderRidge *

Exemple de bordure de type "ridged"

hidden p.borderHidden

Exemple de bordure de type "hidden"

C'est la valeur par défaut

Exceptions   * Internet Explorer, Chrome et Safari rendent ces valeurs comme si c'était une bordure solide.

Ces styles de bordures sont rendus correctement dans Firefox 15.0.1 et Opera. Cependant, Internet Explorer 9, Chrome et Safari affichent les styles inset, outset et ridge comme si c'était solid.

border-radius

La propriété border-radius, introduite avec CSS-3, peut être utilisée pour arrondir les coins des bordures. Le rayon (exprimé en pixels) s'applique aussi à l'arrière-plan (background) même si l'élément n'a pas de bordure. C'est une propriété récente que tous les navigateurs modernes reconnaissent sans préfixe vendeur puisqu'elle est finalisée. En pratique pour les versions précédentes des navigateurs (par ex. Firefox 3.6 ou Chrome 9), la propriété devait être préfixée par -moz- sur Gecko ou -webkit- sur Webkit pour fonctionner sur ces fureteurs. border-radius devient donc -moz-border-radius, -webkit-border-radius.

Il s'agît d''une super-propriété qu combine border-radius-top, border-radius-left, border-radius-right et border-radius-bottom.

box-shadow

La propriété box-shadow, introduite avec CSS-3, était jusqu'à récemments une propriété expérimentale. Elle accepte un ou plusieurs effets d'ombre définis sous la forme d'une liste séparée par des virgules. Elle permet de projeter l'ombre de presque n'importe quel élément. Si une bordure arrondie est définie à l'aide de border-radius sur l'élément auquel s'applique l'ombre, l'ombre ainsi créée aura les mêmes bords arrondis. Le niveau sur l'axe z d'ombres multiples est le même que les ombres de texte multiples (la première ombre spécifiée est sur le dessus).

Elle peut prendre les valeurs suivantes [w3schools.com: box-shadow]:

Valeurs de la propriété box-shadow
Valeur Description
h-shadow

Requis. C'est la position de l'ombre horizontale. Les valeurs négatives sont acceptées

v-shadow Requis. C'est la position de l'ombre verticale. Les valeurs négatives sont acceptées
blur En option. Plus cette valeur est élevée, plus le flou sera important, rendant l'ombre plus étendue et plus légère. Les valeurs négatives ne sont pas acceptées. En l'absence de définition, la valeur est 0 (le bord de l'ombre est net).
spread En option. Les valeurs positives ont pour effet d'étendre l'ombre, tandis que les valeurs négatives ont pour effet de la réduire. En l'absence de définition, la valeur est 0 (l'ombre est de la même taille que l'élément).
color En option. En l'absence de définition, la couleur dépends du navigateur. Dans Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété color est utilisée. D'un autre côté, l'ombre générée par Webkit est transparente et donc inutile si <color> est omis.
inset En option. La présence du mot-clé inset change l'ombre en une ombre à l'intérieur du cadre

Voyer ici quelques exemples d'utilisation de cette propriété (avec le code):

Exemples d'utilisation de box-shadow

box-shadow: 10px 5px 5px black;

box-shadow: 3px 3px red, -1em 0 0.4em olive;

box-shadow: 60px -16px teal;

box-shadow: inset 0 0 2em gold;

Les usagers de Firefox, Safari/Chrome, Opera and IE9 devraient voir un ombrage gris sous cette boîte. La commande est "box-shadow: 10px 10px 5px #888;"

Propriétés des tableaux

La balise <table> est l'élément de base d'un tableau et il est interdit de les imbriquer les unes dans les autres. Comme un tableau est un élément de type block, il partage de nombreuses propriétés avec ces éléments: soit width, height, padding, margin et border. En plus, il y a les propriétés suivantes [w3schools.com: table]:

Propriétés des tableaux
Propriété Valeurs Description
border-collapse collapse, separate Fusion des bordures
empty-cells hide, show Affichage des cellules vides
caption-side bottom, top Position du titre du tableau

Propriétés de positionnement

Les propriétés de positionnement sont display, float, clear, position, top, bottom, left, right et z-index.

display

La propriété display, introduite avec CSS-1, est un puissant outil souvent mal connu et dont les possibilités réelles sont rarement utilisées. Il s'agît d'une des techniques les plus efficaces en positionnement CSS qui consiste à donner à un élément un mode de rendu différent de celui par défaut. C'est ce que fait cette propriété: elle permet d'indiquer explicitement le mode de rendu d'un élément HTML. Les valeurs les plus utilisées sont none, block et inline. La valeur none retire l'élément de type block de l'affichage courant. Son emplacement est ainsi occupé, selon les cas, par les blocs adjacents, comme si la boîte n'était pas là! Les valeurs block et in-line transforment la présentation de l'élément.

Cette propriété peut prendre nombre d'autres valeurs comme indiqué dans la table qui suit [w3schools.com: display et Display, vous connaissez ?]:

Valeurs de la propriété display
Valeur Description
none L'élément ne sera pas affiché
block L'élément est affiché comme un block (comme un paragraphe).
inline C'est la valeur par défaut. L'élément est affiché comme un élément in-line (comme span).
run-in  
compact  
marker Précise la qualité de marqueur du contenu généré apparaissant avant ou après une boîte.
inline-block * L'élément est placé comme un élément in-line (sur la même ligne que le contenu adjacent) mais se comporte comme un élément block.
inline-table * L'élément est affiché comme un tableau in-line
list-item L'élément est affiché comme un item de liste ce qui signifie qu'il sera précédé par un puce (bullet)
table * L'élément est affiché comme un tableau
table-caption * L'élément est affiché comme une légende d'un tableau
table-cell * L'élément est affiché comme une cellule d'un tableau
table-column * L'élément est affiché comme une colonne d'une tableau
table-column-group * L'élément est affiché comme un groupe de colonnes d'un tableau
table-footer-group * L'élément est affiché comme un pied-de-page d'un groupe de rangées d'un tableau
table-header-group * L'élément est affiché comme une entête de groupe de rangées d'un tableau
table-row * L'élément est affiché comme une rangée d'un tableau
table-row-group * L'élément est affiché comme un groupe de rangées d'un tableau (on ne le voit pas)
inherit * Même valeur que celle de l'élément parent
Remarques * ces valeurs ne sont pas supportées par IE-7 et IE-8

Le problème principal avec la propriété display vient de ce que cette propriété est appliquée inégalement dans les fureteurs qui ne sont pas entièrement à la hauteur de la norme. C'est le cas d'Internet Explorer qui exige l'utilisation d'un doctype particulier pour l'affichage des valeurs table-xxx. Pour juger de la conformité de cette propriété dans différents fureteurs, voir The display declaration.

float

Comprendre le comportement de la propriété float implique une compréhension globale du flux. Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block, sont affichés les uns au dessous des autres, occupent toute la largeur disponible et génèrent un retour à la ligne après leur affichage.

Valeurs de la propriété float
Valeur Description
left L'élément s'affiche gauche
right L'élément s'affiche gauche
none L'élément n'est pas affecté et il sera affiché là où il devait l'être dans le flux. C'est la valeur par défaut
inherit Même valeur que celle de l'élément parent

La propriété float, introduite avec CSS-2, permet de sortir un élément du flux, et de l'afficher à gauche ou à droite. Elle peut prendre les valeurs du tableau qui flotte à droite de ce paragraphe [w3schools.com: float].

Très souvent, la propriété float est utiliser dans le seul but de placer un élément à gauche ou à droite des autres éléments qui sont demeurés dans le flux. Ce seul objectif peut avoir des effts indésirables car le reste du flux sera souvent décalé à droite de l'élément flottant, et poursuivra en dessous selon sa longueur. Par défaut, l'élément standard suivant un élément flottant s'affichera dans l'espace laissé par la largeur du flottant.

Ce comportement inattendu du reste du flux se retrouve souvent sous la forme d'autres éléments flottants qui n'occupent pas la place voulue. C'est ici que la propriété clear entre en jeu.

clear

Valeurs de la propriété clear
Valeur Description
left Génère un élément bloc et le place en bas juste à droite de celui qui le précède dans le flux
right Génère un élément bloc et le place en bas juste à gauche de celui qui le précède dans le flux
both Génère un élément bloc qui va se déplacer sous chacune des boîtes flottantes qui précèdent dans le code source
none Rien n'est affecté par rapport aux éléments flottants et cette propriété n'influence pas le positionnement en cours. C'est la valeur par défaut
inherit Même valeur que celle de l'élément parent

La propriété clear est utilisée pour définir si un élément doit se trouver sur la même bande horizontale qu’un élément flottant. On peut donc écrire que cette propriété indique de quelle manière le texte va être placé par rapport à une boîte flottante précédente. Elle est applicable sur l'ensemble des balises HTML si ces dernières ne sont pas en position:absolute.Elle peut prendre les valeurs suivantes (le tableau utilise la règle {float: right;}:

Le paragraphe suivant aurait normalement été placé à la suite ce celui-ci si...

... je n'avais pas donné à ce paragraphe la classe clearright qui utilise la règle {clear: right;} et voyez ce que ça donne: il a été déplacé vers le bas en laissant un espace libre à gauche du tableau flottant [w3schools.com - clear].

position

En fonctionnement normal, les éléments se positionnent en fonction de leur ordre d'arrivée dans le fichier HTML (c'est le flux normal). Les premiers éléments rencontrés se placent en haut de la page et les suivants en dessous. Le dernier élément se retrouve donc en bas de la page. La propriété position permet de fixer l'emplacement d'un élément sur la page, indépendamment de sa position dans le fichier HTML : le premier élément peut se retrouver en bas de la page.

La propriété position, introduite avec CSS-2, fonctionne avec les propriétés top, right, bottom, left qui permettent de définir l'emplacement de l'élément.

 

Valeurs de la propriété position
Valeur Description
static Les éléments sont affichés dans l'ordre du flux normal du document. C'est la valeur par défaut
absolute L'élément est positionné relativement à l'élément ancètre positionné autrement que "static". C'est un outils très puissant qui permet de placer n'importe quel élément de la page exactement là où on le veut. Le valeurs de positionnement seront relatives au prochain parent en position relative ou absolue.
fixed L'élément est positionné relativement à la fenêtre du fureteur
relative L'élément est positionné relativement à sa position normale de sorte que "left:20px" ajoute 20 pixels à la position LEFT de l'élément.
inherit Même valeur que celle de l'élément parent.

Sur cette page, on a plusieurs exemples d'application de la propriété position. En haut de cette page, à 250 pixels du hautet 25 pixels de la gauche de la page, vous trouverez un tableau qui utilise la règle {position: absolute; top: 250px; left: 35px;}. Vous remarquerez aussi qu'il y a un autre tableau qui semble collé au bas inférieur droit de l'écran: ce tableau utilise la règle {position: fixed; top: 0px; right:0px;}. Enfin, immédiatement après cette phrase, il y a un autre tableau qui a été déplacé de 200 pixels vrs la gauche de sa position normale par la règle {position: relative; left:200px;}.

Exemple de position "absolute"
Je suis en position "absolute" (voir position) avec la règle CSS: {position: absolute; top: 190px; left: 30px;}
Exemple de position "relative"
Je suis en position "relative" (voir position) grâce à la règle CSS: {position: relative; left:200px;}. Je suis donc à 200 pixels à gauche de là où je serais normalement.
Exemple de position "fixed"
Je suis en position "fixed" (voir position) grâce à la règle CSS: {position: fixed; top: 0px; right:0px;}. Je suis donc collé au coin inférieur droit de l'écran.
Par exception, Internet Explorer me place à gauche, en bas de l'écran.

top, bottom, left, right

Les propriétés top, bottom, left et right définissent la position par rapport au haut, au bas, à la gauche et à la droite de la page. Ces propriétés sont exprimées en pixels ou en pourcentage (%).

z-index

La propriété z-index, introduit avec CSS-2, définit l'ordre d'affichage en cas de superposition. C'est une propriété qui paraît simple à première vue mais elle est plus complexe qu'il y paraît. Elle peut prendre les valeurs suivantes [w3Schools.com: z-index]:

Value Description
auto L'ordre d'affichage est lemême que celui de son parent. C'est la valeur par défaut.
number Définit l'ordre d'affichage d'un élément. La plus grande valeur est affichée au dessus des autres. Les valeurs négatives sont permises.
inherit Même valeur que celle de l'élément parent.

Si vous êtes familier avec la représentation des coordonnées en trois dimension, vous savez que l'axe des x représente l'horizontale, l'axe des y représente le vertical alors que l'axe des z représente la profondeur comme illustré ici:

Coordonnées de l'espace en trois dimensions
SAxrs tridimensionnels

On ne voit pas l'axe des z sur un écran car il n'a que deux dimensions. Cependant, on peut le représenter en perspective en plaçant certains éléments devant ou derrière d'autres: c'est le rôle du z-index.

Si on lui attribue une valeur positive, un élément dera situé en avant d'un autre ayant une valeur positive plus petite ou une valeur négative. Plus la valeur est négative, plus l'élément sera situé loin derrière.

Je ne vais pas m'étendre plus sur le sujet mais un traitement plus complet est disponible dans un article de Stepeh Brdley intitulé What You May Not Know About the Z-Index Property.

cursor

La propriété cursor, introduite avec CSS-2, détermine quel cursor sera affiché. Elle peut prendre les valeurs suivantes [w3Schools.com: cursor]:

Valeur Description Survolez une des cases suivantes
URL Consiste en une suite de curseurs personalisés séparés par des virgules. Note: Il faut toujours spécifier un curseur générique à la fin de la liste au cas où aucun des curseur définis ne peut être utilisé.
Opera 9.3 et Safari 3 ne supporte pas ces valeurs.
auto Le fureteur décide quel curseur utiliser. C'est la valeur par défaut.  
crosshair Affiche un curseur en forme de croix fine (crosshair).  
default Affiche le curseur par défaut.  
e-resize Affiche un curseur en forme de double petite flèche horizontale  
help Affiche un curseur en forme de flèche et "?"  
move Affiche un curseur en forme de quatre flèches en croix  
n-resize Affiche un curseur en forme de double petite flèche verticale.  
ne-resize Affiche un curseur en forme de double petite flèche en diagonale bas gauche vers haut droit.  
nw-resize Affiche un curseur en forme de double petite flèche en diagonale bas droit vers haut gauche.  
pointer Affiche un curseur en forme de main avec un doigt déplié.  
progress Affiche un curseur qui indique que le programme est occupé.  
s-resize Affiche un curseur en forme de double petite flèche verticale.  
se-resize Affiche un curseur en forme de double petite flèche en diagonale bas droit vers haut gauche  
sw-resize Affiche un curseur en forme de double petite flèche en diagonale bas gauche vers haut droit,  
text Affiche un curseur en forme de sorte de grand I.  
w-resize The cursor indicates that an edge of a box is to be moved left (west)  
wait Affiche un curseur indiquant que le programme est ocupé  
not-allowed Affiche un curseur en forme de rond barré  
inherit Même valeur que celle de l'élément parent  

 


Pour toute question ou commentaire
E-Mail
page modifiée le 25 février 2014 à 15:23:09. []