CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à...

Formation CSS

2

Définition

CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML.

Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).

3

Plan de la présentation

Histoire et enjeux du CSS Principes techniques

Les concepts fondamentaux Points techniques divers Ciblage du dispositif de visualisation

Point sur les sélecteurs Critiques et avenir du standard LessCSS

Histoire et enjeux du CSS 4

Histoire et enjeux du CSSLes origines des CSS sont liées à trois alternatives majeures 

Histoire et enjeux du CSS 5

Questions clés

HTML Un format de structuration uniquement ? Un format mixte (mise en forme et

structuration) ? Choix de présentation

L'auteur doit avoir le dernier mot ? L’utilisateur doit avoir le dernier mot ?

La réponse aux besoins est-elle un format de description de la mise en forme ? un langage de transformation ?

Histoire et enjeux du CSS 6

L’histoire du standard

1992 : premier navigateur Web 1995 : Netscape Navigator,

esquisses CSS 1996 : début de CSS1, promu par IE3 2000 : IE5 Mac supporte CSS1 (à

99%) 2001 : sortie d’IE6, leader sur le

marché 2001 : CSS 2.1, début CSS3 2006 : reprise du dev IE avec IE7 2010 : CSS3 à l’état de brouillon

(draft)

Histoire et enjeux du CSS 7

Les enjeux

Séparer structure et présentation Séparer les deux notions dans des

fichiers différents Conception indépendante de la

présentation Uniformiser la présentation, accélérer

refonte Permettre de laisser le choix du thème Réduit la taille et la complexité du code

HTML

Histoire et enjeux du CSS 8

Les enjeux

Décliner les styles selon le récepteur

Permettre la cascade des styles Par origine du style : agent utilisateur,

auteur, utilisateur Par média Selon l’architecture : fichier commun +

spécifique Selon l’architecture du CSS lui même

Principes techniques et Syntaxe du CSS 9

CSS, concrètementPrincipes techniques et Syntaxe du CSS

Principes techniques et Syntaxe du CSS 10

Les concepts fondamentaux

Sélecteurs et bloc de règles Propriétés regroupées par bloc précédé

d’un sélecteur Propriétés et Valeurs

Compromis simplicité lecture / écriture Boites et Flux CSS

Structure de formatage = arbre logique Flux de boite = ordre linéaire

Principes techniques et Syntaxe du CSS 11

Propriété display

Display : none Disparait du flux À opposer à « visibility: hidden » Ex :

Principes techniques et Syntaxe du CSS 12

Propriété display

Display : block Rendu l’un en dessous de l’autre S’adapte à la largeur maximum

Principes techniques et Syntaxe du CSS 13

Propriété display

Display : block Margin (Outline) Border, Padding, Width

Principes techniques et Syntaxe du CSS 14

Propriété display

Display : inline Rendu l’un à côté de l’autre S’adapte à la largeur minimum

Principes techniques et Syntaxe du CSS 15

Propriété display

Display : inline-block Rendu type inline Possède les propriétés des blocks

Principes techniques et Syntaxe du CSS 16

Propriété display

Display : table Rendu type balises <table><tr><td> Copier le rendu d’un tableau sans

l’utiliser

Principes techniques et Syntaxe du CSS 17

Blocs flottants

Principe issu du média print Le contenu non flottant qui suit

initie l’habillage

Sort du flux (cf absolute)

Utilisation de « clear » pour passer des lignes

Principes techniques et Syntaxe du CSS 18

Positionnement

Static Valeur par défaut Element dans le flux

Relative Similaire à static Peut être déplacé (décalé visuellement)

Absolute Hors flux Référence : premier parent non-static (sinon: html)

Fixed Similaire à absolute Référence : fenêtre du navigateur

Principes techniques et Syntaxe du CSS 19

Margin-collapse

Exemple :<div> <p> This is a paragraph within a <code>div</code> </p></div>

div { background-color: #3C75AE; color: #fff; margin-top: 10px;}

p { margin-top: 20px; margin-bottom: 20px; border: 1px solid #EB6B0E;}

Principes techniques et Syntaxe du CSS 20

Margin-collapse

Rendu ?

Principes techniques et Syntaxe du CSS 21

Margin-collapse

Rendu réel :

Explication :

Principes techniques et Syntaxe du CSS 22

Margin-collapse

Solution :

Rendu :

div { background-color: #3C75AE; color: #fff; margin-top: 10px; padding-top: 1px; padding-bottom: 1px;}

Principes techniques et Syntaxe du CSS 23

Unités de mesure

Absolues Pt, pc, in, cm, mm

Relatives Px, em, ex, %

Unité em :

Principes techniques et Syntaxe du CSS 24

Cibler l’agent utilisateur

Spécifier le media <link media="print" href="…" /> @media screen, print { … }

Types courants All Screen Print Handheld

Hacks CSS Ex: Astuce de l’underscore

Principes techniques et Syntaxe du CSS 25

Les plus gros bugs IE6-7

Transparence PNG filter:progid:DXImageTransform.Microsoft.Alph

aImageLoader(enabled=true, sizingMethod=scale, src='image.png');

HasLayout IE5 – 7 Mécanique interne du moteur Trident

Height et Min-Height Bug height très petit Bug comportement height similaire min-

height

Principes techniques et Syntaxe du CSS 26

Les plus gros bugs IE6-7

Modèle de bloc Modèle Quirks (héritage

IE5)

CSS3▪ box-sizing: border-box;

Principes techniques et Syntaxe du CSS 27

Priorités des sélecteurs

Priorité interne : Element : 0,0,0,0,1 Classe : 0,0,0,1,0 Identifiant : 0,0,1,0,0 Attribut HTML style : 0,1,0,0,0 !important : 1,0,0,0,0

Style utilisateur prioritaire si priorité interne égale

Point sur les sélecteurs 28

Point sur les sélecteursLes sélecteurs d’Internet Explorer 6 à nos jours

Point sur les sélecteurs 29

Sélecteurs compatibles IE6 *

Cible l’ensemble des éléments descendants #X

Cible l’id, haute priorité, rigide .X

Cible la class, priorité intermédiaire, réutilisable X

Cible l’ensemble des éléments X X Y

Cible les descendants Y, quel que soit leur niveau

Point sur les sélecteurs 30

Sélecteurs compatibles IE6 X::PSEUDOELEMENT

S’applique aux éléments nativement block▪ p::first-line { }▪ p::first-letter { }

Peut s’écrire X:PSEUDOELEMENT pour les éléments CSS 1 et 2▪ :first-line, :first-letter,:before,:after, …

A:link, A:visited, X:hover, A:active IE6 n’applique :hover qu’aux balises A Retenir LoVe/HAte

Point sur les sélecteurs 31

Sélecteurs compatibles IE7 X + Y

Cible l’élément immédiatement adjacent (frère)

X ~ Y Similaire X + Y, en moins strict▪ Cible tous les frères de X qui le suivent, même s’il y

a des éléments entre deux X > Y

Similaire à X Y, mais cible les enfants directs X:first-child

Premier enfant de X (similaire X > Y)

Point sur les sélecteurs 32

Sélecteurs compatibles IE7 X[title]

X ayant l’attribut TITLE X[href = "foo"]

X ayant l’attribut HREF égal à « foo » X[href *= "www."]

L’attribut HREF contient « www. » n’importe où X[href ^= "http"]

L’attribut HREF commence par « http » X[href $= ".jpg"]

L’attribut HREF fini par « jpg »

Point sur les sélecteurs 33

Sélecteurs compatibles IE7

X[data-*="foo"] Pseudo attribut▪ Ex : data-filetype="image"

X[foo~="bar"] Cible un attribut séparé par des virgules

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

a[data-info ~= "external"] { color: red;}

Point sur les sélecteurs 34

Sélecteurs compatibles IE8

X:before, X:after Permet de rajouter du contenu avant ou

après.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0;}

.clearfix { *display: inline-block; _height: 1%;}

Critiques et avenir du CSS 35

Critique et avenir du standardLes limites du CSS, un avant gout de CSS 3

Critiques et avenir du CSS 36

Les limites du CSS

Indépendance de la présentation et de la structure Souvent : texte -> image Feuilles de style générique difficilement

applicable Manque d’implémentation CSS =

techniques fortement liées à la structure▪ Ex: Design en float

Critiques et avenir du CSS 37

Les limites du CSS

Accessibilité Risque de véhiculer des infos via CSS▪ Ex : Image background avec titre incorporé

Modifier l’ordre d’apparition des éléments / ordre logique▪ Ex: Sidebar, infobulle

Pertinence des balises non obligatoire▪ Ex: Un div class titre, avec font-size et font-

weight

Critiques et avenir du CSS 38

Les limites du CSS

Simplicité La cascade complique l’anticipation du

rendu▪ Choix à faire entre redondance et

optimisation

En théorie : CSS facilement manipulable par l’utilisateur▪ La pratique est tout autre…

Critiques et avenir du CSS 39

CSS3 : Implémentations beta Gecko (Firefox/Mozilla) : -moz-property Webkit (Safari/Chrome) : -webkit-property Presto (Opera) : -o-property Trident (Internet Explorer) : -ms-property

CSS3 : border-top-left-radius Gecko : -moz-border-radius-topleft Webkit : -webkit-border-top-left-radius

Critiques et avenir du CSS 40

CSS3 : quelques propriétés

Border-radius

Critiques et avenir du CSS 41

CSS3 : quelques propriétés

Box-shadow

Critiques et avenir du CSS 42

CSS3 : quelques propriétés

Text-shadow

Critiques et avenir du CSS 43

CSS3 : quelques propriétés

Text-stroke

Critiques et avenir du CSS 44

CSS3 : quelques propriétés

Multiple Backgrounds

Critiques et avenir du CSS 45

CSS3 : quelques propriétés

Background-size

body, html { height: 100%; }   body {   background: url(path/to/image.jpg) no-repeat;   background-size: 100% 100%;  }

Critiques et avenir du CSS 46

CSS3 : quelques propriétés

Text-overflow

Critiques et avenir du CSS 47

CSS3 : quelques propriétés

Resize

Critiques et avenir du CSS 48

CSS3 : quelques propriétés

Transition

div { opacity: 1; -webkit-transition: opacity 1s linear;} div:hover { opacity: 0;}

Critiques et avenir du CSS 49

Font-face

http://www.fontsquirrel.com/fontface/generator

@font-face {font-family: 'AdobeCaslonProBold';src: url('acaslonpro-bold-webfont.eot');src: local('☺'), url('acaslonpro-bold-webfont.woff') format('woff'), [ … ]font-weight: normal;font-style: normal;

}

div.titre { font-family : "AdobeCaslonProBoldItalic", serif; }

Critiques et avenir du CSS 50

Modèle de boites flexibles

Au départ : 1 bloc main, 1 bloc aside 1 conteneur de 960px

Critiques et avenir du CSS 51

Modèle de boites flexibles

Au départ : main :

800px

Critiques et avenir du CSS 52

Modèle de boites flexibles

Au départ : aside : box-flex: 1;

53

LessCSSUne surcouche de CSS qui offrent de nouvelles possibilités

LessCSS

54

LessCSS : Fonctionnalités

Variables

LessCSS

@brand_color: #4D926F; #header { color: @brand_color;} h2 { color: @brand_color;}

55

LessCSS : Fonctionnalités

Mixins

LessCSS

.rounded_corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius;} #header { .rounded_corners;} #footer { .rounded_corners(10px);}

56

LessCSS : Fonctionnalités

Nested Rules

LessCSS

#header { color: red; a { font-weight: bold; text-decoration: none; }}

57

LessCSS : Fonctionnalités

Operations

LessCSS

@the-border: 1px;@base-color: #111; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2;} #footer { color: (@base-color + #111) * 1.5;}

58

Formation CSSC’était :