Résoudre les problèmes de YUI Reset CSS : Comment garder votre <em> en italique et votre <strong> en gras

Lorsque vous travaillez en développement web, vous pouvez vous retrouver à utiliser le Reset CSS de YUI pour avoir un point de départ cohérent sur les différents navigateurs. Bien que cela puisse être bénéfique, cela peut également conduire à des comportements inattendus dans le formatage de votre texte. Un problème courant survient lorsque le Reset CSS modifie les balises <em> et <strong>, ce qui empêche leur affichage tel qu’intendu.

Cet article de blog vous guidera à travers le problème étape par étape et fournira une solution claire pour que vous puissiez garder votre contenu web bien présenté.

Comprendre le problème

Le Reset CSS de YUI écrase le style par défaut des navigateurs, ce qui peut parfois conduire à des complications :

Que se passe-t-il ?

La ligne spécifique dans le Reset CSS de YUI qui pose problème est :

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

En conséquence, les balises <em> et <strong> perdent leur formatage par défaut :

• Les balises <em>, qui doivent être en italique, apparaissent comme un texte normal.
• Les balises <strong>, censées être en gras, s’affichent également avec un poids de police standard.

Le conflit

Bien que vous puissiez manuellement réinitialiser le formatage de ces balises dans votre propre feuille de style en utilisant :

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

Le problème s’intensifie lorsque vous utilisez les deux balises ensemble. Par exemple :

<strong>Ceci est en gras, <em>et ceci est en italique, mais pas en gras</em></strong>

Ici, même si votre règle de style pour <strong> fonctionne, la règle de Reset CSS universelle réinitialise l’élément <em> et annule l’effet italique.

La solution

Pour vous assurer que vos styles personnalisés prennent le pas sur le Reset CSS de YUI, vous devrez ajuster vos règles CSS. Voici comment vous pouvez procéder :

Étape 1 : Remplacer avec spécificité

Vous pouvez augmenter la spécificité de vos règles de style comme suit :

strong, b, strong *, b * { 
  font-weight: bold; 
}

em, i, em *, i * { 
  font-style: italic; 
}

Cette modification garantit que non seulement les éléments <strong> et <b> sont stylés de manière appropriée, mais que tous les éléments imbriqués à l’intérieur d’eux conserveront également le même style.

Étape 2 : Forcer les styles avec !important

Si vous continuez à prendre en charge les anciens navigateurs comme IE7, vous devrez peut-être forcer vos styles en utilisant !important. Cela peut être fait comme suit :

strong, b, strong *, b * { 
  font-weight: bold !important; 
}

em, i, em *, i * { 
  font-style: italic !important; 
}

Étape 3 : Tester vos styles

Une fois que vous avez mis en œuvre ces changements, assurez-vous de tester vos styles à la fois dans des navigateurs modernes et anciens pour confirmer que tout s’affiche comme prévu.

Voici un exemple rapide à essayer :

Exemple CSS

/* Styles YUI */
address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
  font-weight: normal;
}

/* Vos styles */
strong, b, strong *, b * {
  font-weight: bold;
}

em, i, em *, i * {
  font-style: italic;
}

Exemple HTML

<strong>Gras</strong> - <em>Italique</em> - <strong>Gras et <em>Italique</em></strong>

Conclusion

En suivant les étapes décrites dans cet article, vous pouvez réussir à remplacer le comportement par défaut introduit par le Reset CSS de YUI, en gardant vos balises <em> et <strong> correctement stylées.

Si vous rencontrez des problèmes similaires à l’avenir, rappelez-vous que la spécificité et la directive !important peuvent être des outils puissants dans votre arsenal de stylisation CSS.

Bon codage !