Diseño CSS sin ancho fijo

Question

No soy experto en CSS de ninguna manera; Lo sé hasta cierto punto pero no muy profundo; flotar y IE6 me hace llorar. Así que siempre estoy emocionado de ver qué puede hacer la gente con él.

Sin embargo, la mayoría de los ejemplos que veo usan dimensiones fijas. Según tengo entendido, esto se debe a que CSS es muy complicado y es mucho más fácil piratear cuando los elementos tienen ancho, especialmente en IE6.

Pero, realmente me gusta el ancho flexible. Y siendo así, no entiendo por qué está mal hacer diseño con tablas. Hay un libro llamado & Quot; ¡Todo lo que sabes sobre CSS está mal! & Quot; que explican cómo es bueno que ahora podamos hacer diseños de tablas con CSS con navegadores recientes ... pero, ¿no podríamos hacerlo todo el tiempo con tablas HTML? Sí, no es CSS y tal vez no sea tan limpio como el CSS puro ... pero, después de todo, el diseño de la tabla ES es lo que a menudo necesitamos, y si tenemos que elegir entre CSS hacky malvado para hacerlo y simple -pero-no-puro-suficiente tabla HTML, no entiendo por qué ninguna de estas opciones debe considerarse mala. KISS es algo bueno, ¿no?

¿O tal vez no lo entiendo y PUEDES hacer diseños similares a tablas en CSS, que funcionan en IE6, sin demasiado dolor en el culo? ¿Algún ejemplo de tales sitios?

ACTUALIZACIÓN: Sí, sé acerca de la separación de contenido y estilo. De hecho, soy fanático de DRY, SRP y otras cosas imprescindibles del diseño. Es por eso que realmente intenté hacer cosas en CSS; pero si es MUCHO más difícil y menos confiable que las tablas, de modo que incluso está escrito en libros como los mencionados anteriormente, ¿por qué esforzarse tanto? No digo que todo deba hacerse en tablas; pero si es realmente más fácil que CSS, ¿por qué debería preferir CSS a una solución simple y predecible?

Es decir, no digo que debas usar tablas siempre. Tenga en cuenta el diseño de la página maestra: es independiente y no afecta a otras páginas, puedo cambiar de CSS a tablas y volver en 20 minutos (de hecho, ya lo hice) sin ningún problema: ¿POR QUÉ debo seguir con CSS aunque las tablas son no hay daño?

ACTUALIZACIÓN: He encontrado que este es un muy buen resumen de lo que estaba tratando de decir: http://www.flownet.com/ron/css-rant.html . Y la discusión http : //rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments .

Para aquellos que estén interesados, aquí hay un artículo aún mejor: http://kv5r.com/ articles / dev / layouttables1.asp

Answer 1

Tienes toda la razón. No hay nada realmente malo en usar tablas para el diseño siempre que, para la accesibilidad, el orden de las celdas sea apropiado para la página. Personalmente, el ancho fijo es una degradación de la usabilidad mucho peor que las tablas para diseño.

Cuando use tablas para el diseño, asegúrese de usar los estilos width: 100%; table-layout: fixed (y <col> con un estilo width) para que los navegadores puedan diseñar la tabla correctamente desde el principio (que corrige uno de los tenía problemas de usabilidad en el diseño de la tabla), y para que no dependa de la suposición de ancho de diseño automático bastante pobre de IE.

Aunque ciertamente prefiero CSS para el diseño siempre que sea posible, y la mayoría de los diseños de sitios simples se pueden lograr de manera razonable utilizando solo CSS (especialmente ahora IE5 y su Modelo Quirky Box ha desaparecido), hay algunos casos en los que CSS no puede piratearlo y Las mesas pueden. Un caso común son las formas complejas de ancho de fluido.

El problema más importante es la falta de capacidad para decir cosas como width: 100%-10em para obtener una columna que tiene el ancho de la ventana gráfica menos un tamaño fijo para otra columna. Para los casos simples, puede solucionar esto con márgenes y un divisor de contenedor, pero una vez que comience a reordenar los elementos en su página y agregue varios contenedores solo para que el diseño CSS funcione, ya está mezclando la presentación con el contenido: no es realmente muy diferente de las tablas.

En el peor de los casos, terminas con esos tontos & # 8216; marcos CSS & # 8217; que requieren el uso de nombres de clase fijos y de anidamiento para especificar completamente el diseño dentro del marcado mismo. Esto no es mejor que las tablas en absoluto; Me resulta absolutamente gracioso que este retroceso desesperado a los viejos tiempos se considere una técnica de vanguardia de la Web 2.0.

CSS3 está trabajando en algunas alternativas interesantes a las opciones de posicionamiento actuales que pueden ser una día cumpla con la promesa de un marcado total y separación de diseño. Pero eso está muy lejos hoy.

Answer 2

Eche un vistazo a Yaml y Fluido 960gs . Ambos te ayudan mucho con diseños de navegador cruzado. Los diseños de tabla no son la respuesta y IE6 desaparecerá tarde o temprano.

Answer 3

Hay una razón por la cual las tablas HTML son malas para cualquier otra cosa que no sean datos tabulares. HTML es un lenguaje de marcado para el contenido de datos y, por lo tanto, debe contener agrupaciones de datos reales, no el diseño de esos datos. CSS está destinado a ser completamente para propósitos de diseño y estilo; De ahí su nombre. Por lo tanto, el CSS debe contener todo el aspecto de la página web, mientras que el HTML contiene la estructura de los datos; y nunca se encontrarán los dos.

Hacer todo en tablas es malo por alguna razón.

Debería considerarlo como la abstracción entre el estilo y el contenido y puede obtener un buen resumen desde aquí: http://www.alistapart.com/articles/separationdilemma/

También en respuesta directa a su pregunta, vaya a 'A List Apart' y busque en sus artículos. Describen el viaje que está por hacer aquí: http://www.alistapart.com / artículos / viaje /

¿por qué debería preferir CSS a una solución simple y predecible?

Eso es lo que estamos tratando de decir. Puede parecer más fácil a corto plazo, pero cualquier cosa que escriba será menos fácil de mantener y más difícil de editar en el futuro. Puedes ir y escribir una página web que parezca más fácil a corto plazo, pero realmente te estás apuñalando en el pie para más adelante cuando quieres hacer más. ¿Por qué no hacerlo bien la primera vez? (es solo una pequeña cantidad de esfuerzo extra realmente)

Answer 4

Solo porque el diseño CSS es un desafío para usted, eso no lo hace inferior a las tablas. Al afirmar esto, estás cometiendo una falacia lógica conocida como Falacia Relativista.

Una vez que comprenda completamente CSS, cómo usarlo y la mayoría de las diferentes peculiaridades del navegador, encontrará que es muy superior a las tablas HTML.

El marcado debe ser semántico. Es decir, debe describir con precisión el contenido que contiene. Eso lo hace legible por máquina (para SEO y otras aplicaciones). Las tablas para el diseño no son semánticas en absoluto.

La abstracción de diferentes capas ayuda a hacer que un sitio web sea mucho más fácil de mantener. Mantenga el contenido en HTML, el comportamiento en Javascript y la presentación en CSS.

Tienes razón en que CSS tiene sus defectos, sin embargo. Pero las tablas tienen muchas más, que son mucho peores.

Answer 5

La razón por la que no desea realizar un marcado que utiliza tablas como diseño es debido al desacoplamiento del diseño y el contenido.

Su marcado debe sentarse, por sí solo, como una descripción perfecta del contenido que contiene. Esencialmente, debe marcar sus páginas en html antes de tocar los estilos. Luego usaría CSS para modificar la forma en que se ve su marcado semántico por defecto.

El hecho es que su contenido web que está diseñando no es 'Datos tabulares': el marcado es para que lo lean las computadoras / bots, y los estilos son para que los veamos, mezclar los dos simplemente confunde uno o ambos fiestas, generalmente al costo adicional de mantenibilidad.

Answer 6

Aquí hay un escenario que encontré personalmente y que me gustaría compartir. Nota: No estoy abogando por & Quot; no-table-at-all & Quot ;, se trata de entregar otros requisitos.

He creado un formulario (flujo visual de arriba hacia abajo):

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

Entonces el cliente quería un tubular más estructurado como este:

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

Como no estoy usando la tabla del tipo TR TD, puedo convertir (casi) la estructura fácilmente mediante modificación CSS y cambios menores de marcado HTML.