Compatibilité de la propriété flex

Bonjour à tous,

la propriété flex est une mine d'or c'est clair, mais qu'en est-il des fallback pour les navigateurs qui ne la prennent pas en compte (ou partiellement) ? Quelqu'un aurait-il une info sur le sujet ?
Parce que c'est bien gentil le CSS3 et tout et tout, côté intégration on est ravi, mais des clients sous IE8 et autres papy du web ( et oui on prononce encore ce nom-là ) on en a encore quelques-uns.
Et que fait-on par ex, si je veux centrer verticalement un élément ? avec flex c'est du velours, mais comme ce n'est pas bien supporté encore je dois me tourner vers la propriété display:table-cell qui elle est bien supportée par les papys. Mais donc je ne peux pas utiliser display:flex en même temps ><
Donc, on ne peut pas utiliser flex tant que les besoins des clients sont sous les vieilles versions de IE c'est bien ça ?

Merci pour vos avis à tous.

Salut !
Sur le livre "CSS avancées - vers HTML5 et CSS3" de Raphaël Goetter (p149) j'ai trouvé réponse à ta quesiton Essaye de voir du coté de Flexie.js

Bonjour Eva,

Tu as déjà pu consulter cet article complet sur le sujet ?
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Il n'y a pas encore de fallback robuste et à jour, mais c'est prévu : https://github.com/doctyper/flexie

eviouchka a écrit :
Donc, on ne peut pas utiliser flex tant que les besoins des clients sont sous les vieilles versions de IE c'est bien ça ?

Oui.
Sauf si c'est pour un projet mobile ou Responsive, auquel cas tout est permis

Yoan a écrit :
Salut !
Sur le livre &quot;CSS avancées - vers HTML5 et CSS3&quot; de Raphaël Goetter (p149) j'ai trouvé réponse à ta quesiton Essaye de voir du coté de Flexie.js

Merci pour la mention

Malheureusement, Flexie.js, comme le dit l'auteur lui-même, est laissé à l'abandon depuis 2009 (cf. lien plus haut)
Modifié par Raphael (30 Jun 2014 - 12:18)

@Raphael et @Yoan merci pour vos réponses

@Yoan :
Sur le livre "CSS avancées - vers HTML5 et CSS3" de Raphaël Goetter

j'ai lu aussi , c'est mon livre de chevet
Mais ce qui m’intéressait surtout c'était le contournement en CSS.

@raphael : oui merci je l'avait lu cet " excellent article " !

J'ai une autre question c'est : dans quel cas est-il préférable d'utiliser flexbox plutot que display ou le combo height / line-height pour centrer verticalement ?
Parce que, si on excepte les problèmes de supports des navigateurs, on peut obtenir un même résultat avec trois propriétés différentes mais y a t-il une de ces propriété à privilégier dans tel cas plutôt qu'une autre ?

( il me semble avoir vu passer un jour un article de Nicolas Hoffmann sur la question mais je retrouve plus...)

Bah la réponse est souvent "ça dépend".

Ce n'est pas si simple, ça dépend du contexte et de toutes les autres contraintes.

"En général" :
- le combo "height / line-height" est limité aux textes sur une ligne car dès lors que le texte passe sur 2 lignes, le line-height énorme casse tout
- le combo "display: table-cell / vertical-align: middle" est une excellente solution, mais le modèle tabulaire a lui-même ses particularités et faiblesses (largeur dépendant du contenu, positionnement absolu limité, etc.)
- le combo "display: flex / align-items: center" est aussi une excellente solution, mais moins compatible

Si cela peut t'être utile ou te donner quelques idées, voici quelques semblant d'alternatives a quelque particularité de flex. http://codepen.io/gc-nomade/pen/sIgfA .

Cela peut vite tourner à la bricole ou a des casse-tête qui n'en valent pas forcement le coût.