1 / 58

Formation CSS

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.

payton
Download Presentation

Formation CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • 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 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 (cfabsolute) • 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 paragraphwithin 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.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 • * • Ciblel’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%; } 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

More Related