Formation CSS.

Présentation au sujet: "Formation CSS."— Transcription de la présentation:

1 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

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

5 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

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

9 CSS, concrètement 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 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

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 Relatives Unité em : Pt, pc, in, cm, mm
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 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

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

28 Point sur les sélecteurs
Les 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 A:link, A:visited, A:hover 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 *= " L’attribut HREF contient «  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%; Point sur les sélecteurs

35 Critique et avenir du standard
Les 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; Critiques et avenir du CSS

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

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

55 LessCSS : Fonctionnalités
Mixins .rounded_corners 5px) { } #header { .rounded_corners; #footer { .rounded_corners(10px); LessCSS

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

57 LessCSS : Fonctionnalités
Operations @the-border: 1px; @base-color: #111; #header { * 3; * 2; } #footer { color: + #111) * 1.5; LessCSS

58 C’était : Formation CSS