Il y a déjà pas mal de temps que le célèbre langage HTML 5 est sorti (la dernière mise à jour majeure de la version 5 date du 28 Octobre 2014) et pourtant je suis certain qu’il doit bien rester des morceaux de « vieux HTML » un peu partout dans vos sites !
Vous vous dites qu’il est surement temps de faire le ménage dans vos codes et d’éliminer les vieilles balises HTML et leurs attribut dépréciés, mais comment faire ?
Dans cette tâche vous allez vous rendre compte que le CSS peut être un allié insoupçonné, qui vous fera gagner énormément de temps dans ce nettoyage de printemps, en mettant en évidence les erreurs ou les contenus obsolètes !
Habituellement utilisé comme un langage de mise en forme, le CSS associé au HTML sert à construire vos pages de contenus. Typographies, couleurs, cadres, fonds, de nombreux éléments HTML peuvent être personnalisés avec le CSS.
Procéder en plusieurs étapes
ATTENTION ! Utilisez cette méthode sur une version locale de votre site et non directement sur la version en ligne, sinon vos visiteurs risquent de tomber sur un véritable champs de bataille coloré.
- Dans un premier temps, créez une nouvelle feuille de style CSS, nommée par exemple
bug.css. - Intégrez cette feuille de style dans votre code HTML entre les balises
<head></head>via la balise<link href="adresse/feuilledestyle.css" rel="stylesheet"/>. Insérez dans la feuille de style ces lignes de code :
Ceci permettra de trouver visuellement dans votre site les balises conteneurs vides. Les balises vides apparaîtront avec une bordure jaune en pointillés.
div:empty, span:empty, li:empty, p:empty, header:empty, section:empty, article:empty, aside:empty, nav:empty, footer:empty{ padding: 20px; border: 5px dotted yellow !important; }Ceci permettra de trouver les balises qui ne sont pas totalement renseignées. Ces balises complétées pourront améliorer la compréhension de votre code par les utilisateurs et les moteurs de recherche. Les balises non complètes apparaîtront avec une bordure jaune.
img[alt=""], a[title=""], img[title=""], a[href=""] { border: 5px solid yellow !important; }Ce code CSS vous permettra de trouver les balises dépréciées depuis l’apparition du HTML5. Les contenus dépréciés apparaîtront avec une bordure rouge en pointillés alors que les balises contenant des attributs obsolètes apparaîtront quant à elles avec une bordure rouge.
acronym, applet, basefont, big, center, dir, font, frame, isindex, menu, s, strike, tt, u, input[type="button"]{ border: 5px dotted red !important; } *[rev], *[charset], a[shape], a[coords], img[name], *[longdesc], *[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start], *[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link],*[text], *[vlink], *[align], *[valign], *[hspace], *[vspace], ul[type], ol[type], li[type], object[archive], object[classid], object[codebase], object[codetype], object[declare], object[standby], hr[height], table[height], td[height], th[height], col[height], colgroup[height], pre[height], hr[width], table[width], td[width], th[width], col[width], colgroup[width], pre[width], *[border], a[target], table[cellpadding], table[cellspacing], table[frame], table[rules], td[axis], td[abbr], td[scope], td[nowrap], th[nowrap] { border: 5px solid red !important; }- Pour finir, vous pouvez ouvrir les pages web sur lesquelles vous avez ajouté cette feuille de style et c’est parti pour le grand nettoyage !
Inspiration: tilap.net – Sources : tutorialspoint.com / w3.org