CSS imbriqués non conformes

[Bbahri]

Le fichier main.css contient des styles indentés... ce qui n'est pas interprétable par un navigateur, et pas conforme.

Il s'agirait d'utiliser un fichier .scss par exemple en lieux et place de celui-ci, afin de rendre des styles comme : .cookies {} interpretables.

[maximebochon]

Hormis quelques exceptions comme le Python, le Haskell ou le YAML, la plupart des langages et dialectes en informatique sont insensibles à l'indentation. En particulier pour le CSS, l'indentation ne pose aucun problème.

Peut-être voulez-vous parler d'autre chose ? d'imbrication ? ou de fonctionnalités CSS propriétaires ou trop récentes ?

Il y en a en effet, comme on peut le constater après analyse du CSS de production par Jigsaw, mais à vue de nez pas plus que sur la plupart des sites.

C'est commun d'avoir recours à des fonctionnalités propriétaires en CSS, souvent de manière cumulative avec le standard, pour des raisons de compatibilité avec d'anciens navigateurs, ou au contraire de faire appel à des fonctionnalités légèrement en avance de phase par rapport au standard, mais portant souvent sur des détails, comme par exemple text-decoration-skip-ink.

Quant à l'extension du nom de fichier qui pourrait être différente, je crois qu'ici c'est PostCSS qui est utilisé via Parcel, lequel accepte, au niveau des fichiers sources, les extensions .css, .pcss et .postcss.

[Bbahri]

Bonjour et merci @maximebochon pour le réponse. Je me suis mal exprimé et j'aurais dû être plus précis. Je voulais dire imbriqués pour indentés.

En effet il y a des styles imbriqués dans le fichier ./src/css/main.css

Les voici:

.confidentialite {
  .cookies {
    border-collapse: collapse;

    td,
    th {
      border: 1px solid #000191;
      padding: 8px;
    }

    @media (prefers-color-scheme: dark) {
        td, th {
            border-color: #A3A3FF;
            color: white;
        }
    }

    .header-row {
      font-weight: bold;
      color: #ffffff;
      background-color: #000191;
      text-transform: uppercase;
      text-align: center;
    }

    .name-col {
      font-weight: bold;
      padding: 8px 16px;
      color: #000191;
    }

    @media (prefers-color-scheme: dark) {
      .name-col {
        color: #A3A3FF;
      }
    }
  }

  .btn-wrapper {
    display: flex;
    justify-content: center;

    .btn-generateur {
      padding: 0.8em;
      font-size: 1.2em;
      font-weight: bold;
      color: #ffffff;
      background-color: #000191;
      border-radius: 0.5em;
      text-decoration: none;
      color: #ffffff;
    }

  }
  em {
    font-size: .8rem;
  }
}

Un fichier CSS ne devrait pas contenir de styles imbriqués.

• Soit ces styles doivent être modifiés, ex:

.confidentialite .cookies {
    border-collapse: collapse;
...
}

• Soit ce fichier devrait être un fichier .scss à transpiler avec un Bundler type Parcel, Webpack ou autre.

Bien à vous ;)

[Bbahri]

J'ai voulu pousser un correctif à l'instant mais je ne suis pas autorisé à ouvrir une PR / pousser une branche. Faut-il forker le projet pour ouvrir une PR ?

[maximebochon]

@Bbahri Concernant la procédure pour la pull request, je ne sais pas, il faut voir avec l'équipe du projet.

Concernant le sujet du fichier CSS, je cite ma première réponse :

Quant à l'extension du nom de fichier qui pourrait être différente, je crois qu'ici c'est PostCSS qui est utilisé via Parcel, lequel accepte, au niveau des fichiers sources, les extensions .css, .pcss et .postcss.

La doc' qui en parle est ici : https://parceljs.org/css.html

Et si on vérifie le CSS de production, on voit bien que la transformation a eu lieu :

https://media.interieur.gouv.fr/deplacement-covid-19/main.fc057723.css

.confidentialite .cookies {
  border-collapse: collapse
}

.confidentialite .cookies td, .confidentialite .cookies th {
  border: 1px solid #000191;
  padding: 8px
}

@media (prefers-color-scheme: dark) {
  .confidentialite .cookies td, .confidentialite .cookies th {
    border-color: #a3a3ff;
    color: #fff
  }
}

.confidentialite .cookies .header-row {
  font-weight: 700;
  color: #fff;
  background-color: #000191;
  text-transform: uppercase;
  text-align: center
}

.confidentialite .cookies .name-col {
  font-weight: 700;
  padding: 8px 16px;
  color: #000191
}

(l'extrait a été formaté pour faciliter la lecture)

[Bbahri]

@maximebochon Ok merci.

PostCSS accepte comme d'autres bundlers / minificateurs / transpileurs CSS de "processer" des fichiers CSS bien entendu. Mais toujours est-il qu'un fichier CSS ne devrait pas avoir de styles imbriqués. Et ce même si PostCSS est permissif sur ce point. Et ce, ne serait-ce que parce-que nombreux IDE afficheront des erreurs dans le code à ces endroits (comme le fait VSCode). De même que le ferait un linter sur ce projet sur cette partie du code. Ou comme le fait la validateur du W3C https://jigsaw.w3.org/css-validator/validator sur ce code.

Il s'agit là simplement de bonnes pratiques à mon sens.

Même si le plus important reste qu'un projet fonctionne il est vrai...

Beaucoup d'échanges pour quelques lignes de CSS cela dit ^^

Bonne journée Cordialement

[maximebochon]

Je n'ai pas vraiment d'opinion à ce sujet, mais je suppose que le développeur d'origine du générateur d'attestations (@nesk) a mis en place PostCSS et Parcel de manière standard.

Peut-être que l'extension .pcss éviterait ce problème et obligerait le développeur à recourir au module pour IDE prévu par PostCSS: https://github.com/postcss/postcss#editors--ide-integration

[nesk]

Pour ma part tout était codé à la main sans étapes de build, du CSS et JS pur, bien old-school. Je ne suis pas à l'origine de ce code là. 🙂