{"id":800,"date":"2007-02-06T17:22:07","date_gmt":"2007-02-06T16:22:07","guid":{"rendered":"http:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/2007\/02\/06\/css-combiner-des-styles\/"},"modified":"2007-02-26T08:58:21","modified_gmt":"2007-02-26T07:58:21","slug":"css-combiner-des-styles","status":"publish","type":"post","link":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/2007\/02\/06\/css-combiner-des-styles\/","title":{"rendered":"CSS : combiner des styles"},"content":{"rendered":"<p>Les CSS (Cascading Style Sheets) sont un moyen tr\u00e8s puissant pour appliquer des styles \u00e0 une page HTML. Cela pr\u00e9sente l&rsquo;avantage de rassembler toutes les d\u00e9clarations de styles en un seul endroit qui peut facilement \u00eatre situ\u00e9 hors des pages HTML. N\u00e9anmoins, mes premiers efforts dans cette direction se sont rapidement traduits par la cr\u00e9ation de nombreux styles tr\u00e8s similaires les uns aux autres.<\/p>\n<p>Par exemple, j&rsquo;\u00e9crivais :<\/p>\n<pre lang=\"css\">p {\r\n\tmargin:0px 10px 5px 10px;\r\n\tfont-size:13px;\r\n\tfont-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n\tcolor: #000000\r\n}\r\npre {\r\n\tmargin:0px 10px 10px 10px;\r\n\tfont-size:13px;\r\n\tcolor: #000000\r\n}\r\nol {\r\n\tfont-size:13px;\r\n\tfont-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n\tcolor: #000000;\r\n}\r\nul {\r\n\tfont-size:13px;\r\n\tfont-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n\tcolor: #000000;\r\n}<\/pre>\n<p>Je cherchais \u00e0 am\u00e9liorer et \u00e0 optimiser tout cela. J&rsquo;ai d\u00fb m&rsquo;y reprendre \u00e0 plusieurs fois avant d&rsquo;arriver \u00e0 une solution satisfaisante. La premi\u00e8re \u00e9tape a \u00e9t\u00e9 presque \u00e9vidente, parce qu&rsquo;elle est d\u00e9crite \u00e0 peu pr\u00e8s dans tous les tutoriaux et tous les livres sur CSS : on peut grouper dans une d\u00e9claration unique tous les styles identiques (comme <code>ul<\/code> et <code>ol<\/code>, dans mon exemple), menant \u00e0 la pr\u00e9sentation suivante :<\/p>\n<pre lang=\"css\">p {\r\n\tmargin:0px 10px 5px 10px;\r\n\tfont-size:13px;\r\n\tfont-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n\tcolor: #000000\r\n}\r\npre {\r\n\tmargin:0px 10px 10px 10px;\r\n\tfont-size:13px;\r\n\tfont-family: Courier, \"Courier New\", monospace;\r\n\tcolor: #000000\r\n}\r\nul, ol {\r\n\tfont-size:13px;\r\n\tfont-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n\tcolor: #000000;\r\n}<\/pre>\n<p><!--adsense#square250-->Pas forc\u00e9ment extraordinaire, mais \u00e7a r\u00e9duit bien le niveau de redondance.<\/p>\n<p>A partir de l\u00e0, je me suis retrouv\u00e9 un peu dans le noir pour regrouper des styles qui ne sont pas exactement identiques mais dont on voit bien qu&rsquo;ils se ressemblent. Le d\u00e9clencheur a \u00e9t\u00e9 de comprendre qu&rsquo;un style peut \u00eatre d\u00e9fini en plusieurs d\u00e9clarations s\u00e9par\u00e9es (et compl\u00e9mentaires), comme ci-apr\u00e8s :<\/p>\n<pre lang=\"css\">p {\r\n\tmargin:0px 10px 5px 10px;\r\n\tfont-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n}\r\np {\r\n\tfont-size:13px;\r\n\tcolor: #000000\r\n}\r\npre {\r\n\tmargin:0px 10px 10px 10px;\r\n\tfont-family: Courier, \"Courier New\", monospace;\r\n}\r\npre {\r\n\tfont-size:13px;\r\n\tcolor: #000000\r\n}<\/pre>\n<p><!--adsense#top_post_right-->A partir de l\u00e0, la d\u00e9marche \u00e9tait devenue claire pour des styles presque identiques : il faut grouper les parties identiques et garder le reste s\u00e9par\u00e9. Dans notre exemple, cela donne alors :<\/p>\n<pre lang=\"css\">p, pre {\r\n\tfont-size:13px;\r\n\tcolor: #000000\r\n}\r\np {\r\n\tmargin:0px 10px 5px 10px;\r\n\tfont-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n}\r\npre {\r\n\tmargin:0px 10px 10px 10px;\r\n\tfont-family: Courier, \"Courier New\", monospace;\r\n}<\/pre>\n<div class=\"left25_box\">La feuille de CSS de base de mon site est librement accessible en suivant le lien : <a href=\"\/roumazeillesv5.css\">roumazeillesv5.css<\/a><\/div>\n<p>Le code final de mon example est alors devenu :<\/p>\n<pre lang=\"css\">p, pre, ul, ol {\r\n\tfont-size:13px;\r\n\tcolor: #000000\r\n}\r\np {\r\n\tmargin:0px 10px 5px 10px;\r\n\tfont-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n}\r\nul, ol {\r\n\tfont-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n}\r\npre {\r\n\tmargin:0px 10px 10px 10px;\r\n\tfont-family: Courier, \"Courier New\", monospace;\r\n}<\/pre>\n<p>15 lignes au lieu de 21, presque plus aucune redondance (aucune en dehors de ce qui est rest\u00e9 pour la lisibilit\u00e9). Cette approche a men\u00e9 \u00e0 des simplifications drastiques dans mes feuilles de style. J&rsquo;esp\u00e8re que cela pourra aussi vous \u00eatre utile.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les CSS (Cascading Style Sheets) sont un moyen tr\u00e8s puissant pour appliquer des styles \u00e0 une page HTML. Cela pr\u00e9sente l&rsquo;avantage de rassembler toutes les d\u00e9clarations de styles en un seul endroit qui peut facilement \u00eatre situ\u00e9 hors des pages HTML. N\u00e9anmoins, mes premiers efforts dans cette direction se sont rapidement traduits par la cr\u00e9ation [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,36,37,33,2],"tags":[],"class_list":["post-800","post","type-post","status-publish","format-standard","hentry","category-blog","category-creer-un-site","category-nouveau-site","category-technique","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/posts\/800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/comments?post=800"}],"version-history":[{"count":0,"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/posts\/800\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/media?parent=800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/categories?post=800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/tags?post=800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}