Recherche avancée

Sur d’autres sites (9134)

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

  19 avril 2021

  Je pense qu’il faut garder la règle un fieldset == un div.editer en plus gros.

  Oui, ça se tient aussi. Je crois avoir vu cette structure utilisée sur un form de la dist d’ailleurs.
  Pour les fieldsets on pourrait employer un nom qui rappelle que ça fait partie d’un .editer-groupe non ? Genre .editer-fieldset par exemple, au lieu de .fieldset tout court ?

  Je signale pour pas oublier et ne pas exclure cette possibilité que certains formulaires ont besoin de plusieurs .editer-groupe à la racine, avec des choses entre. Par exemple pour le multi il y a des .boutons au milieu du formulaire :

  form
    .editer-groupe
    .boutons
    .editer-groupe
    .boutons
  

  On peut imaginer aussi un formulaire qui aurait besoin en cours de route d’un groupe de saisies en 2 colonnes, donc de plusieurs .editer-groupe consécutifs :

  form
    .editer-groupe
    .editer-groupe.deux_colonnes
    .editer-groupe
  

  Et aussi entre le legend et le .editer-groupe d’un fieldset, la charte permet d’insérer des explications (et autres ?).

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

  18 avril 2021, par RastaPopoulos ♥

  À partir du moment où ya toujours un conteneur sous la legend, pour moi un fieldset n’est pas du tout comme un groupe, mais bien comme "une ligne de champ" (qui à l’intérieur peut avoir des choses multiples plus ou moins complexe, mais relativement à ses lignes sœurs, c’est au même niveau de les autres champs qui précèdent et suivent.

  Donc je vois plus ça comme ça
  

  form
    div.editer-groupe
      div.editer
      div.editer
      fieldset.fieldset (groupe racine)
        legend
        div.editer-groupe
          div.editer
          fieldset.fieldset (groupe imbriqué)
            legend
            div.editer-groupe
              div.editer
              fieldset.editer (faux groupe, champs radios)
                div.choix
      div.editer (autres champs après le groupe)
      div.editer
  

  Les vrais groupes (que j’oppose aux groupes de choix radios etc), ne sont pas des "editer-groupe" puisqu’ils en ont un intérieur exprès. Ils ne doivent pas être aux mêmes niveaux que les autres div.editer-groupe. Ils sont toujours au même niveau que les champs normaux div.editer. Ces vrais groupes sont comme des champs aussi, des gros champs complexes, comme des gros div.editer, bien au même niveau.

  Pour les styles, on style :
  - ".fieldset" : les styles communs aux vrais groupes + ce qui est propre aux groupes racines
  - ".fieldset .fieldset" : les styles propres aux vrais groupes imbriqués
  - "fieldset.editer" : les faux groupes de choix

  (ça peut être autre chose que .fieldset bien sûr mais l’idée quoi)

• 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 ;