Ne comptez pas sur CSS, rendez votre site génial sans lui

Sommaire

Toggle

Résumé

• CSS n'est pas nécessaire pour les beaux sites; HTML fournit une structure et les navigateurs utilisent des styles par défaut appropriés.

• Concevez des pages Web en se concentrant sur la sémantique via des balises HTML appropriées.

• Utilisez un HTML minimal et validez le code pour des conceptions Web propres et robustes.

Vous savez peut-être déjà que CSS est une technologie vitale pour styliser vos pages Web. Mais vous n'avez pas besoin de l'utiliser et vos sites peuvent toujours être beaux sans lui.

Comment CSS et HTML travaillent-ils ensemble?

Si vous avez appris le Web il y a longtemps ou que vous vous êtes appris les bases, vous pouvez être habitué à utiliser HTML et CSS sans vraiment penser à ce qu'ils font.

HTML (Hypertext Buquup Language) est destiné au sens. C'est un langage descriptif que vous utilisez pour annoter votre contenu avec des balises comme p et tableau. Ces étiquettes définissent la structure et la sémantique du texte à l'intérieur:

        <p>
A simple paragraph
with <em>slightly emphasized textem>
and <strong>heavily emphasized textstrong>.
p>
    

CSS (feuilles de style en cascade) est une langue pour la présentation. Il spécifie le formatage de votre contenu, en utilisant des propriétés comme la taille de la police et la couleur:

        p { color: rgb(100, 100, 100); }
#advert { border-width: 4px; }

    

La séparation claire entre HTML et CSS apporte plusieurs avantages:

• Chaque format est plus propre et plus facile à lire que les deux combinés.

• Vous pouvez échanger les fichiers HTML et CSS indépendamment. Cela signifie que vous pouvez modifier l'intégralité de la conception de vos pages Web avec un petit changement, et vous pouvez utiliser une seule feuille de style pour appliquer le même design à de nombreuses pages différentes.

• Étant donné que de nombreux fichiers HTML peuvent faire référence à un seul fichier CSS, la redondance est réduite et les fichiers sont plus petits.

• Les experts en HTML ou CSS peuvent travailler avec la technologie qu'ils connaissent le mieux. Ce travail peut être effectué en parallèle, donc les projets plus grands peuvent être beaucoup plus efficaces.

Cette séparation signifie également qu'une page Web n'a pas besoin de CSS à afficher. En fait, à un moment donné, les pages Web n'utilisaient pas CSS. Un navigateur Web utilise des valeurs par défaut raisonnables pour afficher HTML en fonction de la signification de ses balises.

Par exemple, même sans aucun style explicite, un élément H1 a toujours une apparence par défaut. Parce que c'est la rubrique principale sur une page, il est logique qu'il soit grand et audacieux, avec un espace vertical approprié pour respirer:

Comment créer un site robuste en utilisant une amélioration progressive

Lorsque vous créez un design, il est important de garder à l'esprit la sémantique de votre HTML. Vous devez toujours utiliser la balise qui décrit le mieux votre contenu, quelle que soit la façon dont cela s'affiche dans votre navigateur. Si vous utilisez des balises appropriées, votre contenu doit au moins être lisible, même sans aucun CSS.

Vous pourriez penser que le CSS que vous fournissez sera toujours disponible, mais il y a des exceptions que vous devez répondre. Il s'agit notamment des problèmes de réseau à l'extrémité du client, des bogues du serveur ou de la mauvaise configuration, des bogues du navigateur (y compris dans les extensions) ou du visiteur décidant de désactiver CSS. Votre visiteur peut même utiliser un navigateur de texte qui ne gère pas du tout CSS. Envisagez également les utilisateurs malvoyants; Plus votre HTML et votre CSS sont indépendants, plus il sera facile de consommer votre contenu.

Par exemple, imaginez que vous avez un ensemble de paragraphes que vous souhaitez transformer en une liste de balles:

        <p>lorem ipsum dolor sit ametp>
<p>lorem ipsum dolor sit ametp>
<p>lorem ipsum dolor sit ametp>
    

Une approche consiste à utiliser CSS pour ajouter un caractère de balle au début de chaque paragraphe:

p:before { content: '• '; }

Cela ressemble à une liste de balles, donc tout apparaît bien à la surface:

Mais lorsque CSS est supprimé, un navigateur reviendra simplement à l'affichage d'un ensemble normal de paragraphes:

Bien sûr, dans ce cas, la solution est simple: utilisez la balise appropriée pour les listes de balles (ul) que HTML fournit:

        <ul>
    <li>lorem ipsum dolor sit ametli>
    <li>lorem ipsum dolor sit ametli>
    <li>lorem ipsum dolor sit ametli>
ul>

    

C'est un peu plus compliqué que le balisage du paragraphe, mais ce détail supplémentaire apporte des avantages: votre HTML est désormais plus descriptif et communique le sens du contenu. En conséquence, un navigateur peut afficher votre page comme prévu, même sans CSS:

Vous pouvez toujours utiliser CSS pour modifier la conception, peut-être en utilisant un style de balle différent, en ajoutant un espacement supplémentaire ou en utilisant une police différente. Mais vous devez superposer ce style en plus de HTML propre et robuste pour fournir les meilleures bases possibles.

L'exemple ci-dessus est alambiqué, alors explorons un autre: les liens. Souvent, vous devrez inclure une série de liens sur votre page, peut-être comme un ensemble de références ou de liens dans un pied de page:

        <a href="#about">Abouta>
<a href="#contact">Contacta>
<a href="#jobs">Jobsa>
<a href="#terms">Termsa>

    

Par défaut, les liens s'affichent sous forme de boîtes en ligne, donc un long jeu s'affiche sur une ligne jusqu'à ce qu'il s'enroule:

C'est peut-être ce que vous voulez dans un pied de page, donc avec un petit CSS, vous pouvez réaliser le look que vous recherchez:

        a {
  text-decoration: none;
  background-color: #eee;
  color: black;
  padding: 0.5em 1em;
  font-family: helvetica;
  font-size: 150%;
  margin: 0 0.5em;
  display: inline-block;
}

    

Ce style de base fait que les liens ressemblent un peu à des onglets, avec des modifications de police, un fond et un espacement:

Cependant, sans CSS, la page sera rendu comme le bloc de texte à ligne unique d'origine, qui n'est pas particulièrement lisible. Si les liens ont plusieurs mots, ils sont encore plus difficiles à gérer:

L'affichage en ligne par défaut, l'espacement et la taille de la police font que ces liens se mettent les uns aux autres, ce qui les rend difficiles à distinguer en un coup d'œil. Cependant, ce problème peut être résolu avec plus de HTML sémantique:

        <ol>
<li><a href="#about">Abouta>li>
<li><a href="#contact">Contacta>li>
<li><a href="#jobs">Jobsa>li>
<li><a href="#terms">Termsa>li>
ol>

    

Maintenant, sans CSS, même la liste des liens plus longs est facile à lire:

Vous pourriez avoir besoin d'une ou deux règles CSS supplémentaires pour annuler le style de liste par défaut, mais il s'agit d'un petit prix à payer pour un HTML plus propre et une meilleure expérience de CSS.

Techniques pour Clean HTML et CSS

L'utilisation de HTML minimale et sémantique présente de nombreux avantages, au-delà de la simple puant vos pages pour accéder sans CSS. Les moteurs de recherche récompenseront souvent le balisage propre, et cela aide également les outils d'accessibilité comme les lecteurs d'écran mieux fonctionnent.

Apprenez à connaître les balises HTML

Familiarisez-vous avec le style HTML par défaut pour diverses balises. Ce projet GitHub est un bon échantillon qui comprend de nombreuses balises différentes. Vous pouvez afficher la page résultante pour voir son rendu par défaut.

Évitez les balises obsolètes

Quelques tags – comme fonte – sont de nature présentation, car ce sont des retenus de l'ère pré-CSS, alors qu'ils étaient le seul moyen de modifier la mise en forme des pages Web. Vous devez éviter ces étiquettes car elles sont purement stylistiques, sans valeur sémantique.

Valider votre code

Assurez-vous de valider votre HTML et CSS, en utilisant un service comme le validateur du W3C. Cela vous avertira des balises obsolètes et d'autres erreurs qui peuvent rendre votre HTML moins robuste.

Vous pouvez également utiliser un site comme puis-je utiliser, ce qui donne des détails détaillés sur la prise en charge du navigateur pour différentes étiquettes HTML et les propriétés CSS.

Testez vos pages sans CSS

Envisagez d'utiliser une extension comme le développeur Web, ce qui facilite l'activation et l'éteigne CSS. C'est un excellent moyen de vérifier à quoi ressemblera la version NO-CSS de votre site à la pression d'un bouton.

Vous pouvez également vérifier vos pages dans un navigateur de texte, comme Lynx, pour vérifier à quel point ils sont lisibles sans CSS.