{"id":5341,"date":"2024-08-27T16:13:33","date_gmt":"2024-08-27T16:13:33","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-commentaires-css-guide-pratique\/"},"modified":"2024-11-08T19:33:04","modified_gmt":"2024-11-08T19:33:04","slug":"ajouter-commentaires-css-guide-pratique","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-commentaires-css-guide-pratique\/","title":{"rendered":"3.3 Ajouter des Commentaires en CSS : Guide Pratique"},"content":{"rendered":"<p><br \/><br \/><br \/><br \/><br \/><br \/><br \/><\/p>\n\n\n<p><strong>Ajouter des Commentaires en CSS<\/strong> est une pratique essentielle pour documenter et organiser votre code. Cela permet non seulement de rendre votre CSS plus lisible, mais aussi de faciliter la collaboration et la maintenance de votre projet \u00e0 long terme. Apprenons comment ajouter des commentaires en CSS de mani\u00e8re efficace gr\u00e2ce \u00e0 ce guide pratique.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Utilisation des Commentaires en CSS<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n        <iframe src=\"https:\/\/player.vimeo.com\/video\/586289207?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n        \n        <!-- Popup Desktop -->\n        <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n            <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n            <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n            <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n            <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n        <\/div>\n\n        <!-- Popup Mobile -->\n        <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n            <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n            <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n            <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n        <\/div>\n    <\/div>\n\n    <script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        var iframe = document.getElementById('vimeoPlayer');\n        var player = new Vimeo.Player(iframe);\n        var isPopupDisplayed = false;\n\n        player.on('play', function() {\n            if (!isPopupDisplayed) {\n                player.on('timeupdate', function(data) {\n                    if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                        \/\/ Pause the video and display the popup\n                        player.pause().then(function() {\n                            if (window.innerWidth > 768) {\n                                document.querySelector('.desktop-popup').style.display = 'block';\n                            } else {\n                                document.querySelector('.mobile-popup').style.display = 'block';\n                            }\n                            fetchPriceAndUpdatePopup();\n                            isPopupDisplayed = true;\n                        });\n                    }\n                });\n            }\n        });\n\n        function fetchPriceAndUpdatePopup() {\n            fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n                .then(response => response.text())\n                .then(html => {\n                    var parser = new DOMParser();\n                    var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                    var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                    var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                    var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                    var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                    document.getElementById('price').textContent = price;\n                    document.getElementById('priceMobile').textContent = price;\n                    document.querySelector('.desktop-popup del').textContent = originalPrice;\n                    document.querySelector('.mobile-popup del').textContent = originalPrice;\n                })\n                .catch(error => console.error('Error fetching the price:', error));\n        }\n\n        function closePopup() {\n            document.querySelector('.desktop-popup').style.display = 'none';\n            document.querySelector('.mobile-popup').style.display = 'none';\n            player.play(); \/\/ Allows resuming the video only after closing the popup\n        }\n    });\n    <\/script>\n\n\n\n<div id=\"imageContainer\" style=\"text-align: center; margin: 20px 0;\">\n        <img decoding=\"async\" src=\"https:\/\/example.com\/css-comments.png\" loading=\"lazy\" alt=\"Exemple de commentaire en CSS\" style=\"max-width: 100%; height: auto;\" title=\"\">\n    <\/div>\n\n\n\n<p>En CSS, les commentaires sont des sections de texte qui ne sont pas interpr\u00e9t\u00e9es par le navigateur. Ils sont utilis\u00e9s pour ajouter des notes et des explications dans le code. Les commentaires peuvent aider \u00e0 comprendre la structure et le but de styles sp\u00e9cifiques, \u00e0 fournir des r\u00e9f\u00e9rences ou des instructions, et \u00e0 d\u00e9sactiver temporairement des parties du code sans les supprimer. Pour en savoir plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">le fonctionnement des navigateurs web<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe des Commentaires en CSS<\/h3>\n\n\n\n<p>La syntaxe des commentaires en CSS est simple. Les commentaires commencent par <code>\/*<\/code> et se terminent par <code>*\/<\/code>. Tout ce qui se trouve entre ces balises est consid\u00e9r\u00e9 comme un commentaire et ne sera pas interpr\u00e9t\u00e9 par le navigateur. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Ceci est un commentaire en CSS *\/\n    body {\n        background-color: #f0f0f0; \/* Le fond de la page est gris clair *\/\n    }\n\n    \/* Boutons principal *\/\n    button.primary {\n        color: white; \/* Le bouton principal aura du texte blanc *\/\n        background-color: #007BFF; \/* Fond bleu *\/\n    }\n    <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Commentaires pour Structurer le Code<\/h3>\n\n\n\n<p>Les commentaires peuvent \u00eatre utilis\u00e9s pour diviser et structurer votre fichier CSS en sections distinctes. Cela aide \u00e0 naviguer et \u00e0 g\u00e9rer des fichiers CSS volumineux. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* ----------------- *\/\n    \/* Styles Globaux *\/\n    \/* ----------------- *\/\n    body {\n        font-family: 'Arial, sans-serif';\n        line-height: 1.6;\n    }\n\n    \/* ----------------- *\/\n    \/* Styles du Header *\/\n    \/* ----------------- *\/\n    header {\n        background: #333;\n        color: #fff;\n        padding: 10px 0;\n    }\n\n    \/* ----------------- *\/\n    \/* Styles du Contenu *\/\n    \/* ----------------- *\/\n    .main-content {\n        margin: 20px 0;\n    }\n    <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Commentaires pour D\u00e9sactiver du Code Temporairement<\/h3>\n\n\n\n<p>Lors du d\u00e9veloppement, il peut \u00eatre utile de d\u00e9sactiver temporairement certaines parties du code sans les supprimer. Les commentaires sont parfaits pour cela. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/*\n    button.primary {\n        color: white;\n        background-color: #007BFF;\n    }\n    *\/\n\n    \/* D\u00e9sactiver les styles des boutons secondaires temporairement \n    button.secondary {\n        color: black;\n        background-color: lightgray;\n    }\n    *\/\n    <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Meilleures Pratiques pour les Commentaires en CSS<\/h3>\n\n\n\n<p>Pour tirer le meilleur parti des commentaires en CSS, voici quelques meilleures pratiques \u00e0 suivre :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Soyez clair et concis :<\/strong> Les commentaires doivent apporter un r\u00e9el b\u00e9n\u00e9fice en termes de compr\u00e9hension, \u00e9vitez les redondances et les informations \u00e9videntes.<\/li>\n\n\n\n<li><strong>Utilisez des commentaires pour expliquer des hacks ou des solutions complexes :<\/strong> Parfois, le CSS peut n\u00e9cessiter des ajustements sp\u00e9cifiques pour diff\u00e9rents navigateurs.<\/li>\n\n\n\n<li><strong>Mettre \u00e0 jour les commentaires :<\/strong> Au fur et \u00e0 mesure que votre code \u00e9volue, assurez-vous que les commentaires restent pertinents et \u00e0 jour.<\/li>\n\n\n\n<li><strong>Standards de documentation :<\/strong> Si vous travaillez en \u00e9quipe, adoptez des standards de commentaire pour que tout le monde puisse comprendre et \u00e9crire des commentaires de mani\u00e8re uniforme.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples de Commentaires Bien Utilis\u00e9s<\/h3>\n\n\n\n<div id=\"codeContainer\" style=\"background: #f9f9f9; padding: 10px; border-radius: 5px;\">\n        <figure>\n            <pre><code class=\"lang-css\">\/*\n    D\u00e9finir la couleur de fond du corps \n    *\/\n    body {\n      background-color: #f0f0f0;\n    }\n\n    \/* Styles du Header \n    Le header comporte un fond noir avec un alignement centr\u00e9 \n    *\/\n    header {\n      background: #333;\n      color: #fff;\n      text-align: center;\n      padding: 10px 0;\n    }\n\n    \/* Boutons\n    Le bouton principal s'affiche en blanc sur un fond bleu \n    *\/\n    button.primary {\n      color: white;\n      background-color: #007BFF;\n      border: none;\n      border-radius: 5px; \/* Ajout\u00e9 pour un effet arrondi *\/\n      padding: 10px 20px; \/* Espacement interne *\/\n    }\n\n    \/* Boutons secondaires - d\u00e9sactiv\u00e9 pour le moment\n    button.secondary {\n      color: black;\n      background-color: lightgray;\n      border: 1px solid #ccc;\n    }\n    *\/\n    <\/code><\/pre>\n        <\/figure>\n    <\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Ajouter des <strong>commentaires en CSS<\/strong> est une \u00e9tape essentielle pour organiser et documenter votre code. Non seulement cela am\u00e9liore la lisibilit\u00e9 et la maintenabilit\u00e9, mais cela facilite \u00e9galement la collaboration avec d&rsquo;autres d\u00e9veloppeurs. En suivant les meilleures pratiques de commentaire, vous pouvez rendre votre code plus compr\u00e9hensible et facile \u00e0 g\u00e9rer \u00e0 long terme. Continuez \u00e0 explorer et \u00e0 utiliser les commentaires pour maximiser l&rsquo;efficacit\u00e9 de votre d\u00e9veloppement en CSS. Pour plus de tutoriels CSS, consultez nos autres articles sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-interm\u00e9diaire-avanc\u00e9\/150\">les fonctionnalit\u00e9s interm\u00e9diaires et avanc\u00e9es de CSS<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-web\/144\" target=\"_blank\" rel=\"noopener\">\n        <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-web-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation D\u00e9veloppeur Web Offre 50%\" title=\"\">\n    <\/a>\n\n\n<p><!-- Ajout des liens internes --><\/p>\n<p>Apprenez \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\" target=\"_blank\" rel=\"noopener\">ma\u00eetriser les bases du langage HTML<\/a> et \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">cr\u00e9er votre premi\u00e8re page HTML<\/a>. D\u00e9couvrez tout sur les <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener\">\u00e9lements HTML Head<\/a> et les <a href=\"https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\" target=\"_blank\" rel=\"noopener\">\u00e9l\u00e9ments textuels en HTML<\/a>. Pour aller plus loin, voici un guide complet sur les <a href=\"https:\/\/wikiform.fr\/codespace\/feuilles-style-cascade-heritage-css\" target=\"_blank\" rel=\"noopener\">feuilles de style en cascade et l&rsquo;h\u00e9ritage en CSS<\/a>.<\/p>\n<p><!-- Ajout des liens externes --><\/p>\n<p>Pour plus de d\u00e9tails sur les commentaires en CSS, vous pouvez consulter la <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/\" target=\"_blank\" rel=\"noopener\">documentation de Mozilla<\/a>. D\u00e9couvrez \u00e9galement des pratiques avanc\u00e9es sur <a href=\"https:\/\/css-tricks.com\" target=\"_blank\" rel=\"noopener\">CSS-Tricks<\/a> et trouvez des blocs de code r\u00e9utilisables sur <a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p><!-- Ajout de la banni\u00e8re de formation --><\/p>\n<div style=\"text-align: center; margin-top: 30px;\"><a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><br \/><img decoding=\"async\" style=\"max-width: 100%; height: auto;\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Formation HTML et CSS 50%\" title=\"\"><br \/><\/a><\/div>\n<p><br \/><br \/><br \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Ajouter des Commentaires en CSS est une pratique essentielle pour documenter et organiser votre code. Cela permet non seulement de rendre votre CSS plus lisible,&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2696,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5341"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5341\/revisions"}],"predecessor-version":[{"id":6032,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5341\/revisions\/6032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2696"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}