28172 sujets

CSS et mise en forme, CSS3

@extend

Bonjour à tous !

J'ai besoin de votre aide concernant un point en Css
Je ne sais pas du tout vers quoi est censé mener @extend h4
J'ai eu beau chercher sur internet et je n'ai pas trouvé ma réponse...

Je cherche à modifier du code scss.css (modifier le font-size: 1.1875em) mais dans theme.scss.liquid et timber.scss.liquid je n'arrive pas à le trouver.

Quand je cherche dans le code sur theme.scss et timber.scss je n'arrive pas à trouver cette information (font-size: 1.1875em), je tombe uniquement sur celles-ci:

theme.scss: .h4 { @extend h4; }

timber.scss:
.h4 {
@extend h4;

Sauriez-vous à quoi correspond @extend h4 ? Vers quoi il doit m'amener ? Ou doit-je le chercher ?
J'ai beau chercher je n'arrive pas à trouver OU modifier le font-size pour qu'il corresponde aux données que je souhaite changer

J'ai cru comprendre que les données "em" correspondent à des "px" (du moins c'est equivalent)

Merci de votre aide,
Modérateur
Bonjour,

@extend h4 signifie qu'on récupère les styles définis pour la balise h4.

Dans ton cas, les balises de classe h4 auront les propriétés des balises h4.

Exemple :

Code css

h4 {color:red;}
.h4 {@extend h4;background:yellow;}


Code html

<div class="h4">Toto va à la plage</div>

Le texte "Toto va à la plage" sera écrit en rouge sur fond jaune.

Par ailleurs, les balises h4 ont par défaut une font-size qui est un peu plus grande que la font-size d'un texte "normal". Et comme il s'agit d'une valeur par défaut attribuée par le navigateur, c'est normal que tu ne vois rien dans le css.

Un font-size de 1em signifie que la taille du texte de la balise concernée sera de 1 fois la taille d'un texte "normal". Un font-size de 1.1875em signifie que la taille de la police de la balise concernée sera de 1.1875 fois la taille d'un texte "normal". Il est donc probable que la taille par défaut de la police de tes h4 soit 1.1875em (éventuellement il se peut aussi que ce soit défini ailleurs que là où tu as cherché dans ta page).

La taille par défaut d'une balise h4 n'est pas forcément de 1.1875em. Ça dépend des navigateurs.

La taille par défaut en px d'1em est souvent 16px mais pas toujours (ça dépend là aussi des navigateurs et aussi de la police utilisée).

Enfin, si une balise a une font-size de 1em et qu'elle est à l'intérieur d'une balise parente, cela signifie que la taille de sa police sera de 1 fois la taille de la police de sa balise parente (et non pas 1 fois de la taille par défaut de 1em).

Quoi qu'il en soit, pour modifier la police de tes éléments ayant une classe "h4" (par exemple 1.5em), tu peux écrire :
.h4
{
  @extend h4;
  font-size:1.5em;
}

Ça devrait fonctionner.

Amicalement,
Modifié par parsimonhi (19 Mar 2021 - 21:48)
Meilleure solution
Modérateur
Et l'eau,

@extend ==> nid à problèmes . Mieux vaut une bonne mixin et que celle ci soit rangée avec d'autres mixin.
Bonjour !


Merci beaucoup de votre réponse et pour votre aide, en effet ça a fonctionné!
J'ai ceci qui s'est rajouté suite au rajout du "font-size: 1,005em"
.ajaxcart__product-name, .cart__product-name {
    font-style: italic;

Etant donné que je ne voulais pas ce texte en italique, 
@include bodyFontItalic

J'ai remplacé "bodyFontItalic" par "accentFontStack" pour avoir une police 'normale'.

Est ce le bon moyen de procéder ? Ca fonctionne bien, mais étant donné que je ne peux pas être sûr des retombés de ce que je fais, je préfère vous demander confirmation.

Une petite question, du coup, serait il possible de remplacer:
.h4
{
  @extend h4;
  font-size:1.5em;
}

Par 
.h4
{
  @extend h4;
  font-size:24px;
}


? Du coup cela correspondrait à une taille de texte de la balise concerné équivalente à 1,5em si j'ai bien compris ?

J'ai également lus un peu partout des avis contradictoires sur la balise '@extend'...

Sauriez vous quelle manipulation je dois faire pour correctement mettre en forme le code que j'ai rajouté en fin de code du thème ? Je sais que cela ne changera rien, mais visuellement, c'est mieux!


Du coup les balises de classe h4 auront les propriétés des balises h4.
Dans ton exemple "Toto va à la plage" écrit en rouge sur fond jaune, ce sera cet extrait de texte écrit dans n'importe quelle partie du site qui aura ces propriétés ?
<div class="h4">Toto va à la plage</div>


Petite question qui vient de me revenir, j'aimerais éditer une fenêtre modale qui s'ouvre en grand et bouffe toute la page d'accueil. Cette fenêtre s'ouvre et place une sorte de fond blanc/opaque tout autour de la barre de recherche.
J'aimerais faire en sorte que ce ne soit qu'un petit onglet qui s'ouvre à coté de la loupe (recherche) sans flouter la page d'accueil durant la recherche.

En général quand je fais 'inspecter le code"/ (ctrl+maj+c) je n'arrive pas ) saisir cet encadré blanc, uniquement le texte centrale de recherche.

Evidemment je pense qu'il vous faudra plus pour m'aider... Mais si vous auriez quelques idées je suis tout ouïe !

Merci encore pour votre aide précieuse parsimonhi !
Modifié par Raphael92 (28 Mar 2021 - 23:09)
Modérateur
Bonjour,

Raphael92 a écrit :
J'ai ceci qui s'est rajouté suite au rajout du "font-size: 1,005em"
.ajaxcart__product-name, .cart__product-name {
    font-style: italic;

Impossible de savoir d'où ça vient sans savoir ce qu'il y a dans ton code.

Attention, pour les nombres décimaux, il faut mettre un "." et non pas une "," (1,005 n'est donc pas bon).

Raphael92 a écrit :
Etant donné que je ne voulais pas ce texte en italique, 
@include bodyFontItalic

J'ai remplacé "bodyFontItalic" par "accentFontStack" pour avoir une police 'normale'.

Est ce le bon moyen de procéder ?

Ce n'est probablement pas la bonne manière de procéder, mais impossible de savoir d'où ça vient sans savoir ce qu'il y a dans ton code.

Raphael92 a écrit :
Une petite question, du coup, serait il possible de remplacer:
.h4
{
  @extend h4;
  font-size:1.5em;
}

Par 
.h4
{
  @extend h4;
  font-size:24px;
}

Tu peux si tu te sens plus à l'aise comme ça, et en effet, ça sera peut-être la même taille de police, mais pas toujours loin de là.

D'une manière générale, tu ne devrais jamais avoir selon moi de px dans ton code css sauf pour les bordures et éventuellement dans certains cas s'il y a des images ou des vidéos.

Raphael92 a écrit :
J'ai également lus un peu partout des avis contradictoires sur la balise '@extend'...

Sauriez vous quelle manipulation je dois faire pour correctement mettre en forme le code que j'ai rajouté en fin de code du thème ? Je sais que cela ne changera rien, mais visuellement, c'est mieux!

@extend n'est pas du css mais du Sass. Et au passage ce n'est pas une "balise", mais plutôt une "règle". La mise en forme que tu obtiendras au final peut dépendre des outils que tu utilises pour éditer ton code. De plus, il n'y aura sans doute que toi qui manipulera ce code. Bref, tu fais comme tu le sens.

Raphael92 a écrit :
Du coup les balises de classe h4 auront les propriétés des balises h4.
Dans ton exemple "Toto va à la plage" écrit en rouge sur fond jaune, ce sera cet extrait de texte écrit dans n'importe quelle partie du site qui aura ces propriétés ?
<div class="h4">Toto va à la plage</div>

A priori, sauf instruction contraire ailleurs, ce sera tout texte à l'intérieur d'une balise ayant pour classe "h4", et non pas seulement le texte "Toto va à la plage".

Raphael92 a écrit :
Petite question qui vient de me revenir, j'aimerais éditer une fenêtre modale ...

Ouvre un autre sujet (et on ne comprend rien à ta question, il faudrait plus de détails).

Amicalement,
Sujet clos
Aller à