Recherche avancée

Sur d’autres sites (5790)

• Anomalie #4623 : Styles des fieldset dans l’espace privé

  18 avril 2021

  Bon stop (ou pas) !

  Il semble que les blocs fieldset ne peuvent pas parfaitement se styler seuls. Manifestement c’est assez récent que les navigateurs acceptent un display:flex; dessus par exemple.

  J’ai fait quelques tests en partant du formulaire de préférences des menus (tiens d’ailleurs ce formulaire a des div.editer sans div.editer-groupe parent (à corriger !)
  Il contient un fieldset + .editer-groupe.deux_colonnes (columns : 2)

  Ce que j’ai testé (sous macOS avec FF, Safari, Chrome & Opéra) : la formule suivante (enlever le .editer-groupe interne et le monter sur le fieldset)
  

  <span class="CodeRay"><span class="tag">fieldset</span><span class="class">.editer-groupe</span>
      <span class="tag">legend</span>
      <span class="tag">div</span><span class="class">.editer</span>
      <span class="tag">div</span><span class="class">.editer</span>
      ...
  </span>
  Télécharger

  1) Si on applique un columns: 2 sur ce fieldset,
  - Firefox & Safari : conservent le legend, passent le reste en 2 colonnes
  - Chrome & Opéra : ignorent et conservent donc un affichage 1 colonne.

  2) Si on applique un display: flex; flex-wrap: wrap sur ce fieldset
  - Tous : le legend est conservé comme tel
  - le reste passe effectivement en flex (permettant donc de mettre plusieurs .editer sur la même ligne)

  Déjà je suis étonné que Flex semble fonctionner, contrairement à ce que dit https://caniuse.com/mdn-html_elements_fieldset pour tous les Gecko. Et Edge aussi est indiqué en non fonctionnel.

  Donc du coup… je me dis que le .editer-groupe dans le fieldset à encore du sens stylistique.
  Ce qui pour le coup ne nous arrange pas forcément, mais ça évite aussi de casser un truc de plus dans cette structure html en le laissant.

  Donc du coup, on en reviendrait peut être à "fieldset.editer-section" ou "fieldset.editer-fieldset" ou "fieldset.fieldset" ou "fieldset" (sans rien)…
  J’utilise .editer-section ensuite (mais peut importe)

  A) fieldset.editer-section > div.editer-groupe¶

  (le plus proche de l’actuel je pense)

  <span class="CodeRay">  <span class="tag">div</span><span class="class">.editer-groupe</span>
        <span class="tag">div</span><span class="class">.editer</span>
        ...
    <span class="tag">fieldset</span><span class="class">.editer-section</span>
      <span class="tag">legend</span>
      <span class="tag">div</span><span class="class">.editer-groupe</span>
          <span class="tag">div</span><span class="class">.editer</span>
          ...
  </span>
  Télécharger

  B) fieldset.editer-groupe > div.editer-section¶

  L’autre possibilité si ça facilite vraiment le css, c’est d’inverser les classes (avec l’ennui principal de du coup devoir reprendre l’existant)

  <span class="CodeRay">  <span class="tag">div</span><span class="class">.editer-groupe</span>
        <span class="tag">div</span><span class="class">.editer</span>
        ...
    <span class="tag">fieldset</span><span class="class">.editer-groupe</span>
      <span class="tag">legend</span>
      <span class="tag">div</span><span class="class">.editer-fieldset</span>
          <span class="tag">div</span><span class="class">.editer</span>
          ...
  </span>
  Télécharger

  B) fieldset.editer-groupe.editer-section > div.editer-groupe¶

  Ou du doubler d’une autre classe

  <span class="CodeRay">  <span class="tag">div</span><span class="class">.editer-groupe</span>
        <span class="tag">div</span><span class="class">.editer</span>
        ...
    <span class="tag">fieldset</span><span class="class">.editer-groupe</span><span class="class">.editer-section</span>
      <span class="tag">legend</span>
      <span class="tag">div</span><span class="class">.editer-groupe</span>
          <span class="tag">div</span><span class="class">.editer</span>
          ...
  </span>
  Télécharger

  Mais dans ce cas là je trouve cela redondant (fieldset.editer-section me parait suffisant, si on doit effectivement mettre un classe css dessus)
  Le plus ennuyant est peut être de devoir annuler des styles CSS du .editer-groupe dans .editer-section > .editer-groupe ;

• Anomalie #4623 : Styles des fieldset dans l’espace privé

  18 avril 2021

  Dans quelle mesure Tcharles il y a besoin du .editer-groupe dans le fieldset.editer-surgroupe ?

  Et bien écoute, maintenant que tu le dis, je ne sais pas :)
  La sémantique de la balise fieldset et de la classe .editer-groupe est finalement la même oui, ton exemple semble plus logique.
  Des fois même si c’est pas bien, on n’a pas d’autre choix que de rajouter un conteneur pour faciliter ou permettre des choix stylistiques, mais là ça semble pas nécessaire.

  Je serais incliné à ajouter une classe complémentaire sur les fieldset.editer-groupe quand même, pour distinguer les « groupes avec légende » des « groupes lambdas ». Dans les CSS on peut certes se reposer sur la balise, mais ça simplifierait et serait un peu plus propre. Une déclinaison de .editer-groupe plus sémantique pour dire que c’est une variante ? Je mets « editer-groupe-xxx » dans l’exemple pour l’instant. Sinon la bonne vieille classe .fieldset.

  <span class="CodeRay"><span class="tag">form</span>
    <span class="tag">div</span><span class="class">.editer-groupe</span>
      <span class="tag">div</span><span class="class">.editer</span>
      <span class="tag">div</span><span class="class">.editer</span>
      ...
   
    <span class="tag">fieldset</span><span class="class">.editer-groupe</span><span class="class">.editer-groupe-xxx</span>
      <span class="tag">legend</span>
      <span class="tag">div</span><span class="class">.editer</span>
      <span class="tag">div</span><span class="class">.editer</span>
   
    <span class="tag">div</span><span class="class">.editer-groupe</span>
      <span class="tag">div</span><span class="class">.editer</span>
      <span class="tag">fieldset</span><span class="class">.editer</span>
        <span class="class">.choix</span> 
      <span class="tag">fieldset</span><span class="class">.editer-groupe</span><span class="class">.editer-groupe-xxx</span>
         <span class="tag">legend</span>
         <span class="tag">div</span><span class="class">.editer</span>
         <span class="tag">div</span><span class="class">.editer</span>
  </span>
  Télécharger

• Anomalie #4623 : Styles des fieldset dans l’espace privé

  18 avril 2021

  Je découvre les fieldset.editer qui sont des lignes pour les .choix, introduit assez récemment. Donc ça fait une option de plus à gérer.

  Dans quelle mesure Tcharles il y a besoin du .editer-groupe dans le fieldset.editer-surgroupe ? Est-ce que ça pourrait servir pour passer les champs .editer dedans en colonne (flexbox horizontal ?) sur certains fieldset ? (Je suppose qu’on en aurait pas besoin pour ça). Et donc que ça simplifierait si on met directement fieldset.editer-groupe

  <span class="CodeRay"><span class="tag">form</span>
    <span class="tag">div</span><span class="class">.editer-groupe</span>
      <span class="tag">div</span><span class="class">.editer</span>
      <span class="tag">div</span><span class="class">.editer</span>
      ...
   
    <span class="tag">fieldset</span><span class="class">.editer-groupe</span>
      <span class="tag">legend</span>
      <span class="tag">div</span><span class="class">.editer</span>
      <span class="tag">div</span><span class="class">.editer</span>
   
    <span class="tag">div</span><span class="class">.editer-groupe</span>
      <span class="tag">div</span><span class="class">.editer</span>
      <span class="tag">fieldset</span><span class="class">.editer</span>
        <span class="class">.choix</span> 
      <span class="tag">fieldset</span><span class="class">.editer-groupe</span>
         <span class="tag">legend</span>
         <span class="tag">div</span><span class="class">.editer</span>
         <span class="tag">div</span><span class="class">.editer</span>
         <span class="tag">fieldset</span><span class="class">.editer-groupe</span>
            <span class="tag">legend</span>
            <span class="tag">div</span><span class="class">.editer</span>
            ...
   
    <span class="tag">fieldset</span><span class="class">.editer-groupe</span>
      <span class="tag">legend</span>
      <span class="tag">div</span><span class="class">.editer</span>
      <span class="tag">fieldset</span><span class="class">.editer-groupe</span>
         <span class="tag">legend</span>
         <span class="tag">div</span><span class="class">.editer</span>
         ...
   
  </span>
  Télécharger

  Il me semble que dans ce cas on peut toujours différencier
  - un form fieldset.editer-goupe (racine) (du moins avec style minimums = div.editer-groupe)
  - d’un form .editer-groupe fieldset.editer-groupe (mélangé avec d’autres champs = style plus élaborés avec indentation)

  En fait ça me parait assez cohérent de dire "Un fieldset c’est un groupe d’édition" (.editer-groupe) la seule grosse différence est la présence du legend. (et éventuellement de la démarcation / indentation)