Formation CSS

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).

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 Les origines des CSS sont liées à trois alternatives majeures  Histoire et enjeux du CSS

Questions clés HTML Choix de présentation 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

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

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

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 Histoire et enjeux du CSS

CSS, concrètement Principes techniques et Syntaxe du CSS

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

Propriété display Display : none Disparait du flux À opposer à « visibility: hidden » Ex : Principes techniques et Syntaxe du CSS

Propriété display Display : block Rendu l’un en dessous de l’autre S’adapte à la largeur maximum Principes techniques et Syntaxe du CSS

Propriété display Display : block Margin (Outline) Border, Padding, Width Principes techniques et Syntaxe du CSS

Propriété display Display : inline Rendu l’un à côté de l’autre S’adapte à la largeur minimum Principes techniques et Syntaxe du CSS

Propriété display Display : inline-block Rendu type inline Possède les propriétés des blocks Principes techniques et Syntaxe du CSS

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

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

Positionnement Static Relative Absolute Fixed 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

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

Margin-collapse Rendu ? Principes techniques et Syntaxe du CSS

Margin-collapse Rendu réel : Explication : Principes techniques et Syntaxe du CSS

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

Unités de mesure Absolues Relatives Unité em : Pt, pc, in, cm, mm Px, em, ex, % Unité em : Principes techniques et Syntaxe du CSS

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

Les plus gros bugs IE6-7 Transparence PNG HasLayout filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(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

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

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 Principes techniques et Syntaxe du CSS

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

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

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 A:link, A:visited, A:hover Point sur les sélecteurs

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

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

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

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%; Point sur les sélecteurs

Critique et avenir du standard Les limites du CSS, un avant gout de CSS 3 Critiques et avenir du CSS

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

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

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

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

CSS3 : quelques propriétés Border-radius Critiques et avenir du CSS

CSS3 : quelques propriétés Box-shadow Critiques et avenir du CSS

CSS3 : quelques propriétés Text-shadow Critiques et avenir du CSS

CSS3 : quelques propriétés Text-stroke Critiques et avenir du CSS

CSS3 : quelques propriétés Multiple Backgrounds Critiques et avenir du CSS

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

CSS3 : quelques propriétés Text-overflow Critiques et avenir du CSS

CSS3 : quelques propriétés Resize Critiques et avenir du CSS

CSS3 : quelques propriétés Transition div { opacity: 1; -webkit-transition: opacity 1s linear; }   div:hover { opacity: 0; Critiques et avenir du CSS

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

Modèle de boites flexibles Au départ : 1 bloc main, 1 bloc aside 1 conteneur de 960px Critiques et avenir du CSS

Modèle de boites flexibles Au départ : main : 800px Critiques et avenir du CSS

Modèle de boites flexibles Au départ : aside : box-flex: 1; Critiques et avenir du CSS

LessCSS Une surcouche de CSS qui offrent de nouvelles possibilités

LessCSS : Fonctionnalités Variables @brand_color: #4D926F;   #header { color: @brand_color; } h2 { LessCSS

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

LessCSS : Fonctionnalités Nested Rules #header { color: red; a { font-weight: bold; text-decoration: none; } LessCSS

LessCSS : Fonctionnalités Operations @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; LessCSS

C’était : Formation CSS