28133 sujets

CSS et mise en forme, CSS3

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;
Modérateur
Hello,

Utilisation du signe pourcentage ? Esperluette suivie d'une espace ?
Modifié par niuxe (27 May 2024 - 08:01)
Modérateur
pourcentage :


%licences-tutos-1-ligne {


esperluette avec une espace

& .titre
@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***...

@schtroumph : c'est le cas ?

___
*** Il y a ça en Stylus et, il me semble, sur Sass aussi.
Modifié par Olivier C (27 May 2024 - 13:14)
Modérateur
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)
Pour le pourcentage je viens d'aller voir pour Stylus, en fait il s'agit d'accolades, j'avais oublié.
Par exemple, en Stylus :
// cet ensemble de règles :
_rangeBlockThumb =
  pointer-events: auto
  width: _rangeSize1
  height: _rangeSize1
  background-color: saturation(_rangeColor5 - 10%, 80%)
  border: .2em solid var(--color)
  border-radius: 50%
  box-shadow: _shadow6

// pourra être appelé ainsi plus loin :
& :focus-visible::-moz-range-thumb
    {_rangeBlockThumbVisible}

Du coup, pour le pourcentage... peut-être un plugin PostCSS ?
Modifié par Olivier C (27 May 2024 - 15:05)
Non non, Joomla n'a rien à voir là dedans. Sûr.

Par contre j'ai trouvé l'histoire avec @extend et le pourcentage : pour ce dernier il s'agit d'un "placeholder".

Explication : historiquement, avec Sass, ont pouvait faire hériter à un sélecteur toute une série de règles CSS avec @extend + la classe "bloc de règles" concernée. Le problème c'est que la classe existait dans le code généré même si elle ne servait qu'à cela. Avec l'introduction du % Sass a supprimé cet inconvénient.

Il y a tellement longtemps que j'ai décroché avec Sass que j'avais oublié ce point.
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 ?
Là je sèche complètement. En l'état ce code devrait fonctionner.

Il y a forcément un truc qui interfère : ça donne quoi à la compilation ?
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.
Ah non, Joomla ce n'est plus supporté. Je te conseille avec bienveillance de te tourner vers Wordpress, Odoo, Drupal ou Spip. Hésite pas si je peux te diriger vers les bons tutos, je suis en plein dedans ! Bisous schtrounph, j'aime bien ton pseudo Smiley lol
Modifié par 2lwess (31 May 2024 - 12:25)
Cela ne fonctionne pas car les héritages avec @extend ne fonctionnent pas dans des media queries. Enfin en tous les cas ce n'est pas recommandé.
Modifié par Pedrothelion (06 Jun 2024 - 12:58)
Meilleure solution
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.