<ul><ul><li>Pascale Lambert-Charreteur </li></ul></ul><ul><ul><li>CSS Débutant </li></ul></ul><ul><ul><li>css.mammouthland...
Optimiser ses CSS ?
Un reset ?
<ul><li>*  {  </li></ul><ul><li>padding : 0 ; </li></ul><ul><li>margin : 0 ; </li></ul><ul><li>} </li></ul><ul><li>html, b...
Ou : - Le reset d'Éric Meyer :  http://meyerweb.com/eric/tools/css/reset/ - Le reset de Y! :  http://developer.yahoo.com/y...
L'important est d'obtenir une base de travail cohérente sur chaque navigateur.
YUI propose une approche intéressante : reset + base + font http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-f...
Donner des noms pertinents aux sélecteurs
<ul><li>#gauche { </li></ul><ul><li>} </li></ul><ul><li>#droit { </li></ul><ul><li>} </li></ul><ul><li>#menu { </li></ul><...
Mettre des commentaires
<ul><li>/*  commentaires  */ </li></ul>
Regrouper les sélecteurs
<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>} <...
Synthétiser les déclarations
<ul><li>.class   p  { </li></ul><ul><li>font-family :arial, geneva, sans-serif; </li></ul><ul><li>font-size :100%; </li></...
<ul><li>background  : background-color | background-image | background-repeat | background-attachment | background-positio...
Gérer les ordres de priorités
<ul><ul><li><div id= &quot; menu &quot;> </li></ul></ul><ul><ul><li><p> Quelle  <span  class =&quot; couleur &quot;> coule...
<ul><li>La couleur est :  </li></ul><ul><li>rouge </li></ul>
<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...
<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><li>p span .couleur  { </li></ul><ul><li>color : blue  !important  ; </li></ul><ul><li>} </li></ul><ul><li>Quelle  cou...
Des questions ?
Prochain SlideShare
Chargement dans…5
×

Atelier "Optimiser ses CSS" ParisWeb 2008

3 347 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 347
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 ?

    ×