Peut-on quand même utiliser le CSS ou le Javascript inline ?

Bonjour à vous tous,

Je sais qu'il est déconseillé de coder directement le CSS et le Javascript dans la page HTML, notamment pour les raisons suivantes :
1 - Maintenance difficile : lorsqu'on utilise du CSS ou du JavaScript en ligne, le code est directement incorporé dans la page HTML, ce qui rend la maintenance du code beaucoup plus difficile, car toute modification nécessite de toucher à chaque page individuellement.
2 - Réutilisation du code : en codant directement du CSS et du JavaScript dans la page HTML, on ne peut pas réutiliser ce code sur d'autres pages du site web autrement que par le copier/coller.
3 - Performances : les navigateurs web stockent en cache les fichiers externes CSS et JavaScript, ce qui permet aux visiteurs de les charger plus rapidement lorsqu'ils naviguent sur différentes pages et ainsi accélérer le chargement des pages HTML. Avec le code inline, les pages web sont plus lourdes.
4 - Séparation des codes : ne pas séparer la structure (HTML), la présentation (CSS) et le comportement (JavaScript) ne respecte pas un principe en développement qui veut que les codes soient distincts et appelés individuellement lorsque nécessaire, ce qui peut rendre le code source plus difficile à comprendre et à maintenir.
5 - Lourdeur du code HTML : l'ajout de CSS et de JavaScript en ligne peut augmenter la taille du code HTML, ce qui peut affecter négativement les performances du site et ralentir le chargement des pages.
6 - Compatibilité : certains navigateurs peuvent ne pas gérer correctement le CSS ou le JavaScript en ligne, ce qui peut entraîner des problèmes d'affichage ou de fonctionnement sur certains navigateurs.

A ces six points, je me demande si en plus le codage du CSS et du Javascript inline ne pénaliserait pas directement le SEO, en reléguant en queue de peloton les résultats des recherches naturelles des internautes ? L'un d'entre vous saurait m'éclairer ?

Cordialement,
Modifié par ObiJuanKenobi (27 Oct 2023 - 16:03)

Salut,
quittant juste mon problème, je réponds rapidement. N'ayant rien à ajouter sur ce que dit parsimonhi, je vais juste remémorer la discussion qui a eu lieu ici il y a environ une ou deux semaines sur le CSP (La sécurité des sites). J'avais bien précisé que quand on engage le CSP sur un site, le code inline pose des problèmes. Les règles CSP ne font pas de cadeau et le "nettoie" sans coup férir. On peut l'éviter en utilisant unsafe inline, mais on diminue alors le niveau de sécurité en introduisant une porte que l'on avait soigneusement fermée avant !
C'est la seule raison pour ne pas utiliser du code inline. Sinon, c'est parfois bien pratique et s'il n'y en a pas des tonnes, aucune importance. Et je ne m'en prive pas.
Tu pourrais pas m'aider sur mon cas
Modifié par Bongota (27 Oct 2023 - 17:14)

Salutation,

Je n'utilise pas de CSS inline (je n'aime pas ça). Cependant quelques affirmations posées ici mérites d'être infléchies :

ObiJuanKenobi a écrit :
1 - Maintenance difficile : lorsqu'on utilise du CSS ou du JavaScript en ligne, le code est directement incorporé dans la page HTML, ce qui rend la maintenance du code beaucoup plus difficile, car toute modification nécessite de toucher à chaque page individuellement.

2 - Réutilisation du code : en codant directement du CSS et du JavaScript dans la page HTML, on ne peut pas réutiliser ce code sur d'autres pages du site web autrement que par le copier/coller.

Dans l'absolu oui, mais en général les dev's qui font cela utilisent un compilateur côté front. Une seule et même base de code sera déployée sur toutes les pages configurées pour. Du coup zéro problème.

ObiJuanKenobi a écrit :
4 - Séparation des codes : ne pas séparer la structure (HTML), la présentation (CSS) et le comportement (JavaScript) ne respecte pas un principe en développement qui veut que les codes soient distincts et appelés individuellement lorsque nécessaire, ce qui peut rendre le code source plus difficile à comprendre et à maintenir.

Là encore, il faut comprendre que les dev's qui font cela ne s'amusent pas à faire des copier/coller pour leurs composants. Souvent ces dev's développent avec une approche composants (à l'inverse d'une approche document, les deux approches n'étant pas exclusives), ils utilisent un framework (par exemple React.JS) qui, au moment de la compilation, fusionne les données avec le CSS et le JS. Je parle bien ici de CSS inline (du CSS directement dans les tags HTML comme pour le framework Tailwind), non pas de CSS interne (avec des balises styles dans la page web.

ObiJuanKenobi a écrit :
6 - Compatibilité : certains navigateurs peuvent ne pas gérer correctement le CSS ou le JavaScript en ligne, ce qui peut entraîner des problèmes d'affichage ou de fonctionnement sur certains navigateurs.

Là, par contre, je ne vois pas...

drphilgood a écrit :
salut
moi je place le css de ce qui est au dessus de la ligne de flottaison en inline dans la page html, le reste dans un fichier css séparé.

Je ne comprends pas ce que tu veux dire par là.

Pour les autres, merci pour vos réponses.
Modifié par ObiJuanKenobi (28 Oct 2023 - 07:31)

J'ai abordé ce sujet parce que j'ai été amené réaliser un exercice particulier où je devais montrer que j'étais à l'aise avec toutes les balises HTML des tableaux. J'ai choisi de faire un tableau contenant les 140 couleurs web différentes supportées par tous les navigateurs, comme dans cet exemple de page Wikipédia : https://fr.wikipedia.org/wiki/Couleur_du_Web

Mais voilà, quand j'ai commencé à remplir les cellules de chacune des couleurs, je me suis rendu vite compte que j'allais faire au moins 140 fois un aller/retour entre la page HTML et la page CSS (il y a 140 couleurs différentes). Mais j'ai trouvé un moyen simple et rapide, celui d'utiliser l'attribut "style" directement dans la balise <td>, contenant la déclaration de la couleur de fond en valeur hexadécimale, au lieu d'une classe .coul déclarée dans une feuille de styles CSS.

Voici un exemple de mon travail :

<table class="tableau_couleurs marge_bas" style="color: white;">
                    <tr style="vertical-align: bottom;">
                        <td style="background: #FF0000;" class="marge_haut_tableau">Red #FF0000</td>
                        <td style="background: #FFFFFF; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">White #FFFFFF</span></td>
                    </tr>
                    <tr>
                        <td style="background: #00FFFF; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">Cyan #00FFFF</span></td>
                        <td style="background: #C0C0C0; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">Sylver #C0C0C0</span></td>
                    </tr>
                    <tr>
                        <td style="background: #0000FF; font-size: 1rem;" class="marge_haut_tableau">Blue #0000FF</td>
                        <td style="background: #808080; font-size: 1rem;" class="marge_haut_tableau">Gray #808080</td>
                    </tr>
                    <tr>
                        <td style="background: #0000A0; font-size: 1rem;" class="marge_haut_tableau">Navy #0000A0</td>
                        <td style="background: #000000; font-size: 1rem;" class="marge_haut_tableau">Black #000000</td>
                    </tr>
                    <tr>
                        <td style="background: LightBlue; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">LightBlue #ADD8E6</span></td>
                        <td style="background: #FFA500; font-size: 1rem;" class="marge_haut_tableau">Orange #FFA500</td>
                    </tr>
                    <tr>
                        <td style="background: #800080; font-size: 1rem;" class="marge_haut_tableau">Purple #800080</td>
                        <td style="background: #A52A2A; font-size: 1rem;" class="marge_haut_tableau">Brown #A52A2A</td>
                    </tr>
                    <tr>
                        <td style="background: #FFFF00; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">Yellow #FFFF00</span></td>
                        <td style="background: #800000; font-size: 1rem;" class="marge_haut_tableau">Maroon #800000</td>
                    </tr>
                    <tr>
                        <td style="background: #00FF00; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">Lime #00FF00</span></td>
                        <td style="background: #008000; font-size: 1rem;" class="marge_haut_tableau">Green #008000</td>
                    </tr>
                    <tr>
                        <td style="background: #FF00FF; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">Fuchsia #FF00FF</span></td>
                        <td style="background: #808000; font-size: 1rem;" class="marge_haut_tableau">Olive #808000</td>
                    </tr>
                </table>

Bien qu'il n'y ait aucune erreur dans le Validator HTML, je me demandais si cela était "catholique" de procéder de cette manière, sachant qu'il est déconseillé de coder du CSS directement dans la page HTML pour les raisons que j'ai évoquées en début de post. Et comme je suis toujours préoccupé par le SEO, je me demandais si le codage inline n'affectait pas également les résultats de recherches naturelles des internautes.
Modifié par ObiJuanKenobi (28 Oct 2023 - 07:52)

Jai trouvé cette source (en anglais) :
https://webmasters.stackexchange.com/questions/106360/is-a-huge-style-attribute-bad-for-seo#:~:text=Inline%20CSS%20and%20scripts%20are, makes%20rankings%20worse%20for%20it.
Elle dit que le CSS et le Javascript inline ne sont pas des facteurs de classement pour Google. La seule fois où le code est important pour le référencement, c'est s'il a un impact sur les performances. Pour le référencement, le code source de la page HTML doit être téléchargé complètement en 7 secondes. S'il est plus lent que celui de Googlebot, Google aggrave son classement.

J'ai aussi cet autre lien en anglais :
https://addmonte.co.uk/tips/why-not-to-use-inline-css#:~:text=Lack%20of%20Reusability%3A%20Inline%20styles, be%20duplicated%20on%20each%20page.
il confirme que le CSS et le Javascript inline n'affectent pas directement le SEO mais la lourdeur du code et le chargement long peut affecter leur classement et donc les résultats des recherches des internautes.

Cet autre lien (toujours en anglais) confirme que les robots d’indexation des moteurs de recherche peuvent mieux analyser et indexer le contenu lorsqu’il est séparé, ce qui permet d’améliorer l’optimisation des moteurs de recherche (SEO) et d’améliorer le classement dans les résultats de recherche.
https://reviewnprep.com/blog/the-benefits-of-separating-html-css-and-javascript-unleashing-the-power-of-web-development/

Encore un lien qui confirme que le code inline peut avoir un impact indirect sur le référencement s’il affecte les performances du site web ou l’expérience utilisateur :
https://www.quora.com/Do-inline-CSS-and-JavaScript-really-affect-a-site%E2%80%99s-SEO

Finalement, le CSS et le Javascript inline peuvent affecter le SEO !
Modifié par ObiJuanKenobi (28 Oct 2023 - 09:31)

Salut,

En lisant ton code HTML de ton tableau, mon commentaire est : peut mieux faire. ¹

Attention au piège de placer thead/tfoot/tbody aux bons endroits.


¹ au tableau ! (l'attribut sumary est obsolète lorsque tu utilises un doctype html 5)
Modifié par niuxe (28 Oct 2023 - 11:11)

ObiJuanKenobi a écrit :
Je ne comprends pas ce que tu veux dire par là.

Pour les autres, merci pour vos réponses.

le css qui concerne ce qui est au dessus de la ligne de flottaison est dans le head de la page html
le reste du css externe est servi plus tard et ne retade pas l'affichage

ObiJuanKenobi : La règle "font-size: 1rem;" peut être mutualisée dans un même fichier externe, ce serait mieux.

Dans la même idée, plutôt que d'utiliser une règle CSS, on peut utiliser plutôt une variable CSS qui fera le même boulot. Du coup notre HTML serait beaucoup plus propre et maintenable. Par exemple, cette portion de CSS inline extraite de ton code :

style="background: #00FFFF; font-size: 1rem;"

Deviendrait ceci :

style="--bg-color: #00ffff"

Et pour la feuille de style externe :

.tableau_couleurs marge_bas {
  font-size: 1rem; /* Pour cette règle, on évite de sur-spécifier inutilement en la ciblant sur un élément parent et commun à tous les td */
}

.tableau_couleurs marge_bas td {
  background-color: var(--bg-color, #000); /* On met une valeur par défaut pour la variable, sinon c'est le CSS inline qui prend le dessus */
}

Modifié par Olivier C (28 Oct 2023 - 21:36)

Merci Olivier C pour tes explications, je me doutais qu'on pouvait utiliser des variables dans les CSS mais je ne parviens pas à trouver dans MDN. Aurais-tu le lien à me donner pour que j'aille voir ?

drphilgood a écrit :


le css qui concerne ce qui est au dessus de la ligne de flottaison est dans le head de la page html
le reste du css externe est servi plus tard et ne retade pas l'affichage

Qu'est-ce que c'est que la ligne de flottaison ?

niuxe a écrit :
Salut,

Attention au piège de placer thead/tfoot/tbody aux bons endroits

Quel piège ?
Il faut les utiliser ?
Sont-ils optionnels ?

ObiJuanKenobi a écrit :
A propos, est-ce qu'il existe un autre validateur HTML que celui du W3C ?

Enfin, il te suffit de taper "validateur html" dans n'importe quel moteur de recherche et tu en auras une pléthore. La première page de StartPage en affiche déjà 10. Celui du W3C étant je crois la référence.

c'est dans l'esprit du lazy download ou async, ne charger que ce qui est visible d'abord pour un rendu rapide

et puis le reste suit
Modifié par drphilgood (28 Oct 2023 - 19:08)

drphilgood a écrit :
c'est dans l'esprit du lazy download ou async, ne charger que ce qui est visible d'abord pour un rendu rapide

et puis le reste suit

OK, j'ai enfin compris ce que tu veux dire.