search

alsacreations / KNACSS

feuille de styles CSS sur-vitaminée
http://www.knacss.com
Do What The F*ck You Want To Public License
554 stars 116 forks source link

knacss 7.1.0 / grillade & problème de mise en page IE 11-12 #297

Closed simogeo closed 5 years ago

simogeo commented 5 years ago

Bonjour, Je viens de faire une mise à jour de knacss 6.x vers 7.1.0 ... et tout va bien sauf pour IE.

J'ai bien lu le chapitre consacré à Grillade : https://www.knacss.com/doc.html#grids Je pensais pouvoir faire une sorte de test conditionnel pour savoir quel système de grille renvoyer mais visiblement ça ne fonctionne pas. Il y a t'il un truc simple ?

Je suis surpris de ne pas trouver de thread similaire sur le sujet. Merci pour le retour.

simo

raphaelgoetter commented 5 years ago

Bonjour Simo,

Peux-tu me confirmer que ton bug d'affichage est provoqué par l'usage d'une grille ? ( car je ne suis pas sûr que l'emploi d'une grille soit justifié dans ce genre d'affichage)

Je pensais pouvoir faire une sorte de test conditionnel pour savoir quel système de grille renvoyer mais visiblement ça ne fonctionne pas.

Quel genre de test ? Les commentaires conditionnels ne fonctionnent plus depuis IE10 par exemple.

Il y a t'il un truc simple ?

Le plus simple, et le plus radical, est de se contenter de la version grille en Flexbox, qui devrait marcher partout, même sur le version 7 de KNACSS

J'attends de tes retours pour affiner.

simogeo commented 5 years ago

Peux-tu me confirmer que ton bug d'affichage est provoqué par l'usage d'une grille ? ( car je ne suis pas sûr que l'emploi d'une grille soit justifié dans ce genre d'affichage)

Oui, c'est bien pas l'usage d'un grille. En fait, autogrid n'est pas interprété par la version fex apparemment

Quel genre de test ? Les commentaires conditionnels ne fonctionnent plus depuis IE10 par exemple.

en effet, enfin, je le fais côté serveur en testant le navigateur. Du coup, je charge la version complète de knacss et si browser == IE 10 || IE 11 j'appelle aussi grillade-flex ....

Ca fonctionne à peu près, si ce n'est cette limite sur autogrid ... que j'ai remplacé par la classe grid pour avoir un résultat convenable.

pas moyen d'avoir un fallback directement dans knacss pour assurer la compatibilité ? AVec ce genre de hack ?

https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

Merci pour ton retour

raphaelgoetter commented 5 years ago

j'appelle aussi grillade-flex

Je pense que c'est un gros souci: Si tu charges grillade-grid et aussi grillade-flex, il y aura sans aucun doute des conflits car il n'est pas prévu que les deux cohabitent.

Si ton test fonctionne, il faut vraiment qu'il ne charge que l'une des deux versions.

pas moyen d'avoir un fallback directement dans knacss pour assurer la compatibilité ? AVec ce genre de hack ?

Ce serait possible en effet, mais... ne le prends pas mal... ce serait une énorme concession en terme de lourdeur de code (des media queries partout et inutiles pour 98-99% des visiteurs).

Je préfère conseiller de se limiter à la version Flexbox si la compatibilité IE est encore un point crucial.

simogeo commented 5 years ago

oui, oui, je comprends bien que tu ne souhaites pas gérer cela ;-) et ce serait dégrader la qualité et la maintenabilité de knacss.

Malheureusement, j'ai des clients qui souhaitent cette compatibilité avec IE .... dois-je nécessairemment compiler moi-même ou je puis-je directemenent remplacer le code CSS ? J'ai essayé mais ce n'était pas très concluant ...

A minima, il serait intéressant de fournir une version compilée -css minifié - utilisant flexbox, genre un fichier knacss.alt.css basé sur flexbox, non ?

Merci pour tes retours précieux.

raphaelgoetter commented 5 years ago

IE11 commence à être vraiment problématique, et clairement pas adapté à Grid Layout, même avec des outils comme Autoprefixer.

Si tes contraintes sont :

simogeo commented 5 years ago

Oui, IE a, durant son existance, toujours été problématique en fait ... ;-)

Je souhaiterai employer toute la grille, a minima avoir une version compatible IE. Je vais voir si je peux compiler. Je ne suis pas très familier de sass / gulp mais je suis tombé sur ce tuto !

Merci,

simogeo commented 5 years ago

Salut @raphaelgoetter, est-ce que ça veut dire que tu renonces à proposer une version compilée pour IE 10 ou c'est dans les tuyaux ? (Je dois reconnaitre que je n'ai pas pris le temps d'essayer de mon côté )

raphaelgoetter commented 5 years ago

Faire une version dédiée à IE10 est malheureusement une tâche qui me prendrait bien trop de temps, seul, pour une population qui avoisine aujourd'hui 0.13% en France et 0.07% dans le monde.

Je te propose donc, à défaut de meilleure solution, d'envisager l'option déjà évoquée : "d'employer toute la grille (Grillade) de KNACSS, et que tu peux compiler toi-même, il suffit de n'intégrer que la version du fichier .scss Flexbox"