Documentation css

Documentation
CSS

Sommaire

Préambule

CSS est un langage en perpétuelle évolution, de nouvelles spécifications voient le jour tous les ans, ajoutant de nouvelles propriétés ou en faisant évoluer certaines déjà existantes.
Certaines propriétés récentes ne sont donc pas forcement supportés par d’ancienne version de navigateurs, ou avec une syntaxe prefixée et/ou différente.
Il est donc important de se référer à une documentation à jour, maintenu par une communauté, mais également de suivre l’évolution du langage et de ces bonnes pratiques en suivant quelques blogs spécialisés.

Documentations

Compatibitité navigateurs

Can I use

Articles, cours & tips

FR
- Alsacréations
- La cascade
EN
- Magic of CSS
- CSS-Tricks

Get Started et syntaxe CSS

Tous les élements HTML d’une page possèdent des styles par défaut qui sont défini par le navigateur. Vous pouvez à l’aide de CSS définir des styles personnalisés pouvant les surclasser.

Créer une feuille de style CSS

Il suffit de simplement créer un fichier avec une extension .css

Lié votre feuille de style à votre page HTML

Dans le <head> de votre page, ajoutez une balise <link> qui pointe vers votre fichier CSS :

<link rel="stylesheet" href="adresse/de-votre/fichier.css" />

Syntaxe

selecteur {
   propriété : valeur; /* déclaration */
}

/* Ceci est un commentaire, qui ne sera pas analysé par le navigateur */

selecteur, selecteur {
   propriété : valeur1;
   propriété : valeur1 valeur2 valeur3 valeur4;
   propriété : valeur1, valeur2, etc.
}

Vocabulaire CSS

pumpula.net/p/apps/css-vocabulary

Liens

www.alsacreations.com/article/lire/1230-quelles-regles-syntaxiques-en-css.html

Sélecteur de balises Type selector

Vous pouvez sélectionner directement une balise HTML. Toutes les balises du même type seront stylés.

/* Titres niveau 1 */
h1 {
   color : red;
}

/* Paragraphes */
p {
   color : blue;
}

/* Listes */
ul {
   color: green;
}

## Les fondamentaux

Les
fondamentaux

Parents, enfants, frères & héritage

<div class="content">
   <h1> Titre de mon article </h1>
   <p> <strong>Premier</strong> paragraphe de mon article </p>
   <p> Deuxième paragraphe de mon article </p>
</div>

Parents & enfants

div est l’élément parent de h1, les 2 p et stong
h1, p et strong sont enfants de div
le premier p est parent de strong
strong est enfant du 1er p et de div

Frères

Les balises se trouvant au même niveau (côte à côté) sont appelées frères.

le premier p est frère de h1
le 2e p est frère du 1er.

Héritage

Les enfants héritent de certains attributs de leur parents. Essentiellement les attributs typographiques. Ce qui permet de ne définir qu’une seule fois les caractéristiques typographiques d’un bloc en sachant que tous ces enfants auront ces mêmes caractéristiques.

div {
   color : red;
}

Les enfants h1, p et strong auront tous la couleur rouge.

Voilà pourquoi il est de bonne pratique de définir les caractéristiques typographiques globales d’un document (couleur, polices, interlignage, taille du texte courant) sur l’élement body ou html

Forcer l’héritage : `inherit`

inherit permet de récupérer la valeur calculé du même attribut de l’élément parent. Il est permis sur toutes les propriétés.

récupérer la couleur du texte : `currentcolor`

La cascade

Les feuilles de style peuvent avoir des sources différentes :

Une page web peut posséder une ou plusieurs feuilles de style écrites par son auteur (styles externes, styles internes, ou styles en-ligne).
L’internaute peut avoir créé une “feuille de style utilisateur”.
Tous les navigateurs fonctionnent avec une feuille de style par défaut : “user agent style sheet”.

Les feuilles de style peuvent donc avoir trois origines différentes : l’auteur (le webmaster par exemple), l’utilisateur (l’internaute) et l’agent utilisateur (le navigateur).

La cascade décrit la façon dont ces diverses feuilles de style sont assemblées pour générer une unique feuille de style “virtuelle” qui utilise toutes les règles (implicitement déclarées ou non) de toutes ces différentes sources. Les CSS “cascadent”, ou combinent toutes ces sources entre elles.

Lorsque plusieurs sélecteurs ciblent le même élément avec des propriétés identiques, c’est la propriété de sélecteur ayant le plus de poids qui va surclasser les autres.

Les règles de priorités

Auteur, utilisateur, navigateur ?
Styles auteur > styles utilisateur > styles par défaut du navigateur.

Par contre, si un utilisateur a utilisé le mot clef @ dans une propriété, elle aura le dessus sur vos styles auteur.

Au sein de nos règles auteur

Les fichiers externes et styles internes sont lues dans l’ordre de leur déclaration.
Les styles en-ligne sont lus en dernier et l’emportent sur les 2 autres
Styles en lignes > styles externes et internes (sauf en cas d’utilisation de !important)

Au sein de nos styles externes et internes.

Le poids des sélecteurs est calculé. Le poids le plus fort l’emporte
Si 2 règles ou + sont équivalentes (même poids), celle lue en dernier gagne.

Calcul du poids des sélecteurs

Le poinds des sélecteurs est la concaténation de 3 nombres (A, B, C) et se calcule de cette manière (en CSS3):

A: Nb d’id dans le sélecteur
B: Nb de classes, de pseudo-classes et d’attributs dans le sélecteur
C: Nb d’éléments dans le sélecteur

Le selecteur
.inner > ul > li > a#toto
a une valeur de
1,1,3

Le mot clef `important!`

le mot clef !important ajouté juste après la valeur d’une propriété (et avant le ; de fin de propriété) donnera un poids maximum (infini) par rapport à vos autres styles auteur.

color: red !important ;

Liens

Contexte de formatage block

Un block formatting context (contexte de formatage block), est un contexte spécifique où un élément de type block aura un comportement différent. En effet, pour les blocs qui rentrent dans ce contexte :

l’élément ne s’écoule pas autour des flottants précédents (et ne seront pas pris en compte par des éléments clear enfants).
Il ne laisse pas dépassé ses enfants flottants (il les prends en compte pour calculer sa hauteur)
La fusion des marges avec ses enfants n’a plus lieu (cf flux et fusion des marges)

Un bloc rentre dans ce contexte si :

c’est élément en float : left ou right.
c’est un élément en position: absolute ou fixed
c’est un élément en@ display@: inline-block ou table-cell ou table-caption
c’est un élément avec une valeur pour overflow différente de visible

## Les types de données

Les types
de données

<lenght> — unités de longueur

CSS accepte beaucoup d’unités de longueur différentes (cm, mm, pt, . Seront présentés ici les unités les plus couramment utilisés pour un affichage sur écran.

px — pixel: unité relative à la résolution de l’écran ou de viewport.

em: unité de mesure typographique relative à la <font-size> du selecteur. Sauf pour <font-size> lui même qui se réfère au <font-size du parent.

rem: unité de mesure typographique relative au <font-size> de l’élement html de la page

ex — hauteur d’x: Unité de mesure typographique relative à la hauteur d’x (l’oeil) de la font utilisée; Rarement utilisée (moi jamais)

% — pourcentage: Ce n’est pas une réellement une unité de mesure car la référence son unité change en fonction du contexte.; certaines propriétés n’acceptent pas % comme unité de longueur (border, box-shadow, …)
margin, padding: l’unité est relative à la largeur du bloc parent (même pour les top et bottom).
width: l’unité est relative à la largeur du bloc parent uniquement si le parent a une largeur exprimée (≠ auto). Sinon la valeur sera ignorée.; c’est un moyen pour créer des design fluides ou liquides.
height: l’unité est relative à la hauteur du bloc parent uniquement si le parent a une hauteur exprimée (≠ auto). Sinon la valeur sera ignorée.
font-size, line-height: En pourcentage, leur fonctionnement est identique à l’utilisation de em : 100% = 1em, 120% = 1.2em

Liens

www.w3.org/Style/Examples/007/units.fr.html
pourcentages : www.impressivewebs.com/vertical-percentages-css

<color> — codage des couleurs

Valeurs de couleur

#012345
#6789AB
#ABCDEF
currentcolor
inherit

keywords – <color>

La spec CSS4 définie 141 couleurs à l’aide de mots clés.

Un peu d’historique

“Tomato” versus “#FF6347”—the tragicomic history of CSS color names

## Typographie

Typographie

EM, l'unité de référence pour la typographie

L’EM est l’unité la plus utilisée (la référence) pour gérer vos tailles et espaces typographiques.

L’unité em est simplement la taille de la police de caractères <font-size> du selecteur, sauf pour <font-size> lui même, son unité se réfère au font-size calculé de son parent.
1em = la taille de police du selecteur (défini par vous ou hérité des préférences du navigateur).
1.5em = 1.5 x la taille de police

p {
   font-size: 1em;
   line-height: 1.5em;
}

Exemple

html {
   font-size : 100%;
   /* En mettant une taille de 100% à l'élement html, vous laissez l'utilisateur choisir la taille d'affichage qui lui convient (souvent 16px par défaut) */
}

h1 {
   font-size: 3em;  /* 3x plus grand que le texte standard, Si l'utilisateur a choisi 16px : 3x16 = 48px */
   line-height: 1.5em; /* Soit 1,5x la font-size du selecteur. Soit 1,5x48 = 72px */
}

p {
   font-size: 1em;  /* 1x la taille héritée, soit 100% ou 16px si c'est la valeur choisi par l'utilisateur. */
}

Liens

Attributs typographiques

Couleur du texte COLOR: color : red; color : #A1A1A1; color : hsl( 30, 50%, 40%); Les couleurs peuvent être exprimés par noms, valeurs Héxadécimales, en RGB ou HSL.

Famille de police FONT-FAMILY: Polices à utiliser par ordre de préférence pour l’affichage du texte); font-family : Arial, "Helvetica Neue", Helvetica, sans-serif;

Taille de la police FONT-SIZE: font-size : 1.5em;

Italic FONT-STYLE: font-style : normal | italic

Graisse FONT-WEIGHT: font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Espacement des lettres LETTER-SPACING: letter-spacing : normal | <length>; la taille peut être négative -0.5em

Hauteur de ligne LINE-HEIGHT: La taille est relative au <font-size> du selecteur et non pas celui de son parent ou ancêtre.; line-height : normal | <number> | <length>; line-height : 1.5 /* S'adapte au <font-size> de l'élement même si la valeur est héritée */; line-height : 1.5em

Alignement TEXT-ALIGN: text-align: | left | right | center | justify

Retrait de la première ligne TEXT-INDENT: text-indent : <length> | <percentage>

Majuscules, minuscules TEXT-TRANSFORM: text-transform : none | capitalize | uppercase | lowercase

font — propriété raccourci

La propriété font permet de déclarer en 1 seule ligne

Le style <font-style>
La graisse <font-width>
La taille <font-size>
L’interlignage <line-height>
La famille de polices <font-family>

Font: font : <font-style> <font-width> <font-size>/<line-height> <font-family>

Exemples: font : 1.5em arial, sans-serif; /* Minimum syndicale */; font : 100%/1.2 georgia, serif;; font : italic 2em serif;

Notes

Les valeurs <font-size> & <font-family> sont obligatoires.
La valeur <line-height> doit suivre l’attribut <font-size>, les 2 valeurs étant séparés par un /.
<font-style> et <font-width> sont optionnels et doivent être placés devant <font-size>.

CSS3 – Typographie

Liens

stateofwebtype.com

Vertical-align

Liens

christopheraue.net/2014/03/05/vertical-align

## Box model

Box Model

Description d'une boite / Display

En CSS, chaque élément sélectionnable peut être considérer comme une boite possédant divers caractéristiques, modifiables et paramétrables.

image box modèle

Liens

How well do you know CSS display? [en]

Arrière-plan / background — généralités

Toutes les boites peuvent avoir un arrière plan background.

Un background peut être défini à l’aide de plusieurs caractéristiques :

Une couleur
Une image ou plusieurs images
- La taille de l’image
- La position de l’image
- L’ancrage de l’image
- La répétition de l’image
Un dégradé de couleurs
- Radial ou linéaire

background color / image — propriétés

Color

Background Color: background-color: <color>

Image

Image <bg-image>: valeurs : none | url(adresse/de/image.png) | inherit; background-image : <bg-image>, <bg-image>, … ;

Taille <bg-size>: valeurs : cover, contain, <lenght>, auto, inherit
Définir la largeur: background-image : <lenght>; /* Une valeur = largeur de l’image, le hauteur sera auto
Définir la largeur et la hauteur: background-image : <lenght> <lenght>; (largeur) (hauteur) L’image peut être déformée.
définir pour plusieurs images: background-image : <bg-size>, <bg-size>, … ;

Répétition <bg-repeat>: valeurs : repeat, repeat-x, repeat-y, no-repeat, inherit; background-repeat : <bg-repeat>;
définir pour plusieurs images: background-image : <bg-repeat>, <bg-repeat>… ;

Position <bg-position>: valeurs : top, bottom, left, right, center, <length>; background-position : left top; /* valeurs par défaut */; background-position : <lenght>; /*1 valeurs = left */; background-position : <lenght> <lenght>; /* 2 valeurs = left top */; background-position : right <lenght> bottom <lenght>; /* mot clé + valeur = ajouter un décalage par rapport à la position du mot clé*/
définir pour plusieurs images: background-image : <bg-position>, <bg-position>… ;

Ancrage de la position <bg-attachment>: valeur fixed : l’image est fixé à l’écran et se positionne par rapport au viewport.; valeur scroll : (défaut) l’image est positionné par rapport à son bloc et scroll avec lui.; background-attachment : <bg-attachment>;

Origine du positionnement <bg-origine>: Cette propriété ne fonctionne qu’avec un background-attachment : scroll; Elle définie l’origine des repères pour le positionnement. Par défaut, l’origine d’une position top left est basé sur le padding top left de la boite.; valeurs : border-box, padding-box (défaut), content-box; background-position : <bg-origine>;; Cette propriété déplace uniquement les origines du positionnement, elle n’affecte pas l’étendue de la zone qu’occupera l’arrière plan (cf <bg-clip>)

Étendu de l’arrière plan <bg-clip>: Détermine si l’arrière plan s’entend de la bordure, de la marge intérieur (padding) ou uniquement sous la zone de contenu. Cette propriété ne modifie pas la position de l’arrière plan.; valeur border-box : la zone comprend border + padding + content.; valeur padding-box : (défaut) la zone comprend padding + content; valeur content-box : l’arrière plan s’étend uniquement sous la zone de contenu.; background-clip : <bg-clip>;

Dégradés — lineal & radial gradients

Liens

css-tricks.com/css3-gradients

Hauteur et Largeur

Les attributs width et height permettent de définir par défaut la taille du contenu d’une boite. Mais ce fonctionnement peut être modifié à l’aide de l’attribut box-sizing.

Largeur: width : <length> | auto | inherit

Hauteur: height : <length> | auto | inherit

Padding — Marges intérieures

L’attribut padding défini la marge intérieur d’une boite, l’espace entre la bordure et le contenu de la boite.

padding supérieur: padding-top : <length>

padding inférieur: padding-bottom : <length>

padding gauche: padding-left : <length>

padding droite: padding-right : <length>

Propriété raccourcie: padding : <length> /* Applique la même valeur aux 4 paddings */; padding : <length> <length> /* (top et bottom) (left et right) */; padding : <length> <length> <length> /* (top) (left et right) (bottom) */; padding : <length> <length> <length> <length> /* (top) (left) (bottom) (right) — sens horaire débutant en haut */

Notes

Un padding ne peut pas avoir une valeur négative.
Le padding n’a pas de couleur. Il a par défaut le même design que le contenu, défini par la propriété background

Bordures — caractéristiques

La bordure d’une boite peut avoir plusieurs caractéristiques :

Une taille border-width.
Un style border-style.
Une couleur border-color.
Des valeurs de rayon permettant d’arrondir les angles de la boite border-radius.

border-width — taille des bordures

Valeurs possibles pour la taille d’une bordure <br-width>: thin; medium (default); thick; <length> // sauf %; inherit

Taille bordure haut: border-top-width : <br-width>

Taille bordure bas: border-bottom-width : <br-width>

Taille bordure gauche: border-left-width : <br-width>

Taille bordure droite: border-right-width : <br-width>

Propritété raccourcie: border-width: <br-width> /* Applique la même valeur aux 4 bordures */; border-width: <br-width> <br-width> /* (top & bottom) (left & right) */; border-width: <br-width> <br-width> <br-width> /* (top) (left & right) (bottom) */; border-width: <br-width> <br-width> <br-width> <br-width> /*(top) (left) (bottom) (right) — sens horaire débutant en haut*/

Notes

La taille d’une bordure ne peut pas être exprimé en pourcentage %.

border-style — styles des bordures

Valeurs possibles pour les styles d’une bordure <br-style>: none (default); hidden; dotted; dashed; solid; double /* necessite une taille de 3px minimum pour être visible */; groove /* simule une bordure en relief */; ridge /* simule une bordure en relief */; inset /* simule une boute en relief */; outset /* simule une boute en relief */

Style bordure haut: border-top-style : <br-style>

Style bordure bas: border-bottom-style : <br-style>

Style bordure gauche: border-left-style : <br-style>

Style bordure droite: border-right-style : <br-style>

Propritété raccourcie: border-style: <br-style> * Applique la même valeur aux 4 bordures */; border-style: <br-style> <br-style> /* (top & bottom) (left & right) */; border-style: <br-style> <br-style> <br-style> /* (top) (left & right) (bottom) */; border-style: <br-style> <br-style> <br-style> <br-style> /*(top) (left) (bottom) (right) — sens horaire débutant en haut*/

border-color — couleurs des bordures

Valeurs possibles pour les couleurs d’une bordure <br-color>: la valeur par défaut est la couleur du texte; <color>; transparent; inherit

Couleur bordure haut: border-top-color : <br-color>

Couleur bordure bas: border-bottom-color : <br-color>

Couleur bordure gauche: border-left-color : <br-color>

Couleur bordure droite: border-right-color : <br-color>

Propritété raccourcie: border-color: <br-color> * Applique la même valeur aux 4 bordures */; border-color: <br-color> <br-color> /* (top & bottom) (left & right) */; border-color: <br-color> <br-color> <br-color> /* (top) (left & right) (bottom) */; border-color: <br-color> <br-color> <br-color> <br-color> /*(top) (left) (bottom) (right) — sens horaire débutant en haut*/

border — propriété raccourci

La propriété border permet de déclarer en 1 seule ligne la taille <br-width>, le style <br-style> et la couleur <br-color> qui sera appliqué à 1 ou aux 4 bordures.

Raccourci bordure haut: border-top : <br-width> <br-style> <br-color>

Raccourci bordure droite: border-right : <br-width> <br-style> <br-color>

Raccourci bordure bas: border-bottom : <br-width> <br-style> <br-color>

Raccourci bordure gauche: border-left : <br-width> <br-style> <br-color>

Raccourci pour 4 bordures: border : <br-width> <br-style> <br-color>

border-radius — boites arrondis

Valeurs possibles pour le/les rayons d’un angle <radius>: <lenght>

Il est possible pour chaque angle de définir l’arrondi à travers 1 ou 2 <length>

<radius> 1 seul rayon : arrondi type cercle.
<h-radius> <v-radius> : 2 rayons (rayon horizontal) (rayon vertical) : arrondi type elliptique.

En donnant une valeur différente au rayon horizontal et vertical, vous créez un arrondi de type elliptique.

Angle supérieur gauche: border-top-left-radius : <lenght>; border-top-left-radius : <h-radius> <v-radius> 2 valeurs pour définir un arrondi de type elliptique.

Angle supérieur droit: border-top-right-radius : <lenght>; border-top-right-radius : <h-radius> <v-radius>

Angle inférieur droit: border-bottom-right-radius : <lenght>; border-bottom-right-radius : <h-radius> <v-radius>

Angle inférieur gauche: border-bottom-left-radius : <lenght>; border-bottom-left-radius : <h-radius> <v-radius>

Propritété raccourcie

Arrondi cercle: border-radius : <radius> /* le même arrondi aux 4 coins */; border-radius : <radius> <radius> /* (top-left & bottom-right) (top-right & bottom-left); border-radius : <radius> <radius> <radius> /* (top-left) (top-right & bottom-left) (bottom-right); border-radius : <radius> <radius> <radius> <radius> /* (top-left) (top-right) (bottom-left) (bottom-right)

Arrondis elliptiques: border-radius : <h-radius> / <v-radius> /* le même arrondi elliptique aux 4 coins */; border-radius : <h-radius> <h-radius> / <v-radius> <v-radius> /* (top-left & bottom-right h-radius) (top-right & bottom-left h-radius) / (top-left & bottom-right v-radius) (top-right & bottom-left v-radius); border-radius : <h-radius> <h-radius> <h-radius> / <v-radius> <v-radius> <v-radius> /* (top-left h-radius) (top-right & bottom-left h-radius) (bottom-right h-radius) / (top-left v-radius) (top-right & bottom-left v-radius) (bottom-right v-radius); border-radius : <h-radius> <h-radius> <h-radius> <h-radius> / <v-radius> <v-radius> <v-radius> <v-radius> (top-left h-radius) (top-right h-radius) (bottom-right h-radius) (bottom-left h-radius) / (top-left v-radius) (top-right v-radius) (bottom-right v-radius) (bottom-left v-radius)

Liens

vincent-valentin.name/articles/arrondir-les-angles

box-sizing — modifier le mode de calcul du modèle de boite

Notes

Firefox a un bug dans le calcul de min-height et max-height en box-sizing:border-box.

Margin — marges extérieures

L’attribut margin défini la marge extérieur d’une boite, elle permet d’espacer visuellement les boites les unes des autres.
Les valeurs des marges peuvent être négatives.
À savoir : les marges peuvent subirent des fusion entre elles.

Valeurs possibles: <lenght>; auto

marge supérieur: margin-top : <length>

marge inférieur: margin-bottom : <length>

marge gauche: margin-left : <length>

marge droite: margin-right : <length>

Propriété raccourcie: margin : <length> /* Applique la même valeur aux 4 marges */; margin : <length> <length> /* (top et bottom) (left et right) */; margin : <length> <length> <length> /* (top) (left et right) (bottom) */; margin : <length> <length> <length> <length> /* (top) (left) (bottom) (right) — sens horaire débutant en haut */

Tips

Centrer le contenu d’un block horizontalement :

selector {
   width: <lenght>
   margin-left: auto;
   margin-right: auto; 
}

selector {
  width: 960px
  margin: 0 auto;
}

## Layout

Layout

Display Block VS Inline et flux de la page

Le flux “normal” est le positionnement, par le navigateur, des boites dans la page au fur et à mesure des balises HTML rencontrées.

Boites de type block

Par défaut, les balises HTML div, header, section, h1, h2 … p, ul, etc. sont des balises ayant la propriété display:block;.
Elles occupent toute la largeur du contenu de l’élément parent.
Elles se placent les uns au dessous des autres.
elles sont sujet à la fusion des marges verticales¹.

Fusion des marges verticales¹

Lorsque 2 marges verticales (margin-top et margin-bottom) se rencontrent, seule la plus haute des 2 va être conservée.
Cette fusion concerne :
- Les marges de 2 boites frères ou voisines (boites qui se suivent).
- Boites imbriqués : Les marges des boites Parent avec celles de ces enfants (avec la marge supérieur du premier enfant, et la marge inférieur du dernier enfant.
- Les marges des boites avec celles des enfants des ces voisines (OULÀ !!).
interrompre/empêcher la fusion
- L’intercaler un élément entre 2 marges (un border ou padding par ex).
- Appliquer certaines propriétés CSS comme overflow ou float² .

Boites de type inline

Par défaut, les balises HTML span, em, strong, a, etc. sont des balises ayant la propriété diplay:inline;.
Ils se positionnent les uns à côté des autres, séparés par un espace mot si un, des espaces, ou un retour chariot les séparent dans le code HTML, tout comme les mots d’un paragraphe.
La taille des boites dépend de son contenu. Il n’est pas possible de lui appliquer un taille définie.

¹ www.alsacreations.com/article/lire/629-fusion-des-marges.html

² Voir contexte de formatage block www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html

position — être ou ne pas être… dans le flux

La propriété position permet d’extraire ou de modifier la position d’un élement du flux.

Valeurs possibles pour position: static // défaut; relative; absolute; fixed

Elle fonctionne de paire avec les propriétés de positionnement top, bottom, left & right et la propriété z-index qui défini l’ordre des éléments superposés.

Valeurs possibles pour top, bottom, left, right: auto défaut; <length>; inherit

Valeurs pour z-index: auto; <nombre>

Static

C’est la valeur par défaut, cela signifie que l’élément est calé dans le flux de la page. En position : static, les propriétés de positionnement ne s’appliquent pas.

Relative

Cette valeur permet de décaler la position d’un élément par rapport à celle qu’il occupe dans le flux. L’espace qu’il occupait dans le flux ne se libère pas et reste occupé, cela permet aux éléments voisins de ne pas être influencés par le décalage.

selector {
   position : relative;
   top: 3px;
}

Fixed

Cette valeur permet d’extraire un élément du flux — l’espace qu’il devrait occuper n’existe plus — et de le positionner par rapport à un parent un containing block ou à défaut la fenêtre du navigateur (viewport). Il sera fixé à la fenêtre et ne sera plus influencé par le défilement.

selector {
   position : fixed;
   top: 0;
}

Notes

La largeur d’un élément block sera basé sur la largeur de la fenêtre (et non plus de l’élément parent).
Les propriétés de positionnement en auto (ou non renseigné) correspondent au positionnement de l’élément qu’il aurait dans le flux.

Absolute

Cette valeur permet d’extraire un élément du flux — l’espace qu’il devrait occuper n’existe plus — et de le positionner par rapport à son parent positionné (autre que static) ou en containing block ou à défaut la page (viewport).

Notes

Pour positionner un ancêtre qui doit rester dans le flux, il suffit d’utiliser position : relative sans lui appliqué de propiété de positionnement.
La largeur d’un élément block positionné en absolute étant extrait du flux, n’occupera plus par défaut (width: auto) toute la largeur de son parent mais s’adaptera à son contenu, elle reste néanmoins relative à celle-ci.

Containing bloc

Un containing block est créé dans ces cas là:

1 élément avec une propriété transform différente de none
1 qui défini la perspective d’une vue 3D (ex: perspective: 200px)

Un élément avec width: 50% ne mesure donc pas toujours 50% de la taille de son parent. Par contre, il mesurera toujours 50% de la taille de son containing block.

Z-index et empilement CSS

Dans le cas d’une superposition de plusieurs éléments, suite à une manipulation de blocs à l’aide de la propriété position ou d’un jeu de marges négatives, Dans quel ordre se super-positionneront les blocs ?

Ordre d’affichage au sein d’un contexte d’empilement

les bordures et background de l’élément racine du contexte d’empilement ;
les éléments positionnés avec un z-index < 0 ;
les éléments block non-positionnés, dans l’ordre du flux ;
les flottants ;
les éléments inline non-positionnés ;
les éléments positionnés avec un z-index: auto ou z-index: 0 ;
les éléments positionnés avec un z-index > 0

Contexte d’empilement ?

Par défaut, votre page n’a qu’un contexte d’empilement, initié par html , les éléments vont donc suivre l’ordre d’empilement ci-dessus.
Mais de nouveaux contextes d’empilement seront définis à partir des blocs qui ont :

un z-index ≠ 0 ou auto ;
une opacité > 1 ;
une propriété transform ≠ none ;
un transform-style: preserve-3d ;
un filter ≠ none ;
un clip-path ou mask ;

L’empilement de ces enfants seront donc contraints à ce nouveau contexte.

Z-index

La propriété z-index n’est prise en compte que sur un élément positionné (relative @absolute@ ou fixed). Elle sera sinon ignorée.

Liens

The Z-Index CSS Property: A Comprehensive Look

Float — Faire flotter une boite

La propriété float permet de faire _flotter _ une boite à droite ou à gauche dans son conteneur.
Une boite flottante quitte le flux normal, sa hauteur n’influence plus la hauteur de son parent (peut être rétabli à l’aide de clear) . Le contenu des boites suivantes va s’écouler autour du/des flottants précédents.
Cette propriété fonctionne de paire avec la propriété clear qui permet d’annuler l’influence des flottants précédent la cible et de la positionner sous ceux-ci.

Valeurs possibles pour float: left; right; none; inherit

Valeurs possibles pour clear: left // La boite ne sera pas influencé par les flottants à gauche précédents; right // La boite ne sera pas influencé par les flottants à droite précédents; both // La boite ne sera pas influencé par les flottants précédents (doite et gauche); none; inherit

selecteur {
   float: left;
}

selecteur {
   clear: left;
}

Notes

l’attribut float va implicitement faire basculer la boite ciblé en display:block
float est la première propriété à avoir été exploité pour construire des grilles de mise en page

Tips

Ne pas s’écouler autour d’un flottant

En basculant une boite dans le context de formatage block¹ (utiliser overflow, float), elle se placera toujours à côté d’un flottant mais ne s’écoulera plus autour de celle-ci.

Clearfix

…

¹ www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html

table Layout

display : table

Un élément html table possède certaines caractéristiques qui lui sont propres et qui peuvent être appliqué à n’importe quelle balise grâce à la propriété display : table

Certaines propriétés sont spécifiques à ce contexte :

border-collapse bordures séparées ?: Permet d’ajouter un espace entre les bords des cellules et avec le bord du tableau.; Valeurs : separate (default), collapse; border-collapse: collapse;

border-spacing Taille espace entre les bordures: N’est pris en compte uniquement si border-collapse: separate;; Valeur simple : <lenght>; Valeurs multiples : <lenght> <length> // horizontal vertical; peut prendre toutes les unité de longueur sauf %; border-spacing : 1.5em 1em;

caption-side Position de la légende: Positionne l’élément <caption> ou en display: table-caption au dessus ou au dessous du tableau.; valeurs : top (default), bottom.

Flexbox — Le layout CSS3 !

Flexbox est une nouvelles séries de propriétés adapté à la construction de layout (flex layout).
La propriété principale est display: flex qui va influencer/altérer le rendu (hauteur, largeur, ordre) de ces éléments enfants (items) pour les contraindre à occuper son espace.
Le flux par défaut de la page n’est plus pris en compte.

Propriétés sur l’élément parent

Start flex layout display : flex;: Initie le flex layout sur ce conteneur

Direction <flex-direction>: Définie le sens (horizontale, verticale, sens inverse) dans lequel les items doivent s’afficher.; Valeurs : row (défaut), row-reverse, column, column-reverse; flex-direction : column-reverse

Sur 1 ligne ? <flex-wrap>: Définie si tous les items doivent être contraints sur une seule ligne (ou 1 seule colonne, cf <flex-direction>).; Définie donc si le flex layout influence sur la taille des items ou non.; Valeurs :; nowrap défaut. Les items sont contenus sur 1 seule ligne/colonne.; wrap La taille définie des items est conservé et ils se positionnent sur plusieurs lignes si besoin.; wrap-reverse Idem à wrap, mais inverse (haut/bas, droite/gauche) l’ordre d’affichage des items; inherit; Exemple :; flex-wrap : wrap

Alignement axe principale <justify-content>: Répartie l’espace “vide” disponible de l’axe principale.; si flex-direction : row>, axe principale = axe horizontale.; si flex-direction : column>, axe principale = axe verticale.; Peut-être comparé à la proriété text-align pour les éléments inline; Valeurs : flex-start (défaut), flex-end, center, space-between, space-around; justify-content : space-between;

Alignement axe secondaire OU items même ligne <align-items>: Permet de gérer l’alignement des items de tailles différentes les un par rapports aux autres sur l’axe secondaire.; Avec flex-wrap: nowrap, align-items gère l’alignement des éléments par rapport à l’élément parent, si sa hauteur est fixé, sinon entre eux.; Avec flex-wrap: wrap, les elements vont s’aligner les un par rapport aux autres.; Peut être comparé à la propriété vertical-align pour les éléments inline; Valeurs : stretch (défaut), flex-start, flex-end, center, baseline.

Alignement axe secondaire en multi-lignes <align-content>: Répartie l’espace “vide” disponible de l’axe secondaire, dans une configuration multi-lignes.; Valeurs : stretch (défaut), flex-start, flex-end, center, space-between, space-around.

Propriété sur les items

<order>: Permet de modifier l’ordre d’affichage des éléments

width de référence ? <flex-basis>: Cette propriété indique une taille de référence de l’item, avant que l’espace restant ne soit réparti.; Donc au-delà de laquelle l’item à la droit d’aller de manière automatique grâce à flex-grow ou en-dessous grâce à flex-shrink.; *Value : auto (defaut), <width>, inherit; flex-basis : 25%

S’agrandir ? <flex-grow>: Autorise l’item de combler l’espace restant (grow = croitre) sur l’axe principale.; Donc d’avoir une taille supérieure à flex-basis; La répartition de l’espace restant peut se gérer avec un rapport de proportion entre les différentes valeurs de cette propriété.; Valeurs : <number>, 0 (défaut), pas de nb négatifs.

Se réduire ? <flex-shrink>: Autorise l’item à être plus petit que sa valeur de flex-basis; La réduction de la taille des items peut se faire avec un rapport de proportion.; Valeurs : <number>, 0 (défaut), pas de nb négatifs.

Alignements individuels align-self: aligne individuellement les éléments les uns par rapport aux autres; Valeurs: auto (défaut), flex-start, flex-end, center, baseline, stretch.; align-self: flex-end

Liens

::before, ::after

::before
:: after

Ajouter des boites et du contenu qui n’existe pas dans le code…

Compteurs

Liens

codersblock.com/blog/fun-times-with-css-counters

## Transformations 3D

Transformations 3D

Initier les paramètres de la perspective

perspective: Donne la focal de votre perpesctive : plus la valeur sera petite, plus son sera proche de l’objet et la perspective accentuée; L’attribut perspective peut s’apliqué à 1 seul élément qui sera en même temps transformé à travers l’attribut transform; transform: perspective(600px) rotateY(60deg);; L’attribut peut s’utiliser de manière autonome sur un élément qui transmettra alors ces paramètres aux élément enfants:; perspective: 500px;

perspective-origin

Liens

Intro to CSS 3D transforms by Dave DeSandro

## Transitions & Animations

Transitions
&
Animations

Propriétés pouvant être animés

Liens

Transition

La propriété transition permet simplement d’animer un élément d’une valeur de départ à une valeur d’arrivée d’une propriété lorsqu’un événement est déclenché ou class ajouté à la volée via javascript.

Propriétés individuels

Propriété à animer <transition-property>: Valeurs simple : all (default), none @propriété@; transition-property : color;; Valeurs multiples : propriété, propriété, …; transition-property : color, border-color;

Durée de la transition <transition-duration>: Valeurs : 0 (default), <durée> ms, <durée> s; transition-duration: 500ms; Valeurs multiples (si possède plusieurs valeurs : <durée>, <durée>; transition-duration: 500ms, 1s

Fonction d’interpolation <transition-timing-function>: Valeurs: ease (default), mot-clef, cubic-bezier(0.1, 0.7, 1.0, 0.1), steps(4, end); Valeurs multiples : idem

Délai de déclenchement <transition-delay>: Permet de différer le lancement de l’animation; Valeurs : 0 (default), <durée> (idem <transition-duration>); La valeur de durée peut être négative.

Propriété raccourcie `<transtion>`

<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
transition : <transition-duration>; = transition : all <transition-duration> ease 0;
transition : <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;

Enchaîner des transitions

Il est possible d’effectuer des transitions sur des propriétés différentes. Et en jouant sur les <transition-duration> et <transition-delay> de les enchainer. Il suffit de séparer les différentes <transition> par une vigule

transition: <transition>, <transition>, [etc]

Accélération graphique

Conseils pour de meilleurs performances: Faire des transitions sur transform plutôt que top, left, etc;; ajouter une propriété 3D sans effet permet d’accélérer les animations de cet objet transform: translateZ(0);

voir www.alsacreations.com/astuce/lire/1565-acceleration-materielle-au-service-de-vos-animations-css.html

Transition & Javascript

Événement `transitionend`

transitionend permet de déclencher une fonction quand un transition est terminé.
ATTENTION, événement asynchrone. Et si la transition est interrompue ou qu’elle n’existe pas, la fonction se sera pas exécutée.

DomSelector.addEventListener(transitionend, function(), false);

Animations

Liens

The ultimate guide to Web animation

<timing-function> et courbe de Bézier

Liens

Générer vos courbes de Bézier

Formulaires & CSS — ^outch!

Button et input[type=submit].: Ils n’héritent pas des propriétés de font, Ils utilisent une font system par défault/; Ils ont des propriétés padding et line-height imposés par le navigateurs.

Textarea: Ils n’héritent pas des propriétés de font, Ils utilisent une font system par défault/

## État de l'art — CSS guidelines

État de l’art — CSS guidelines

Guideline = lignes directrices

Conseils, bonnes pratiques et méthodologies pour une rédaction maintenable et évolutive de votre code CSS

Liens

Organiser son code CSS

Priorité à l’utilisation de feuilles de style externes.
Bannir au maximum les styles inline.
Suivre la logique de la cascade en organisant son code du plus général au plus spécifique.

Liens

openweb.eu.org/articles/les-principes-de-base-en-css

class first

Essayez au maximum de sélectionner un élément HTML à travers une class.

N’utilisez les selecteur complèxe uniquement lorsque le maintient du code se retrouve facilité.
Évitez les sélecteurs enfants ou descendant et/ou basés sur un Id parent, le poids du sélecteur (voir principe de la cascade) sera trop important et posera des problème de maintenance du code.

Nommage des Class.

Le W3C impose une grammaire pour le nommage des sélecteurs. Certains caractères ne sont pas autorisés :

Les sélecteurs CSS (ids & classes) ne peuvent contenir que des caractères
[a-z A-Z 0-9], les carctères ISO 10646 (u+00A1 et supérieur), ainsi que le trait d’union – et l’underscore _ ; ils ne peuvent pas commencer par un chiffre ou un tiret suivi d’un chiffre.

Depuis CSS3, il est possible d’utiliser plus de caractères et même des émoticones à condition de les échapper avec un antislash ou à l’aide de la notation unicode.

www.ipgirl.com/461/quels-caracteres-sont-valides-dans-les-noms-selecteurs-de-classe-css.html

DRY, OOCSS & SRT

Le but du concept OOCSS & SRT est d’encourager la réutilisation du code et, pour aboutir à des feuilles de style plus rapides, plus efficaces, plus faciles à ajouter et à maintenir.
Pour cela il est recommander de définir les caractéristiques communes à différents blocs et de créer un style par caractéristiques, de manière à appeler ce style dans votre code HTML, plutôt que de dupliquer les styles au sein de vos CSS.

DRY (Don’t Repeat Yourself)

DRY est un des principes de base en informatique. Les deux principaux outils qui permettent d’éviter de se répéter en informatique sont les variables et les fonctions.
La question se pose alors : comment penser DRY avec un langage qui n’a à la base ni variables ni fonctions ?

Principes de OOCSS

Séparer la structure des éléments visuels: Créer des modules réutilisables, basé sur les .class, pour définir les aspects visuels de vos pages.
Séparer le contenu des conteneurs: globaliser les styles en ne limitant pas leur action à l’aide d’un sélecteur descendant ~~[#footer h3]~~ :( et permettre qu’ils soient réutilisable en dehors d’un contexte structurel.

Principes de SRT

Concept très proche de OOCSS puisque basé sur les mêmes principes de programmation orientée objet : structurer son code de manière à n’avoir qu’un seul élément qui défini une seule caractéristique.

Prioriser l’utilisation de .class sur celui des ID, qui ne sont pas réutilisables.
Éviter l’utilisation de sélecteur descendant ou complexe, pour de pas surenchérir sur la cascade et rendre des objets inefficaces.

Liens

L’approche DRY : don’t repeat yourself

BEM — Block, Element, Modifier

BEM est une méthode pour nommer et classifier vos sélecteurs CSS de façon à les rendre beaucoup plus strict, transparent et informatif.

Identifier et nommer les différents blocs composant votre page
Identifier et nommer les éléments qui composent ce bloc
Identifier et nommer les variantes ou agents modificateurs d’un élément.

Bloc: Zone qui a son propre rôle sémantique dans votre gabarit (header, footer, liste d’articles, formulaire de recherche, zone de connexion, …).; Il doit avoir un nom unique et servira de préfixe vos éléments : Bloc__element.
Élément: un élément est une partie d’un bloc qui a une fonction spécifique (titre, corps de texte, image, metas, …)
Modificateur: Un modificateur est une particularité, un état ou une version différente que peut avoir un élément ou un bloc.; Il différenciera l’élément ou le bloc à l’aide d’un suffixe : element--modificateur, bloc--modificateur

.personne{}
.personne--femme{}
    .personne__main{}
    .personne__main--gauche{}
    .personne__main--droite{}

Liens

Style Guide — documenter un projet

liens

visibilité / opacité

L’enfant d’une boite masquée avec visibility:hidden peut rester visible avec visibility: visible

Documentation css

Documentation CSS

Sommaire

Préambule

Documentations

Compatibitité navigateurs

Articles, cours & tips

Get Started et syntaxe CSS

Créer une feuille de style CSS

Lié votre feuille de style à votre page HTML

Syntaxe

Vocabulaire CSS

Liens

Sélecteur de balises Type selector

## Les fondamentaux

Les fondamentaux

Parents, enfants, frères & héritage

Parents & enfants

Frères

Héritage

Forcer l’héritage : inherit

récupérer la couleur du texte : currentcolor

La cascade

Les règles de priorités

Calcul du poids des sélecteurs

Le mot clef important!

Liens

Contexte de formatage block

## Les types de données

Les types de données

<lenght> — unités de longueur

Liens

<color> — codage des couleurs

Valeurs de couleur

keywords – <color>

Un peu d’historique

## Typographie

Typographie

EM, l'unité de référence pour la typographie

Exemple

Liens

Attributs typographiques

font — propriété raccourci

Notes

CSS3 – Typographie

Liens

Vertical-align

Liens

## Box model

Box Model

Description d'une boite / Display

Liens

Arrière-plan / background — généralités

background color / image — propriétés

Color

Image

Dégradés — lineal & radial gradients

Liens

Hauteur et Largeur

Padding — Marges intérieures

Notes

Bordures — caractéristiques

border-width — taille des bordures

Notes

border-style — styles des bordures

border-color — couleurs des bordures

border — propriété raccourci

border-radius — boites arrondis

Propritété raccourcie

Liens

box-sizing — modifier le mode de calcul du modèle de boite

Notes

Margin — marges extérieures

Tips

## Layout

Layout

Display Block VS Inline et flux de la page

Boites de type block

Fusion des marges verticales1

Boites de type inline

Documentation
CSS

Les
fondamentaux

Forcer l’héritage : `inherit`

récupérer la couleur du texte : `currentcolor`

Le mot clef `important!`

Les types
de données

Fusion des marges verticales¹

::before
:: after

Transitions
&
Animations

Propriété raccourcie `<transtion>`

Événement `transitionend`

Formulaires & CSS — ^outch!