Baso la mayoría de mis opciones de diseño principales primero en el alcance del navegador, luego por requerimiento. Cuando digo “alcance del navegador”, lo que realmente quiero decir es “versión más antigua de IE que tengo que soportar”:
Mostrando cosas al lado del otro:
- IE7:
floats yclears - IE8–9:
inline-block,floats,clears - IE10 +
flex
Centrado vertical:
- ¿Qué es el sistema de identidad Asp.NET en un MVC?
- ¿Cómo puedo crear un sistema de publicidad como los anuncios de Facebook con PHP usando el marco Laravel?
- ¿Cuál es la diferencia entre CPanel y DirectAdmin?
- ¿Cuál es la mejor manera de practicar Javascript?
- ¿Cómo se puede pasar del desarrollo web (PHP) a un desarrollador de C ++?
- IE7–9:
inline-table;table-cell;table - IE10 +:
flex
Obtener cosas para ocupar espacio horizontal en función del contenido que está allí:
- IE7: selector de hermanos no adyacentes, organización del contenido
- IE8: selector de hermanos adyacentes, organización del contenido
- IE9: pseudo selector de locura
- IE10 +:
flex
Navegadores modernos
Si mi alcance es IE10 +, entonces tomo un enfoque muy diferente a esto
-
Float: cuando una imagen o medio necesita “flotar” en un flujo de texto (ya sabes … cómo se debe usar) -
inline-block: generalmente para botones o entradas; cosas que necesitan algo de relleno y margen, pero que no deben estar a nivel de bloque completo -
flex: contenido y diseños de nivel de componente. Sin embargo, trato de evitarlo para los diseños de página. Eso no significa que no lo haré … pero creo que flex no es realmente ideal en un escenario de diseño de página … por ser flexible, eso hace que sea difícil pedir contenedores rígidos. -
table: mesas. Solo mesas. Nunca otra cosa que no sean mesas.
