[Résolu] Un code CSS prends le dessus sur d'autres

Salut

J'ai une div présente dans plusieurs pages. J'ai remarqué que, sur des pages différentes, le placement des éléments étaient le même (je sais pas si mon explication est claire ). Pour ne pas dupliquer (voir tripler) le même code j'ai mis dans _declarations.scss les codes pour les différents placements :

%licences-tutos-1-ligne {

    grid-template-columns: 274px 95px 110px 95px 105px;
    grid-template-rows: 1fr;
    
        & .titre
            {grid-column:1; grid-row:1;}
        & .img-ccbysa
            {grid-column:2; grid-row:1;}
        & .plus-info-ccbysa
            {grid-column:3; grid-row:1;}
        & .img-lal
            {grid-column:4; grid-row:1;}
        & .plus-info-lal
            {grid-column:5; grid-row:1;}
          
        & .titre p:after {
            content:":";
            margin:0 0 0 10px;
        }
}

%licences-tutos-2-lignes {

    grid-template-columns: 268px 105px 105px;
    grid-template-rows: 1fr auto;
    
        & .titre
            {grid-column:1; grid-row:1 / span 2;}
        & .img-ccbysa
            {grid-column:2; grid-row:1;}
        & .plus-info-ccbysa
            {grid-column:2; grid-row:2;}
        & .img-lal
            {grid-column:3; grid-row:1;}
        & .plus-info-lal
            {grid-column:3; grid-row:2;}
      
        & .titre {align-self:center;}
      
        & .titre p:after {
            content:":";
            margin:0 0 0 10px;
        }
      
        & img {justify-self:center;}
      
        & .plus-info {text-align:center;}
}

%licences-tutos-3-lignes {

    grid-template-columns: repeat(2, 125px);
    grid-template-rows: auto auto auto;
    
        & .titre
            {grid-column:1 / span 2; grid-row:1;}
        & .img-ccbysa
            {grid-column:1; grid-row:2;}
        & .plus-info-ccbysa
            {grid-column:1; grid-row:3;}
        & .img-lal
            {grid-column:2; grid-row:2;}
        & .plus-info-lal
            {grid-column:2; grid-row:3;}
          
        & img {justify-self:center;}

        & .titre p:after {
            content:"";
            margin:0;
        }
      
        & .plus-info {text-align:center;}
}

Dans _contenu-modules-tutoriels.scss j'ai mis les codes correspondant à chaque page. Pour la page d'accueil c'est :

.page-tous-les-tutos .licences-tutos .custom {
    @extend %licences-tutos-1-ligne;
}

Je me suis attaqué au responsive (j'utilise l'outils de développement web de Firefox) de la premeire page :

@media (min-width:320px) and (max-width:599px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-3-lignes;
    }
}

@media (min-width:600px) and (max-width:1023px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-2-lignes;
    }
}

@media (min-width:1024px) and (max-width:1180px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-1-ligne;
    }
}

Et c'est là que ça foire. Sur toutes les largeurs d'écrans ce qui est pris en compte c'est :

@extend %licences-tutos-3-lignes;

J'ai pas compris ce que tu veux dire.

Olivier C a écrit :
@niuxe : l'esperluette c'est dans la logique du nested (mais elle est facultative). Par contre, le pourcentage, je ne sais pas. Peut-être que schtroumph utilise un préprocesseur (l'utilisation d' @extend le montre), le pourcentage symboliserait alors un blocs de code***...

___
*** Il y a ça en Stylus et, il me semble, sur Sass aussi.

Je sais pour l'esperluette. Normalement, c'est sans espace. Pour le %, jamais vu. J'ai vérifié dans la doc de sass, en css et même en less (où je suis une quiche). Pour moi, c'est faux (d'où ma réflexion).

niuxe a écrit :
Je sais pour l'esperluette. Normalement, c'est sans espace.

Non, ça dépend : l'espace signifie qu'il s'agit d'un élément enfant, si rattachement direct alors ce peut être une pseudo classe ou un état (&:focus, &:hover, &:active), voir une autre classe (&.active, &.current).

Je pioche dans mon code pour illustrer ces différentes perspectives (c'est du CSS pur, sans préprocesseur) :

.accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5em;

  & > * > :first-child {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* encore du code... */

    &:focus-within,
    &:hover {
      outline: none;
    }

    &::after {
      content: '\2039';
      margin-inline-start: auto;
      font-weight: bold;
    }

    & svg {
      margin-inline-end: 1em;
    }

    &:where(:focus-visible, :hover) {
      @media (hover: hover) and (pointer: fine) {
        color: var(--colorW);
        background-color: var(--color2);
        box-shadow: 0.5rem 0.5rem 2rem var(--colorAB25);
        animation: anim-accordion 0.1s ease-in-out;
      }
    }
  }

  & > * > summary {
    &,
    &:before {
      all: unset;
    }
  }
/* etc... */
}

Edit @niuxe : je sais pourquoi tu dis que "normalement c'est sans espace", parce que lorsque l'esperluette est facultative, par défaut il s'agit d'éléments enfants, alors nous ne sommes pas obligé de la mettre. Moi je la mets car ça me permet de faire la différence entre un : (& .une-classe) et un : (.une-classe &) sans surcharge cognitive (et au début du support c'était même obligatoire pour Chrome). De toute façon mon PostCSS se charge d’optimiser le tout si besoin.
Modifié par Olivier C (28 May 2024 - 08:49)

J'ai oublié de préciser que je suis avec Joomla 4, si ça peux aider.

Ok. Concernant mon probleme, pourquoi dans mon code responsive :

@media (min-width:320px) and (max-width:599px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-3-lignes;
    }
}

@media (min-width:600px) and (max-width:1023px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-2-lignes;
    }
}

@media (min-width:1024px) and (max-width:1180px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-1-ligne;
    }
}

C'est @extend %licences-tutos-3-lignes; qui prends le dessus quant on es sur un affichage au-dessus de 600px ?

Les codes fonctionnent, le placement des éléments se fait bien quel que soit le code.

J'ai fait deux tests.

- Test 01 : j'ai modifié la couleur du titre du bloc suivant la largeur (les codes ont été mis dans les mêmes fichiers). La modification est bien prise en compte suivant la largeur.
- Test 02 : j'ai mis le code complet et non celui avec @extend. Les placements, suivant la largeur, est bien prise en compte.

Ce que je comprends pas c'est que dans d'autres fichiers pour le responsive j'utilise @extend et ça fonctionne bien.

Ton message m'a fait me rappeler que j'ai un peu oublié de venir donner la solution ici. Elle m'a été donné dans le lien de l'autre forum. Comme tu le dis pas d'héritage avec @extend.
Merci pour ta réponse.