Si ya no se usa floats, ahora que?

ulisess · #1 (**permalink**) 23/12/2011, 00:30

Que tal, en el episodio de mejorando la web, se menciono que con html5 dejariamos de usar los floats para maquetar, que empezariamos a usar inline-block, pero no entiendo muy bien esto.
Si alguien tuviera un ejemplo se le agradeceria.

Gracias.

dual3nigma · #2 (**permalink**) 23/12/2011, 02:14

Hola Ulisess, Dejame adivinar quien dijo eso: freddier, es la clase de afirmaciones que suele hacer xD, para empezar con html5 (mas bien CSS3) no sustituiremos a los floats por display inline, sino por el flexible Box model. Mira este ejemplo:

Código HTML:

Ver original<!doctype html>
 
<html>
<head>
 
<style>
body {
display:-webkit-box;
}
 
div {
width:200px;
height:200px;
background:red;
margin:5px;
}
</style>
</head>
 
<body>
 
<div></div>
<div></div>
<div></div>
 
</body>
</html>

Prueba lo en cualquier navegador webkit, las cajas deberían salir "flotando" a la izquierda, con este método puedes elegir la orientación con "-webki-box-orient" que por default es horizontal, y tienes propiedades para que estas cajas se centren tanto horizontal como verticalmente: -webkit-box-pack: center, -webkit-box-align: center. Estas propiedades también admiten los valores "start" y "end" que hacen que las cajas se alineen a la izquierda o derecha, arriba o abajo. Juega un poco con los valores y veras, display inline es algo que todos hemos usado en algunos casos, por que no funciona en ie7, por ejemplo para los famosos menús listas horizontales, pero para nada sustituirán los floats. Espero mi explicación sea clara, sino pregunta y pongo mas ejemplos.

Saludos.

ulisess · #3 (**permalink**) 24/12/2011, 00:43

Muchas gracias dual3nigma, estaba leyendo al respecto y me sirvio de mucha ayuda ! :D

krimi · #4 (**permalink**) 28/12/2011, 13:37

y solo funciona para webkit?

dual3nigma · #5 (**permalink**) 28/12/2011, 18:20

Hola krimi, no funciona para todos los navegadores modernos, con sus respectivos prefijos:

-webkit-box
-ms-box
-mox-box

mariomon17 · #6 (**permalink**) 29/12/2011, 09:52

Yo creo que a lo que se refirio Freddy fua algo mas sencillo. Simplemente sustituir los float por display: inline-block. Que a parte de ser muy utiles, ahorran muchos quebraderos de cabeza.

Ademas: http://caniuse.com/#search=inline-block

Un saludo :)

hasdpk · #7 (**permalink**) 02/01/2012, 07:18

A lo mejor meto la pata, pero el -webkit, -moz o lo que sea, no es un estandar de HTML5 (que yo tenga constancia), así que yo suelo evitar usar ese tipo de cosas.

mariomon17 · #8 (**permalink**) 02/01/2012, 13:01

Los navegadores deciden cuando implementar directamente los estandares o Drafts de la W3C. Para indicar que no es algo definitivo se requiere -webkit- o -moz- pero no quiere decir que no sean estandares.

Si no utilizas eso, no se interpretaran muchas caracteristicas de CSS3, y aqui entramos en la famosa discusion de si es hora o no de usar HTML5 (como conjunto de tecnologias e innovaciones).

Un saludo :)

kseso? · #9 (**permalink**) 02/01/2012, 14:56

El uso más o menos temporal de los prefijos privativos suele deberse a dos razones:
1: los navegadores dan soporte a cierta propiedad adelantándose incluso a que haya una definición oficial del estándar (ya sea en el concepto, los valores o la sintaxis).
2: en lo que la implementan y la soportan completamente (una forma de cubrirse las espaldas si algo les falla. Así tienen la respuesta a mano: "es que estamos trabajando en ello").

Como anécdota:
Pasó (no se si ya se ha corregido) que el efecto logrado con border-radius, al declarar más de un valor numérico, era muy diferente dependiendo de si se declaraba primero el estándar o con el prefijo privativo.