28172 sujets

CSS et mise en forme, CSS3

[Résolu] Regrouper h1, h2, h3…

Bonjour à tous

Je cherche à minimiser mon code css sur certains points, dont celui-ci :

h1::before, h2::before, h3::before, h4::before, h5::before, h6::before{
	/*contenu css*/
}


j'ai bien pensé à @extend, mais c'est encore plus long…

N'y aurait-il pas une possibilité du style Hn ou H suivi d'une pseudo-classe ?

Ou bien un regroupage du style (h1-h6)::before ?

Merci
Modifié par robert72 (02 Nov 2019 - 14:35)
Hello

J'utiliserais une classe, tout simplement, et l'ajouterais à tous les éléments (h1, h2 ou autre)

Par exemple:

.stylesHeadings::before{
  content: "text before: ";
  display: inline;
}
Meilleure solution
Merci, en effet c'est une méthode plus courte qui résoud le problème ^^

Pas de balise générique pour grouper les Hn en une seule entité CSS ? (pour ma culture perso, vue que la méthode proposée répond parfaitement à ma demande).
Sauf erreur de ma part, c'est impossible. Une classe est la seule solution que je vois.

Je vous laisse donc sélectionner la meilleure réponse, ainsi les autres lecteurs verront que votre problème est résolu.
Plus court en code CSS, certainement, mais plus long en code HTML (nom de classe répété à de multiples reprises dans le code HTML des pages), en développement comme en refonte (modification ou suppression du nom de classe).

De surcroit, il me semble qu'une des utilités (sinon un des rôles) du CSS est de déporter la complexité des pages web du HTML vers le CSS. En plus clair, mieux vaut une unique feuille de styles (chargée une fois) avec un code un peu plus lourd/complexe pour de multiples pages web avec un code HTML plus léger/simple.
Bonjour,

J'ai coché la meilleure solution, bien que je partage l'avis de Thierry.
Chaque jour que j'encode en html/css je me dis que le W3C est comme l'académie française… il met des années à voir ce qui est génant chaque jour.

Exemples : Pourquoi par défaut les navigateurs mettent la font-family en serif alors que 99.999% des sites sont en sans-serif, ça ferait gagner une ligne de code…
Pourquoi le centrage vertical est toujours t il exempt d'une solution toute prête en CSS ?
Pourquoi il n'existe pas une inclusion à la manière de PHP pour les Hn est un autre problème qui alourdit le code inutilement. Car contrairement à ce que disent les articles, sans feuille de style, depuis quelques temps sur beaucoup de navigateur H1 et H2 ne sont plus distingués (pas de retrait, pas de différence de 0.5em…). Plus j'avance dans le CSS (je l'ai pris au tout début) plus je me dis que la mise en page dans le flux, minimaliste à l'excès comme le site de Florent Verschelde https://fvsch.com/ est la seule solution tant le CSS passe à coté de la réalité du terrain depuis le responsive. Ce n'est pas pour rien que les newsletters sont encore en tableaux pour beaucoup tant le CSS est interprété différemment suivant les supports… donc finalement autant ne plus mettre en page…
Administrateur
Bonjour,

il n'y a pas de sélecteur pour tous les Hn en CSS.
Il y a pour info un sélecteur en jQuery :header qui est un raccourci bien utile (il y a aussi :input, :submit et :button) https://api.jquery.com/category/selectors/

Je plussoie très fortement l'utilisation de classes HTML pour ensuite pouvoir cibler les éléments en CSS : les méthodologies SMACSS, BEM, ITCSS, etc s'appuient là-dessus et d'expérience ça évite de devoir écraser encore et encore les mêmes styles malencontreusement déclarés sur des éléments… H2 est en #323232 sauuuuf dans 6 cas, les liens sont toujours soulignés sauf… partout où on a besoin de les styler (navigation, etc en fait y a que dans le contenu que là oui il faut les souligner).
Sujet clos
Aller à