Your SlideShare is downloading. ×
CSS3 WebEducation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

CSS3 WebEducation

1,422
views

Published on

CSS3, qui est parfois assimilé avec le HTML5, est de mieux en mieux pris en charge par les navigateurs Web modernes. Quels sont les nouvelles fonctionnalités de CSS3 et quels stratégies s’offrent à …

CSS3, qui est parfois assimilé avec le HTML5, est de mieux en mieux pris en charge par les navigateurs Web modernes. Quels sont les nouvelles fonctionnalités de CSS3 et quels stratégies s’offrent à nous pour commencer l’utilisation de celles-ci dès maintenant ? Comment implémenter les fonctionnalités les mieux supportés de CSS3.

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,422
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. http://meyerweb.com/eric/html-xhtml/html5logo/ CSS3http://css-tricks.com/overriding-the-default-text-selection-color-with-css/http://spigotdesign.com/ CSS3 Logo by W3C Nouveautés 19 mai 2011 - Rémy Savard
    • 2. CSS3 - Nouveautés•Évolution technique et technologique•Pourquoi débuter maintenant•Stratégie•Modules CSS3
    • 3. ÉVOLUTION TECHNIQUE ET TECHNOLOGIQUE http://www.flickr.com/photos/raneko/4204026836/in/photostream/
    • 4. 1, 675 TECHNIQUES ULTIMES QUI VONT VOUSPERMMETTRE DE DEVENIR UN NINJA DU CSS
    • 5. Problèmes = Solutions documentés, workarounds pournavigateurs, groupes de supports, partages detechniques, etc. http://www.flickr.com/photos/kartooner/32891895/
    • 6. http://www.flickr.com/photos/pete-karl/3654692936/
    • 7. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object,iframe,h1, h2, h3, h4, h5, h6, p, blockquote,pre,a, abbr, acronym, address, big, cite,code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr,th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header,hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} http://www.flickr.com/photos/aquan/2780541892/ http://www.flickr.com/photos/aquan/2780541892/
    • 8. Aujourd’hui nos sites sont : http://www.flickr.com/photos/ajc1/4663140532/
    • 9. Aujourd’hui nos sites sont : Mulit-platforme http://www.flickr.com/photos/ajc1/4663140532/
    • 10. Aujourd’hui nos sites sont : Mulit-platforme Accessible http://www.flickr.com/photos/ajc1/4663140532/
    • 11. Aujourd’hui nos sites sont : Mulit-platforme Accessible Sémantique http://www.flickr.com/photos/ajc1/4663140532/
    • 12. Aujourd’hui nos sites sont : Mulit-platforme Accessible Sémantique Optimisé http://www.flickr.com/photos/ajc1/4663140532/
    • 13. Aujourd’hui nos sites sont : Mulit-platforme Accessible Sémantique Optimisé Standard http://www.flickr.com/photos/ajc1/4663140532/
    • 14. Accélération des sorties des navigateurs http://meyerweb.com/eric/browsers/timeline-structured.html
    • 15. Les navigateurs modernes gagnent du terrain. http://gs.statcounter.com/
    • 16. “10 years ago a browser was born. Its name was InternetExplorer 6. Now that we’re in 2011, in an era of modern webstandards, it’s time to say goodbye.” Microsoft - http://www.theie6countdown.com/
    • 17. Le design doit être identique sur tous les navigateurs http://www.flickr.com/photos/jstar/2338025074/
    • 18. Le design doit être identique sur tous les navigateurs http://www.flickr.com/photos/jstar/2338025074/
    • 19. Augmentation des mobiles et contextes d’utilisations http://gs.statcounter.com/
    • 20. POURQUOI DÉBUTER MAINTENANT
    • 21. CSS3 vs. CSS: A Speed Benchmark 1. linear-gradient 2. border-radius 3. radial-gradient 4. text-shadow 5. box-shadow with RGBa http://www.smashingmagazine.com/2011/04/21/css3- vs-css-a-speed-benchmark/
    • 22. Résultats : Diminution du temps de chargement“Pour moi, CSS3 a été non seulement plus rapide maisbeaucoup plus agréable,parce que jétais concentré sur uneseule fenêtre (mon éditeur CSS)[...]. Dautre part, le tranchageet le transfert des images à partir de Photoshop à FTP àléditeur CSS à été une corvée, ce qui a pris plus de temps.”Trent Walton - http://www.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/
    • 23. Temps de production, de maintenance et coûts réduits http://www.flickr.com/photos/disowned/1158857526/
    • 24. STRATÉGIE•Statuts des modules•Priorités des modules•Support des navigateurs•Choix et implantation des alternatives(Fallbacks)
    • 25. Statuts des modulesCompleted work REC W3C RecommendationDrafts PR Proposed Recommendation CR Candidate Recommendation LC Last Call Draft WD Working Draft http://www.w3.org/standards/techs/css#w3c_all
    • 26. Priorités des modules Completed work High priority Medium priority Low Priority http://www.w3.org/Style/CSS/current-work
    • 27. Support des navigateurs•caniuse.com•QuirksMode - CSS contents and browser compatibility•Robert Nyman - CSS3 - Information and samples•findmebyIP - HTML5 & CSS3 Support http://morcha.blogbus.com/logs/30886671.html
    • 28. Choix et implantation des alternatives
    • 29. MODULES CSS3
    • 30. PR CSS COLOR MODULE LEVEL 3RGB(A), HSL(A) et noms de couleurs•≠ propriété, = nouveau modèle de couleur•Valeur RGB ou HSL avec optionnellement l’opacité http://robertnyman.com/css3/
    • 31. opacity•Opacité d’un élément de 0 à 1•RGBa = 1 couleur / Opacity = 1 élément + enfants http://www.findmebyip.com/litmus/
    • 32. PR SELECTORS LEVEL 3[att]•Attribut att, peut importe la valeur de l’attribut
    • 33. PR SELECTORS LEVEL 3[att]•Attribut att, peut importe la valeur de l’attribut[att=val]•Attribut att et la valeur exact val
    • 34. PR SELECTORS LEVEL 3[att]•Attribut att, peut importe la valeur de l’attribut[att=val]•Attribut att et la valeur exact val[att~=val]•Attribut att avec des valeurs séparés par des espaces, l’une d’elles doit être val
    • 35. [att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour les sous-code de languages
    • 36. [att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour les sous-code de languages[att^=val]•Attribut att et une valeur qui commence par val
    • 37. [att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour les sous-code de languages[att^=val]•Attribut att et une valeur qui commence par val[att$=val]•Attribut att et une valeur qui se termine par val
    • 38. [att|=val]•Attribut att et la valeur exact val ou commençant par val et immédiatement suivit de  "-"•Principalement pour les sous-code de languages[att^=val]•Attribut att et une valeur qui commence par val[att$=val]•Attribut att et une valeur qui se termine par val[att*=val]•Attribut att et une valeur qui contient au moins une instance de la substring val
    • 39. ::first-line•Représente la première ligne formatté d’un élément.
    • 40. ::first-line•Représente la première ligne formatté d’un élément.::first-letter•Représente la première lettre d’un élément, si elle n’est pas précédé par aucuns autres éléments de contenu (images) sur sa ligne.•Utiliser pour donner du style•La ponctuation qui précède ou suit le première lettre devrait être inclus•Pourrait être un chiffre. 67 millions = 6
    • 41. The target pseudo-class :target•Certaines URIs ce terminant par # et un identifiant de fragement refère à un emplacement dans une ressource.•Exemple: http://example.com/html/top.html#section_2•Ces URIs ciblent vers un élément dans le document, connu comme l’élément cible.
    • 42. The target pseudo-class :target•Certaines URIs ce terminant par # et un identifiant de fragement refère à un emplacement dans une ressource.•Exemple: http://example.com/html/top.html#section_2•Ces URIs ciblent vers un élément dans le document, connu comme l’élément cible.::selection•Change la couleur de background et de texte des sélections.•http://css-tricks.com/overriding-the-default-text- selection-color-with-css/
    • 43. General sibling combinator (~)•Fait de 2 séquences de sélecteurs séparés par ~. Les éléments représenté par ces deux séquences partagent le même parent et l’élément représenté par la première séquence précède (Pas nécessairement immédiatement) l’élément représenté par la deuxième séquence. http://www.quirksmode.org/css/selector_sibling.html
    • 44. CR CSS BACKGROUNDS AND BORDERS MODULE LEVEL 3Background-image•Plusieurs image de background sur un élément•Séparés par une virgule (,)•Les navigateurs qui ne supportent pas vont ignoré la règle, donc mettre une déclaration simple avant•La première image dans la liste est la plus près de l’utilisateur
    • 45. http://robertnyman.com/css3/
    • 46. Background-clip•Spécifie la zone de peinture de fond du background•“border-box” Affiché à l’intérieur du border-box•“padding-box” Affiché à l’intérieur du padding-box•“content-box” Affiché à l’intérieur du content-box http://robertnyman.com/css3/
    • 47. Background-origin•Spécifie comment la position du background est calculé•“border-box” Positionné relativement selon la bordure•“padding-box” Positionné relativement selon le padding•“content-box” Positionné relativement selon le contenu http://robertnyman.com/css3/
    • 48. Background-size•Spécifie la taille de l’image de background•La première valeur donne la largeur tandis que la deuxième valeur donne la hauteur•Si une des dimensions à sa valeur à auto, l’image doit garder son ration. http://robertnyman.com/css3/
    • 49. Border-radius•Arrondis les coins d’un élément avec une valeur de rayon (%, px ou ems)•Possibilité de contrôlé chaque coins•IE7 et IE8 = coins carrés devraient être acceptables http://robertnyman.com/css3/
    • 50. Box-shadow•Ajoute une ombre à un élément•Possibilité de combiné avec RGBa pour un effet•La première valeur = au décalage horizontal, la seconde = décalage vertical et la troisième valeur = rayon de flou. Finalement, couleur pour l’ombrage•Pour créé une effet plus naturel de 3D il est possible d’ajouter une 2e ombre http://robertnyman.com/css3/
    • 51. CR MEDIA QUERIES•Étiquettage plus précis des feuilles de styles•width, height, min/max, color, orientation, aspect-ratio, etc•Outil pour “Responsive Web Design”•Changement de CSS en haut de 800px de large: http://robertnyman.com/css3/
    • 52. Responsive Web Design•Le site doit être construit avec une grille flexible.•Les images dans le design doivent être flexibles.•Différentes vues doivent êtres offertes pour les différents contextes via les media queries. http://sixrevisions.com/web_design/understanding-the-elements-of-responsive-web-design/ http://mediaqueri.es/
    • 53. CR CSS MULTI-COLUMN LAYOUT MODULE•Mise en page avec colonnes ≠ floats•Nous pouvons définir un système de colonnes soit en définissant le nombre de colonnes ou la largeur des colonnes•Le contenu peut continuer d’une colonne à une autre http://robertnyman.com/css3/
    • 54. CR CSS3 BASIC USER INTERFACE MODULEbox-sizing•content-box = width, height et min/max appliqué au content box. Padding et border à l’éxtérieur des dimensions•border-box = width, height et min/max détermine le border box. Padding et border compris dans les dimensions http://robertnyman.com/css3/
    • 55. Outline•Agit comme border (width, style, color)•+ outline-offsetMAIS•Ils ne prenne pas d’espace•Peuvent être non-rectangulaire http://robertnyman.com/css3/
    • 56. WD CSS TEXT LEVEL 3text-shadow•Propriété CSS2 abandonné dans CSS 2.1 et ré-introduis dans CSS3•Ajout d’une ombre au texte, avec des options de direction, quantité de flou et couleur de l’ombre•Les 2 premières valeurs servent au décalage horizontal et vertical. La 3e valeur est le rayon du dégradé de l’ombre. Finalement, la couleur de l’ombre•Valeurs négatives acceptés•Possibilité de mettre plusieurs ombres
    • 57. http://robertnyman.com/css3/http://unitinteractive.com/blog/test/textshadow.html
    • 58. WD CSS FONTS MODULE LEVEL 3•Utilisation de fonts plus variés. Pas de Flash, pas de JavaScripts•Vérifier la licence EULA (End User License Agreement)•La police doit se trouver sur le même domaine
    • 59. http://www.fontspring.com/fontface
    • 60. http://fffo.grahambird.co.uk/http://robertnyman.com/css3/
    • 61. WD CSS 2D TRANSFORMS MODULE LEVEL 3•Développé initialement par l’équipe de WebKit et ensuite incorporé au W3C•Permet au élément rendu par CSS d’être transformé dans un espace en 2 dimensions http://robertnyman.com/css3/
    • 62. Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’origine
    • 63. Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’origineRotate
    • 64. Scale•Les élément qui ont la transformation scale n’influencent pas le layout du document.•Possible de mettre un point d’origineRotate
    • 65. Skew•Skew prends les coordonnés x et y et penche un élément.
    • 66. Skew•Skew prends les coordonnés x et y et penche un élément.Translate•Translate déplace les éléments via les coordonnés x/y•Valeurs négatives acceptés
    • 67. Skew•Skew prends les coordonnés x et y et penche un élément.Translate•Translate déplace les éléments via les coordonnés x/y•Valeurs négatives acceptés
    • 68. WD CSS TRANSITIONS MODULE LEVEL 3•Développé initialement par l’équipe de WebKit et ensuite incorporé au W3C•Changement des valeurs dans les CSS lorsque qu’une interaction est déclenché (hover)•Liste des propriétés qui peuvent être en transition http://robertnyman.com/css3/
    • 69. transition-timing-function•ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier
    • 70. Transition pour plusieurs propriétés•Séparés par une virgule (,)•Chacuns peu avoir ses fonctionnalités de temps et de délais
    • 71. RESSOURCESLiens d’introduction•http://meyerweb.com/eric/html-xhtml/html5logo/Support des navigateurs•caniuse.com•QuirksMode - CSS contents and browser compatibility•Robert Nyman - CSS3 - Information and samples•findmebyIP - HTML5 & CSS3 Support•universal-ie6-css
    • 72. CSS3 Selectors•CSS3 Selectors TestCSS3 Font-face•Font Squirrel @font-face generator•Review of Popular Web Font Embedding ServicesMedia Queries•CSS 3 Media Queries for all Browser (jQuery Plugin)•css3-mediaqueries-js•Respond•1140 CSS Grid•ProtoFluid•Hardboiled CSS3 Media Queries•Responsive-Images
    • 73. Générateurs•http://css3generator.com/•http://css3please.com/•http://www.css3maker.com/index.html•http://border-radius.com/•http://css3-buttons.heroku.com/generator•http://www.colorzilla.com/gradient-editor/
    • 74. CSS3 CSS3 Logo by W3Chttp://www.slideshare.net/rsavard/css3-webeducation @REMYSAVARD