Je viens de me retrouver sur cet article qui montre comment faire des colonnes avec float et de palier au problème du clear:both sans toucher au HTML. La solution retenue — quoiqu’invalide CSS — est élégante… si on retourne en 2009 !

Car pourquoi utiliser des flottants ?

Utilisez Flexbox plutôt !

Non seulement vous n’aurez pas besoin de hack comme ça, mais en plus vous aurez la possibilité de faire des colonnes de la même hauteur.

Je n’ai rien contre float, mais son but est de faire sortir un élément de la structure de la page et de le faire flotter au dessus. À quoi ça sert d’utiliser float si on lui dit, avec clear, de se remettre dans la page ?
Autant ne pas utiliser float et choisir quelque chose de plus adapté, comme flexbox : c’est largement supporté.

Voyez le résultat ici : demo.
Et pour vous amuser, voilà un Flexbox playground, ainsi qu’un tutoriel en Français.

Je vous ferai aussi un article, bientôt, pour donner des exemples de choses possibles avec Flexbox.

(cet article est le deuxième dans la série « arrêtez d’utiliser les flottants alors qu’il y a mieux »)

15 commentaires

gravatar
clem a dit :

On peut egalement utilisé du display:inline-block

gravatar
Le Hollandais Volant a dit :

@clem : pour mettre les deux block côte à côte c'est faisable, mais pas pour ensuite les mettre à la même hauteur. Et inline-block ne s'assure pas que les blocs vont bien rester sur la même ligne si leur taille est dynamique.

Flex agit ici comme le ferait un tableau, en faisant en sorte que les deux blocs ensembles occupent 100% de la page, de façon dynamique et flexible et indépendamment l'un de l'autre.

Utiliser un tableau serait d'ailleurs aussi possible, mais les tableaux ne sont pas fait pour ça.

gravatar
Guenhwyvar a dit :
Autant ne pas utiliser float et choisir quelque chose de plus adapté, comme flexbox : c’est largement supporté.

Largement supporté depuis IE 11 et Firefox 38, c'est pas ce que j'appelle largement supporté… C'est bien pour les sites avec un public technophile, mais avant de voir ça sur le site de la Poste, y'a le temps.

gravatar
Thomas a dit :

Comme quoi il faudrait toujours faire de la veille ... merci pour cette info qui va m'être très utile !

gravatar
toto a dit :

Largement supporté c'est à moitié vrai: dans le monde des entreprises, on développe rarement pour les dernières versions des navigateurs... prend le cas de android par exemple, peu d'entreprises accepteront un site qui n'est pas compatible avec la v4.x et c'est pas chrome for android qui va aider... firefox 37 n'est pas si vieux... opéra 29 non plus, ...

gravatar
Le Hollandais Volant a dit :

@Guenhwyvar : faut regarder les parts de marché : caniuse indique que le support de flex (incluant le support avec les préfixes) est de 94%. J’appelle ça « largement supporté ».

@toto : tout dépend du public évidemment.

Pour ma part, un internaute qui utilise IE7 ou IE8 (ou même firefox 10, Opera 9…) constitue un danger pour les autres (nid à spam, à botnet…) et on devrait les pousser à mettre à jour.
À l’heure où tous les navigateurs sont gratuits et les mises à jour aussi, ne pas utiliser un navigateur à jour c’est un choix que je considère qu’il faut assumer soi-même. C’est pas au designer de l’assumer pour l’internaute.

gravatar
Stephanou a dit :

@Le Hollandais Volant : Bien d'accord avec ca. Surtout quand on voit le rythme effréné des nouvelles versions de navigateurs et que plus ca change plus c'est pareil, 6 des 9 problèmes connus de flex concernent le has been IE.

Par analogie, il y en a encore qui utilisent html5shiv ?

gravatar
toto a dit :

@Le Hollandais Volant : tu prends des cas extrêmes de versions clairement obsolètes (IE7, Opera 9) moi je parle du support de versions qui peuvent ne plus être supportées mais qui restent relativement récentes (j'ai pas vérifié mais firefox 37, opera 29 ont moins d'un an.

Il y a des tas de raisons qui peuvent expliquer quelques versions de retard (on a du restaurer une image, une politique de mise à jour rigide d'une entreprise lente à la détente, un problème qui est apparu dans une version plus récente et qui n'est pas encore corrigée, ...).
Et puis tu fais l'impasse sur les utilisateurs des versions ESR de Firefox (la version 31.x est encore supportée me semble-t-il).
Il y a aussi le cas des utilisateurs d'android qui ne se retrouvent forcés d'utiliser des versions obsolètes de l'OS parce que le constructeur et/ou l'opérateur ne distribue plus de mise à jour (ok on pourrait mettre une rom alternative ou installer un autre browser mais il y a des personnes qui ignorent cela).

Je suis d'avis qu'il est généralement plus important de privilégier l'accès à l'information en assurant une large compatibilité à l'adoption rapide de technologies. Évidemment il faut voir où placer le curseur (94% c'est vrai que c'est beaucoup) et l'audience visée.

gravatar
Le Hollandais Volant a dit :

@toto : Firefox 37 est moins utilisé que la version de Firefox sortie il y a une semaine (caniuse indique une utilisation de Firefox 37 de 0.23%…).

Voici les stats pour mon site, pour le mois d’août (donc sur 13 jours) : http://lehollandaisvolant.net/img/9e/firefox-usage-lhv-08-2015.png
En fait, Firefox 37 (1,1 %) est à peine plus utilisé que Firefox 5 (0,8 %). Je devrais supporter Firefox 5 aussi ? Non : je ne vais pas me lancer là-dedans.

on pourrait mettre […] un autre browser mais il y a des personnes qui ignorent cela

Bah maintenant ils savent :D.
Nan sérieusement : les systèmes se mettent à jour tout seuls et tous les grands sites indiquent un message quand l’internaute utilise un navigateur obsolète ou incompatible (Youtube, Google, Facebook aussi il me semble…). Avec tout ça, l’ignorance est un choix.

Je suis d'avis qu'il est généralement plus important de privilégier l'accès à l'information en assurant une large compatibilité à l'adoption rapide de technologies

Bien-sûr que tu as raison, mais si quelqu’un veut accéder à l’information, je trouve qu’il pourrait y mettre les formes. Tout comme on n’entre pas dans une bibliothèque avec les bottes pleines de boue, on devrait pas non plus utiliser un navigateur obsolète pour visiter un site web.

Pour un site important ou une entreprise, je sais bien que c’est inacceptable d’avoir une page web pourrie même pour 1 % des visiteurs, mais si le site est aussi sérieux que ça, je pense qu’ils peuvent se passer de tout le bling-bling du CSS3, ou bien proposer un mode fall-back ou afficher un pop-up incitant à la mise à jour.

Dans tous les cas il y a des compromis à faire. Perso, pour mes sites amateurs, je préfère utiliser une techno qui fonctionnera chez 94% des gens que me faire chier pendant 3 jours à débuguer du CSS ou du Javascript pour une question de compatibilité.

gravatar
Guenhwyvar a dit :

@Le Hollandais Volant :

En fait, Firefox 37 (1,1 %) est à peine plus utilisé que Firefox 5 (0,8 %).

Oh, y'a pire que moi :o
Je suis le Firefox 20.0 dans ton tableau, j'ai une ligne à moi tout seul o/

gravatar
toto a dit :

firefox 64 et 99... y'en a qui jouent avec le User-Agent on dirait ;-)
ce qui me fait penser... y'a pas quelqu'un qui a un bon article sur "device fingerprint"?

gravatar
Le Hollandais Volant a dit :

@toto : un article pas vraiment, mais des pages d’info, oui :
https://amiunique.org/fp
http://noc.to/

La première indique que c’est la combinaison de toutes les informations (navigateur, IP, taille de l’écran, présence de Flash/Java/AdBlock…) qui fait que votre empreinte est plus ou moins unique (et elle a de grande chances de l’être, vu le nombre de paramètres testés).

gravatar
toto a dit :

@Le Hollandais Volant : Merci pour les liens! J'avais déjà visité ce genre de site. Ce qui m'intéresse surtout ce sont les techniques pour s'en "protéger" (pour en atténuer l'efficacité sans que ça n'en devienne trop contraignant). Je me souviens avoir essayé (il y a longtemps) une extension Firefox qui permettait d'envoyer de faux attributs. L'idée était bonne mais l'implémentation l'était beaucoup moins car les attributs étaient changés aléatoirement et l’extension peu paramétrable.
J'avais participé à une discussion sur ce sujet et que plusieurs pistes avaient été évoquées (ne changer aléatoirement que certains paramètres qui n'ont pas un impact critiques comme par exemple l'ordre des polices ou des plugins, fixer la plateforme sur l'os le plus répandu au lieu de le changer aléatoirement, ajouter un système de whitelist et de désactivation temporaire, gestion des liste de valeurs des paramètres aléatoires, etc.
Je n'en entend plus jamais parler de ce genre d'extension (même si je vois qu'il en existe encore quelques unes), donc j'imagine qu'elles ne sont pas efficaces même combinées à d'autres bonnes pratiques (passer par un vpn, vider le cache, virer flash, java, utiliser des extensions style NoFlash, NoScript, de désactiver celle qu'on utilise très rarement, etc.)

gravatar
Le Hollandais Volant a dit :

@toto : a priori il faudrait trouver tous les paramètres les plus communs et les réunir :

- user agent,
- en-têtes http,
- presences de modules et plugins,
- etc.

Et trouver une combinaison qui ne soit pas unique. Ça peut être difficile à faire.

Désactiver JS est à mon avis un debut : une partie des informations est récupérée par JS. Ensuite, dans about:config de Firefox, tu peux modifier l'user-agent et les en-têtes http.

Le fuseau horaire et la langue du système importent également. En les modifiant sur une zone très peuplée, tu pourrais avoir plus de chances : langue US et Californie, par exemple, avec un Mac et Safari ou Chrome, pas de flash ni java ni silverlight et une taille d'écran typique d'un mac, ça devrait être une combinaison récurrente.

gravatar
s4tori a dit :

Dans les années à venir, on pourra compter sur les "Grid Layout", dont le travail sera plus spécialisé que FlexBox pour réaliser des grilles CSS.
Pour l'instant, "display: grid;" ne fonctionne que sur ... Windows 10 / Edge. :-D

Pour en revenir à FlexBox, il faut faire attention aux navigateurs qui se basent sur les anciennes spécifications W3C de Flex pour fonctionner. Par exemple sur les navigateurs Android <= 4.3, la propriété "wrap" n'est pas supportée. Il est donc impossible de faire passer automatiquement les blocs à la ligne suivante en mode "row".

Les commentaires sont fermés pour cet article