18041 sujets

Questions générales et questions de débutants

Flexbox - display table ?

Bonjour Alsacréateurs et Flexmans Smiley cligne

Fini un premier site, je m’attaque à un projet plus ambitieux :
Un site vitrine - catalogue + (boutique-en-ligne, si j’y arrive, je viens de m’installer MAMP et j’ai lu tout le tuto OpenClasroom sur le php, à mettre en pratique... Smiley sweatdrop )

Je le voudrais responsive, je pense faire le gabarit avec FlexBox
(acheté le livre de Rafael, ça parait très clair et ça donne envie de foncer dedans !)

mais, interprété a partir de IE 10 si j’ai bien compris

Deux questions :
Y'a-t-il une alternative à faire pour les autres navigateurs.
Le site peut-être vu par des gens en Inde (c’est un éditeur spécialisé dans les philosophies orientales)
qui ne doivent pas avoir des navigateurs les plus récent.
Je pensais utiliser display table qui semble plus diffusé

ou faire deux versions, bonjour la maintenance Smiley rolleyes

Qu’en pensez-vous ? Smiley biggrin

(J'exclus les CMS Prestashop & Co qui serais sans doute plus facile, mais qui ne vas pas m’apprendre grand choses, et je ne trouverai jamais le modèle que je veux)
Modifié par Gropilou (14 Apr 2016 - 09:10)
Bonjour !

Gropilou a écrit :

Le site peut être vu par des gens en Inde (c’est un éditeur spécialisé dans les philosophies orientales) qui ne doivent pas avoir des navigateurs les plus récents.


Humh, ça c'est difficile à dire. D'après un article que j'ai lu, l'usage d'Internet est encore assez peu répandu en Inde et donc ils n'est pas sûr que ceux qui l'ont possèdent des navigateurs dépassés.

Smiley smile
Administrateur
Bonjour,

en Inde il doit y avoir des Chrome récents et des Opera Mini je suppose ? Ah non UC Browser et Android et Opera : http://gs.statcounter.com/#desktop+mobile+tablet-browser-IN-monthly-201503-201603

Une ressource toute récente pour émuler Flexbox sans Flexbox : Almost complete guide to flexbox (without flexbox)

display: table est compatible IE8+, c'est je pense suffisant pour de vieux navigateurs (IE6 et IE7 il faut vraiment vraiment vraiment oublier ; l'embêtant est plutôt les Android pas mis à jour)

Si tu tiens à te servir de flexbox, ce sera en effet pour IE10+ (ne pas hésiter un instant à se servir d'Autoprefixer sans quoi c'est l'enfer).
Un fallback peut combiner display; table, inline-block, les bons vieux flottants, etc : il y a plusieurs types de besoins en réalité. Sans Flexbox wrap, on peut avoir un pis-aller de bonne qualité, par contre le multiligne là Flexbox fait des choses qu'aucune autre technique ne fait. A priori je dirais que les flottants en sont proches (ou inline-block) mais adieu les alignements bien sûr.
Il y a un polyfill JavaScript pour flexbox mais pff ça va ralentir le chargement et surtout l'affichage ; à mon avis mieux vaut faire le deuil du pixel perfect sur les vieux navigateurs et afficher tout mais pas "bien".
Modifié par Felipe (11 Apr 2016 - 14:39)
Une suggestion : Pour les navigateurs anciens ou faiblards, Pourquoi ne pas prévoir une version "normale" et sur chaque page un petit lien chargeant une feuille de style minimaliste, un peu "mode texte" ?
On voit souvent les normes RFC affichées "brut de décoffrage".
Hyper moche, c'est sûr, mais pour le coup lisible et une feuille CSS des plus simple à maintenir. Smiley cligne
Une version FlexBox et responsive (si j’y arrive), ca c’est pour le plaisir de la faire, j’ai bien envie de mettre le nez là-dadans

et une version pour les IE8 et 9 display table – ça marche ? pour les vieux IE –

Comment fait-on pour cibler, je sais le faire pour les dimensions pas pour les versions de navigateur ?
Administrateur
Les classes conditionnelles étaient notre solution avec en début de code HTML le doctype puis 3 balises ouvrantes <html>, 1 seule étant vue par un navigateur donné (c'est un peu le but de l'astuce) : 1 pour .ie8 (ou .oldie), 1 pour .ie9 et les autre navigateurs - y compris IE10, IE 11 et Edge - prennent ça pour des commentaires HTML donc comprennent la 3e balise <html>, "la vraie".

Ensuite c'est intégration du site pour les navigateurs récents puis on fait le tour de ce qui ne va pas sur les vieux IE (en installant et lançant des machines virtuelles - VM - préparées par MS et trouvables sur http://modern.ie ) et correction via des règles écrasant celles existantes et dont les sélecteurs CSS commencent par .ieN (plus précisément dont le sélecteur est identique à celui qu'il écrase mais avec ".ieN(espace)" devant)
Modifié par Felipe (12 Apr 2016 - 13:55)
je ne sais pas quoi répondre
Comme d'habitude il y a un éventail de solutions avec leurs avantages et inconvénients.

Il me faut un moment de réflexion et de recherche d'information pour me décider.

Merci de vos commentaires
> Felipe pour l'émulation de flexbox sans flexbox me semble une bonne solution Mais à ce moment la on utilise plus flexbox
On ne va pas faire une version flexbox et une autre en conditionnel qui tente de faire la même chose

Dois-je comprendre qu'il vaut mieux pour l'instant tout faire avec des display table ?

Finalement le voici revenu à mon interrogation de départ Smiley ohwell
Modérateur
Tu as la possibilité de partir sur un gabarit de base en display:table (cassable via display:block pour les petites résolutions) et de ne mettre en oeuvre le flex pour certaine portion de contenus uniquement.

Si flex est implementé dans le navigateur, la valeur de display ou float appliqué aux enfants n'aura pas d'effet ... ton alternative pour les anciens en quelque sorte.

autre alternative:
 display:table;
 display:flex;/* si je comprends pas, bah , pas de reset et ce sera table ... si je suis IE6 ce sera le display par défaut de l’élément , etc ... */


La question est peut-etre plus : ai je besoin de flex, et où cela serait-il vraiment nécessaire ?

Toutes les valeurs de display sont valides (enfin presque ...run-in jeté dehors ... ) et peuvent cohabiter Smiley cligne


En fait, sans gabarit HTML, difficile de commencer à évaluer les pour et contre des valeurs de display à privilegiées
> gcyrillus

L'alternative me plait bien, merci bonne idée !

savoir si Flex est vraiment nécessaire ? sans doute non, mais c’était pour le plaisir d’explorer la b^te

comprend pas bien :
« Toutes les valeurs de display sont valides (enfin presque ...run-in jeté dehors ... )
et peuvent cohabiter »
Gropilou a écrit :

« Toutes les valeurs de display sont valides (enfin presque ...run-in jeté dehors ... )
et peuvent cohabiter »


'run-in' ne marche pas avec Firefox et 'contents' ne marche qu'avec Firefox... Smiley decu

Smiley smile
Sujet clos
Aller à