Bonjour à tous,

J'ai créé mon premier site internet et après avoir suivi le cours "Simplifiez vous le CSS avec Sass", j'ai voulu utiliser le pluggin Autoprefixer pour le rendre compatible avec tous les navigateurs. J'ai donc installé le pluggin en suivant le pas à pas du cours et après avoir mis à jour mon fichier package.js.son, j'ai lancé Autoprefixer. J'ai bien mon nouveau fichier CSS qui se crée à l'emplacement indiqué dans mon fichier package.js.son mais seulement voilà, lorsque je regarde mon fichier CSS autoprefixé, je me rends compte que le pluggin n'a quasiment rajouté aucun préfixe. Voici un extrait pour vous donner une idée : 

.footer__bloc-contact__adresse__img {
  height: 20px;
  width: auto;
  margin-right: 2.5px;
}
.footer__bloc-horaires {
  margin-bottom: 55px;
}
@media all and (max-width: 1024px) {
  .footer__bloc-horaires {
    margin-bottom: 10px;
  }
}
.footer__bloc-horaires__liste {
  margin-left: 10px;
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
}

J'ai parcouru le fichier et j'ai l'impression qu'Autoprefixer a a uniquement ajouté des préfixes pour les padding-inline... J'ai recommencé plusieurs fois mais ça donne toujours la même chose... 

Est ce que l'un de vous a déjà rencontré ce problème ?

Pour info, j'ai installé la version autoprefixer 10.4.0 et voici mon package.js.son : 

J'ai vérifié à plusieurs reprises les chemins d'entrée et de sortie indiqués pour le pluggin prefix sont bons... 

Ca fait des jours que je m'arrache les cheveux dessus, je ne comprends pas pourquoi ça merde ... alors si jamais vous avez une idée, je suis preneuse ! 

Merci d'avance pour votre aide !

Amélie

-
Edité par AbcAbc6 8 décembre 2021 à 19:39:46

Bonsoir j'ai modifié le titre de votre sujet, en effet "Help please :)" n'a rien à y faire, si vous postez on se doute que vous avez besoin d'aide inutile de l'indiquer dans le titre cela n'apporte rien comme information quant au contenu du sujet.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

Bonjour,

tu aurais attendu quels préfixes ? margin, height et width sont standards depuis la naissance (ou presque) du CSS.

Et en vrai, si Autoprefixer n'ajoute pas beaucoup de préfixes, c'est bon signe, c'est que tu utilises du code éprouvé, et que tu évites les trucs pas finalisés ou difficilement compatibles (parce que oui, les préfixes propriétaires c'est pas magique, il faut que ça soit implémenté dans les navigateurs).

Bonjour Lamecarlate,

Merci pour ta réponse ! Je n'ai peut être pas choisi l'extrait de mon code le plus parlant mais ce qui m'étonne c'est qu'Autoprefixer n'ait pas mis de préfixe sur la propriété display flex or il me semblait que ce n'était pas standard... si ?

Merci pour ton aide 

-
Edité par AmelieLeMestre 9 décembre 2021 à 12:40:45

Pour flex, regarde : https://caniuse.com/flexbox - c'est standard, depuis un certain temps maintenant

Si tu veux des préfixes, c'est pour IE10, Firefox 2 à 21, ou Chrome 4 à 28. Or ta config d'Autoprefixer prend en compte les 4 dernières versions, donc, à ce jour Firefox 97 et Chrome 99. Pour IE, c'est en effet surprenant, mais il se peut qu'Autoprefixer considère Edge comme la même chose que IE. Regarde dans la doc d'Autoprefixer pour la syntaxe de browserlist - je ne la connais pas.

Voilà qui explique tout, merci beaucoup pour ton aide !!

Si tu te poses des questions sur la compatibilité, avec et sans préfixes, n'hésite pas à consulter CanIUse, qui compile tout plein d'infos. C'est mon site de chevet