Propriétés CSS inline-block compatible multi navigateur
Ryan Doherty vient de nous pondre un hack permettant à la propriétés CSS inline-block d'être compatible sur la plupart des navigateurs actuels (Cross-Browser). Pour rappel cette propriété permet de donner un comportement de type "inline" à des éléments de type "block" .. pour l'exemple, c'est le comportement par défaut des images !
Par rapport a des éléments de type "block" mis en "float", inline-block permet un retour à la ligne systématique même avec des blocks de hauteur différentes (alors qu'en float un retour à la ligne vient buter sur le block de la ligne supérieur le plus haut) !
Des blocks de hauteurs différentes en "inline-block"
Des blocks de hauteurs différentes en "float"
On voit tout de suite les avantages de cette propriété !
Le hack
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
</style>
<ul>
<li>
<div>
<h4>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>
</div>
</li>
<li>
<!-- etc ... -->
</li>
</ul>
L'effet est ici appliqué aux éléments d'une liste et peut nécessiter quelques ajustements. Le rendu a été testé avec Firefox 2/3, Safari 3, Opera et IE 6/7
Moi il me tarde surtout d'avoir des navigateurs compatible CSS3 utilisé par 90% des internautes ! *Rêve utopiste*
-----
iTypo: thème Wordpress gratuit
Guide pour mieux gérer vos emails via gmail (multicompte, redirection, ...)
Comment réussir vos concours sur vos blogs ?
Brève Wordpress: 40 liens, thèmes, plugins et astuces en tout genre !
Bonsoir
Je n’ai qu’un mot : EX-CE-LLENT !!!
L’inline-block était jusqu’à présent une propriété qui manquait fichtrement à mes projets du fait de sa non compatibilité cross-browsers.
Je vais tester au plus vite de hack
@Cédric Attention qu’il y a quelques contraintes tout de même
en tous les cas, l’utilité d’un tel hack répond aux besoins d’un grand nombre de bloggueurs en tout genre
@bernard C’est clair
Super, je cherchais justement un truc dans le style….
A mort IE !!
Bonjour et merci pour cet article ! Pédagogique et concis
Nouveau venu dans le monde de WP (et franchement conquis) , je tombe sur ce site regorgeant d’infos , et cerise sur le gateau , l’auteur semble apprecier l’inline-block « cross browser » … j’aime
.
Cette technique , permettant des centrages horizontaux entre elements de tout types est applicable dans IE depuis qu’il est sensible au haslayout … autant dire qu’elle n’est pas nouvelle , souvent incomprise et délicate a mettre en oeuvre et a reproduire dans les autres navigateur de façon plus « standard » .
La regle -moz-inline-stack pour firefoxe 2 et inferieur , soufre d’un défaut … enfin pas vraiment , car elle stacks(empile) bien les elements les uns sur les autres , un élément enfant tampon supplémentaire déclaré en display block , servira de parent aux contenus en éliminant ce défaut .
Adieux les tableaux de mise en page ? … non , mais le display : table; pourra enfin etre utilisé a bon escient (quasi jamais en fait) .
Le display: inline-block; peut enfin intervenir dans les techniques de mise en forme , La disparition de IE7 , 6 et FF2 en fera une valeur sure d’ici peu
, du moins les alternatives , pour beaucoup complexes (ou assimilé a des bidouilles incompréhensibles) , a mettre en oeuvre n’auront plus lieu d’être , le reflexe « tableau » va pouvoir s’estomper peu a peu 
au profit d’un inline-block insouciant du type d’élèment a styler .
Enfin , bref , cet article me plait bien même si je trouve toujours que l’info est incomplete ( http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/#comment-189336 )
j’ai une énième fois tenté d’en expliquer le fonctionnement ici : (voir site mis en lien sous
Peut-être que ceci peut avoir encore un peu d’intérêt , de vielles version d’IE perdurent encore
…
Merci pour ce site , petite pépite à « bookmarker » ou mine d’or a explorer … pour un nouveau venu dans wp_ .
GC
Pour info, il y a un vertical-align:top qui a disparu ici par rapport à l’article original. Peut-être car il a été mis à jour depuis, mais sans celle-ci, perso j’avais des problèmes sous FF.
@Naoki
Bien vu ! Effectivement l’article original à été mis à jour, certainement en même temps qu’une nouvelle version de Firefox. Bref c’est corrigé, merci pour ta vigilance
Merci pour c’est trés astucieux !