Atelier "Optimiser ses CSS" ParisWeb 2008

3 281 vues

Publié le

Quelques pratiques et astuces pour optimiser ses feuilles de style.
Atelier présenté par Pascale Lambert-Charreteur et Vincent Valentin.

Publié dans : Technologie
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 281
Sur SlideShare
0
Issues des intégrations
0
Intégrations
671
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Atelier "Optimiser ses CSS" ParisWeb 2008

    1. 1. <ul><ul><li>Pascale Lambert-Charreteur </li></ul></ul><ul><ul><li>CSS Débutant </li></ul></ul><ul><ul><li>css.mammouthland.net </li></ul></ul><ul><ul><li>Vincent Valentin </li></ul></ul><ul><ul><li>20cent.net </li></ul></ul>
    2. 2. Optimiser ses CSS ?
    3. 3. Un reset ?
    4. 4. <ul><li>* { </li></ul><ul><li>padding : 0 ; </li></ul><ul><li>margin : 0 ; </li></ul><ul><li>} </li></ul><ul><li>html, body { </li></ul><ul><li>padding : 0 ; </li></ul><ul><li>margin : 0 ; </li></ul><ul><li>} </li></ul>
    5. 5. Ou : - Le reset d'Éric Meyer : http://meyerweb.com/eric/tools/css/reset/ - Le reset de Y! : http://developer.yahoo.com/yui/reset/ - ou un autre !
    6. 6. L'important est d'obtenir une base de travail cohérente sur chaque navigateur.
    7. 7. YUI propose une approche intéressante : reset + base + font http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css
    8. 8. Donner des noms pertinents aux sélecteurs
    9. 9. <ul><li>#gauche { </li></ul><ul><li>} </li></ul><ul><li>#droit { </li></ul><ul><li>} </li></ul><ul><li>#menu { </li></ul><ul><li>} </li></ul><ul><li>#contenu { </li></ul><ul><li>} </li></ul>
    10. 10. Mettre des commentaires
    11. 11. <ul><li>/* commentaires */ </li></ul>
    12. 12. Regrouper les sélecteurs
    13. 13. <ul><li>h1 { </li></ul><ul><li>} </li></ul><ul><li>h2 { </li></ul><ul><li>} </li></ul><ul><li>p { </li></ul><ul><li>} </li></ul><ul><li>/* menu */ </li></ul><ul><li>#menu { </li></ul><ul><li>} </li></ul><ul><li>#menu h2 { </li></ul><ul><li>} </li></ul>
    14. 14. Synthétiser les déclarations
    15. 15. <ul><li>.class p { </li></ul><ul><li>font-family :arial, geneva, sans-serif; </li></ul><ul><li>font-size :100%; </li></ul><ul><li>font-weight :bold; </li></ul><ul><li>line-height :30px; </li></ul><ul><li>} </li></ul><ul><li>.class p { </li></ul><ul><li>font: bold 100%/30px arial, geneva, sans-serif; </li></ul><ul><li>} </li></ul>
    16. 16. <ul><li>background : background-color | background-image | background-repeat | background-attachment | background-position </li></ul><ul><li>border : border-width | border-style | border-color </li></ul><ul><li>font : font-style | font-variant | font-weight | font-size/line-height | font-family </li></ul><ul><li>list-style : list-style-type | list-style-position | list-style-image </li></ul>
    17. 17. Gérer les ordres de priorités
    18. 18. <ul><ul><li><div id= &quot; menu &quot;> </li></ul></ul><ul><ul><li><p> Quelle <span class =&quot; couleur &quot;> couleur </span> ? </p> </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><li>#menu p span { </li></ul><ul><li>color : red; </li></ul><ul><li>} </li></ul><ul><li>#menu span { </li></ul><ul><li>color : green; </li></ul><ul><li>} </li></ul><ul><li>p span .couleur { </li></ul><ul><li>color : blue; </li></ul><ul><li>} </li></ul>
    19. 19. <ul><li>La couleur est : </li></ul><ul><li>rouge </li></ul>
    20. 20. <ul><li>a : attribut style </li></ul><ul><li>b : nombre d' id </li></ul><ul><li>c : nombre de class </li></ul><ul><li>d : nombre d'éléments html </li></ul><ul><li>[ a b c d ] </li></ul>
    21. 21. <ul><li>#menu p span { </li></ul><ul><li>color : red; </li></ul><ul><li>} </li></ul><ul><li>[ 0 1 0 2 ] </li></ul><ul><li>#menu span { </li></ul><ul><li>color : green; </li></ul><ul><li>} </li></ul><ul><li>[ 0 1 0 1 ] </li></ul><ul><li>p span .couleur { </li></ul><ul><li>color : blue; </li></ul><ul><li>} </li></ul><ul><li>[ 0 0 1 2 ] </li></ul>
    22. 22. <ul><li>p span .couleur { </li></ul><ul><li>color : blue !important ; </li></ul><ul><li>} </li></ul><ul><li>Quelle couleur ? </li></ul>
    23. 23. Des questions ?

    ×