1486 sujets

Web Mobile et responsive web design

[Résolu] KNACSS et IE10

Bonjour,

J'ai donc choisi KNACSS pour mes grilles et c'est bien chouette, mais j'aimerais quand même que l'affichage de mon site soit le même sous IE10. J'ai compris un peu tard que flexible-grid.css ne me serait d'aucune utilité en dessous d'Edge 16. Dois-je réécrire mes classes pour coller à flexible-flex.css? Bêtement, je pensais que la syntaxe serait la même... Et aussi, comment charger la bonne grille en fonction de la version d'IE, sachant que les commentaires conditionnels ont disparu à partir d'IE10?
Merci pour votre réponse.
Administrateur
Hello Transat,

Effectivement, grillade-grid.css est différent de grillade-flex.css : https://www.knacss.com/doc.html#grids

Il s'agit d'une différence de version majeure (KNACSS v7 = Grid Layout, KNACSS v6 = Flexbox)

De nombreuses classes ont été conservées cependant, comme en témoignent les deux cheatsheet ici présentes :
- https://www.knacss.com/assets/pdf/knacss6-cheatsheet.pdf
- https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf

"Dois-je réécrire mes classes pour coller à flexible-flex.css?"

-> Je ne peux pas répondre car je ne connais pas tes besoins : beaucoup plus de choses sont réalisables avec la version Grid Layout.

"Et aussi, comment charger la bonne grille en fonction de la version d'IE, sachant que les commentaires conditionnels ont disparu à partir d'IE10?"

-> C'est faisable, mais compliqué et je ne te le conseille pas. De toute façon il faudra adapter tes noms de classes également apparemment.
Le meilleur conseil que je puisse te donner si tu dois absolument réaliser une grille sur IE est de conserver la version Flexbox.
Tu peux également faire des adaptations à la main (pas besoin d'un framework partout après tout) en suivant ce récent tutoriel : https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html

Bonne chance !
Meilleure solution
Je vais conserver la version Flexbox et faire les adaptations de syntaxe nécessaire. Il s'agit d'un tout petit projet, ça devrait aller vite.

Merci Raphaël!
Modifié par Transat (16 Jul 2018 - 09:45)
Finalement, je renonce à la version Flexbox. La seule doc que je peux me mettre sous la dent est la cheatsheet et ça ne me suffit pas. Le taux d'utilisation d'IE10 paraît infinitésimal, mais quand même, je m'interroge sur votre choix d'avoir jeté aux oubliettes toute la doc concernant la version précédente...
Administrateur
Transat a écrit :
mais quand même, je m'interroge sur votre choix d'avoir jeté aux oubliettes toute la doc concernant la version précédente...


Il vaut mieux vérifier avant de dire du mal Smiley smile
Rien n'a été jeté aux oubliettes, tout est encore présent depuis la V1 sur Github : https://github.com/alsacreations/KNACSS/tree/6.1.2/doc

Je vais maintenant essayer d'expliquer notre positionnement dans l'agence :

1- Nos sites web sont accessibles sur tous les navigateurs, toutes générations confondues. c'est à dire qu'aucune technologie ne doit entraver l'accès au contenu (JS, Flash, etc.). Au pire, la page s'affiche sous forme textuelle brute.

2- Nous adaptons les designs aux différents périphériques. Cela ne choque personne qu'un site ne s'affiche pas à l'identique entre un smartphone et un desktop. Cela s'appelle le responsive.

3- Dans la même logique, il nous paraît aberrant de tenter d'adapter des technologies modernes sur des navigateurs anciens qui ne les supportent pas. nos sites web s'afficheront dont "à la hauteur" des capacités du navigateur rencontré et certainement jamais au pixel près. Cela s'appelle l'amélioration progressive.

J'espère que tu comprendras notre point de vue Smiley smile
Modifié par Raphael (16 Jul 2018 - 12:19)
Je comprends tout à fait votre point de vue, pas de problème.

Mais je ne suis pas familier de Github, et je n'ai absolument pas suivi le lien en haut de l'accueil de KNACSS. Au temps pour moi, donc.

Du coup, le chapitre concernant les grilles dans la doc de la v7 m'a un peu désorienté. Je cite: «Ainsi, il est possible, en Sass, de remplacer le fichier importé "grillade-grid.scss" par l'ancienne version "grillade-flex.scss" pour assurer un support jusqu'à IE10 minimum.» C'est tout ce que j'ai trouvé. Un lien vers la doc des anciennes versions et/ou quelques infos au sujet du changement de syntaxe à cet endroit m'auraient un peu aidé. Mais je suis probablement le seul.
Modifié par Transat (16 Jul 2018 - 14:59)
Administrateur
Transat a écrit :
Mais je suis probablement le seul.

Par principe de précaution, je pense que tu n'es pas le seul et tu as sans doute tout à fait raison. Je vais voir ce que je peux faire.
Sujet clos
Aller à