Lo que no se puede hacer usando CSS

He visto bastantes respuestas en este sitio que recomiendan usar tablas para un diseño porque no se puede hacer usando CSS y Divs ... cuando en realidad es puede hacerse con un poco de ingenio.Lo que no se puede hacer usando CSS

¿Cuáles son los ejemplos de cosas que realmente no se pueden hacer?

El único con el que me he encontrado es alineando verticalmente una caja dentro de otra caja.

* Editar: supongo que estoy más interesado en los diseños inalcanzables utilizando CSS2

Fuente

2009-04-15 wheresrhys

No creo que su pregunta sea lo suficientemente clara, ¿está preguntando en general qué no se puede hacer solo con CSS o qué se puede hacer con tablas pero no con CSS? (¡en caso de que este último lea mi respuesta!) – roryf

Ambos, supongo, aunque principalmente el segundo. Es útil estar al tanto de lo que no se puede lograr cuando alguien le da un diseño para implementar y no está seguro si será engañoso o imposible. – wheresrhys

Alineación vertical de bloques o texto.
Contiene contenedores elásticos que se extienden al ancho de su contenido.
Tener varias "filas" con la misma estructura donde las "celdas" están sincronizadas en ancho en todas las filas.
Teniendo varias "columnas" sincronizan su altura (hasta la longitud del bloque de texto más largo).

Estas son necesidades de diseño bastante básicas que aparecen incluso en conceptos de diseño básicos.

Los problemas de celdas/columnas pueden resolverse con CSS si se tiene en cuenta IE8, pero pasarán muchos años hasta que se extienda (incluso IE7 en 2-3 años no ha alcanzado la cuota de mercado deseada).

En cuanto a "ingenio", no es tan bueno en el desarrollo de software. Los trucos que sus colegas y usted mismo después de un par de meses no podrán comprender, generalmente crean esa base de código que todos tienen miedo de tocar o determinan refactorizar/reescribir por completo.

Recuerde el principio de KISS. La manera más simple de hacerlo, más confiable funcionará.

Fuente

2009-04-15 09:29:35 User

Los contenedores elásticos pueden lograrse al flotarlos y especificar el ancho: automático, aunque si el contenido es texto, no va a envolver el texto hasta que la caja esté en su ancho máximo, por lo que tener contenedores elásticos al lado uno al otro para que en total no ocupen el ancho no es posible – wheresrhys

Su tercer y cuarto ejemplo creo que son posibles, pero solo agregando divs adicionales y utilizando la técnica de columnas falsas. El problema de las filas es mucho más complicado que una tabla, pero las columnas no son tan malas – wheresrhys

Además, estoy de acuerdo con el punto de ingenio y es cierto que a) CSS2, especialmente con problemas entre navegadores, requiere demasiado. b) parece haber una tradición mucho menor de comentar CSS que otros archivos de código – wheresrhys

colores de las filas alternas en una mesa sin manualmente (o con la ayuda de un guión) la asignación de estilos alternativos para cada fila.

Determine la posición de un elemento con respecto a otro. Por ejemplo, no puede usar CSS para determinar qué posición es una casilla en un grupo de cuadros flotantes que usan la misma clase. Sería bueno, por ejemplo, saber si una casilla es la primera casilla flotante, o la segunda, o la última.

Manija de viudas. Una viuda es una palabra que cuelga del final de un párrafo, que es una sola palabra que comienza en la última línea de un párrafo. Es un gran nono en el diseño de impresión, pero en el mundo de la web es difícil de controlar.

Fuente

2009-04-15 08:35:04

Se puede hacer con los selectores de CSS 3: http://www.w3.org/TR/css3-selectors/#nth-child-pseudo – Greg

¿Esto es algo que se puede hacer automáticamente usando solo tablas? ¿O son Javascript y a mano las únicas formas en que esto se puede hacer? –

Agregué algunas otras cosas. Ese css3 es bueno. No puedo esperar a que suceda. –

No se puede colocar una imagen en el centro exacto de una celda con el atributo de alineación. Se puede hacer con un poco de fuerza bruta.

Fuente

2009-04-15 08:37:23 Warrior

-3

No hay absolutamente nada que las tablas puedan hacer que CSS no pueda.

Parece que hay una idea errónea de que HTML & CSS debe ser fácil. No lo es Si te encuentras con ganas de usar tablas, entonces es tu CSS las habilidades que necesitan mejorar no la tecnología (aunque la tecnología, obviamente, tiene un montón de agujeros que podrían hacer con la mejora).

Fuente

2009-04-15 08:43:33 roryf

Su respuesta no tiene valor sin abordar las otras respuestas que describen contraejemplos. –

Esa respuesta debe ser escuchada por alguien que no ha intentado hacer un diseño profesional complejo para sitios empresariales. CSS simplemente se mantiene alejado. – User

@Mastermind Soy un profesional. Construí varios sitios web grandes usando CSS por completo. Qué sitio de 'empresa' es que no tengo ni idea. Algún día aprenderás. – roryf

La respuesta a esta pregunta depende de una serie de cosas:

Cómo compatible Qué se necesita para ser? La inclusión de IE6 disminuirá la capacidad de CSS puro; y
Cuánto de su sitio es de ancho fijo y/o de altura fija. Hay ciertas cosas en CSS que se vuelven difíciles, si no imposibles, en situaciones de ancho y/o altura variable.

El contenido lado a lado es un problema para CSS. Puede usar flotadores para esto, pero si la suma de anchuras excede el ancho del contenedor, los flotadores de cola caerán abajo. Las tablas son más capaces a este respecto, ya que presionarán las columnas donde sea posible para que las cosas encajen y las celdas nunca se dividirán en nuevas filas.

Centrado vertical que usted mencionó. Es trivial con tablas y difícil o imposible (dependiendo de la compatibilidad y alturas fijas o variables del contenedor y el elemento) en CSS puro.

Puede que también se esté refiriendo al contenido hover. IE6 solo es compatible con el: pseudo elemento de desplazamiento en los anclajes. Se requiere Javascript para ese navegador para: comportamiento parecido a un vuelo flotante.

Básicamente, si lo que necesita hacer se puede hacer de forma bastante trivial con CSS puro, hágalo. Si no, no te sientas mal si tienes que usar mesas a pesar de todos los fanáticos anti-mesa (y son fanáticos) saltando de horror.

Si quiere un modelo relativamente simple de este cheque Can you do this HTML layout without using tables?. Este es un problema de diseño conceptualmente simple que es trivial con las tablas y nadie ha publicado una solución que cumpla con los requisitos con CSS puro.

Fuente

2009-04-15 08:46:46 cletus

+1 para centrado vertical. ¡muy molesto! –

Yo diría que debería pensarse al revés: si una característica de diseño relativamente trivial necesita tablas para que funcione, entonces cambie el diseño ligeramente. La mayoría de tus usuarios ni siquiera lo notarán. Pero si usa tablas, una minoría significativa de usuarios, usuarios de lectores de pantalla, se sentirán confundidos. – wheresrhys

No estoy de acuerdo. El argumento está hecho "las tablas son para contenido, no diseño". Desafortunadamente, las deficiencias tanto en CSS como en su compatibilidad con navegadores no lo hacen tan cierto, por lo tanto, favor de CSS para el diseño, pero no se quite el pelo tratando de evitar el uso de una tabla si todo se vuelve demasiado difícil. – cletus

Suena obvio, pero no se puede cambiar el contenido con CSS, solo se puede usar para diseñar.

Fuente

2009-04-15 08:46:59

Es una hoja de estilo. Para eso está el HTML. También puede incluir contenido http://www.w3schools.com/Css/pr_gen_content.asp –

Técnicamente, puede usar el: after pseudoelement para insertar una imagen o texto. No estás cambiando el árbol DOM, pero actúa como lo hiciste. Por favor corrígeme si estoy equivocado. –

puede usar el contenido con pseudoelementos para cambiar el aspecto de las cosas en la página, pero está cambiando el aspecto, no el contenido. –

Elementos flotantes en varias columnas, donde el texto en cada celda puede expandir la altura del elemento, pero toda la fila siguiente debe presionarse hacia abajo si esto sucede.

--- --- --- 
|AAA| |BBB| |CCC| 
--- --- --- 
--- --- --- 
|AAA| |BBB| |CCC| 
| | |BBB| | | 
--- --- --- 
--- --- --- 
|AAA| |BBB| |CCC| 
--- --- ---

Fuente

2009-04-15 08:48:02

+1 Sobre el único ejemplo aquí que realmente es algo que las tablas hacen que CSS no lo hace. Por supuesto, CSS3 cambia eso ... – roryf

dependiendo del estilo de tus cajas, esto se puede lograr utilizando un div de compensación y la técnica de columnas falsas ... Creo que – wheresrhys

sí, pero no cualquier cantidad de columnas o estilos, como las tablas pueden hazlo facilmente –

"... cuando en realidad se puede hacer con un poco de ingenio."

¿Qué tal 'evitar la necesidad de ingenio' es algo que es difícil de hacer en CSS.

;)

Fuente

2009-04-15 08:51:36 izb

No creo en subir la votación por ser gracioso, pero si hubiera un botón "me hizo reír" lo haría clic en – wheresrhys

Creo que es un punto perfectamente válido. Aunque no soy un desarrollador de sitios web, incluso las cosas triviales necesitan mucha reflexión y experimentación con CSS. Las tablas tienden a ser mucho más indulgentes. –

¡tablas se deben utilizar para datos tabulares! Siempre debemos tratar de usar el HTML correcto para el contenido dado en el cual marcar. Así que no solo div (span, ul, li, dl, strong, em ... etc) Esto asegura que el contenido no solo se ve bien pero es correcto (por razones de SEO y accesibile)

Al no usar tablas nos permite transformar el contenido de una apariencia a la siguiente sin tener que cambiar el HTML, consulte Zen Garden

Por ahora, aunque con los navegadores actuales, se pueden hacer diseños de tablas CSS pero son complicados. Existen técnicas para resolver muchos de los problemas, el tiempo en el que están hechos global wrappers con imágenes de fondo, o positioning fixes ... donde ambos artículos también se refieren al uso de Javascript para mejorar progresivamente una página para obtener esas clases adicionales que pueda necesitar.

o, por supuesto, puede usar algo de XSL como software intermedio para ayudar a formatear si se procesa desde un CMS.

Fuente

2009-04-15 09:18:37 nickmorss

Sí, pero las tablas son más difíciles de ver bien, y al final del día, ese es el factor decisivo en HTML. – CurtainDog

ZenGarden es en última instancia primitivo. Cualquier diseño más o menos complejo requerirá la reorganización de todos sus divs y, en consecuencia, de la hoja de estilos. – User

pero el principio detrás de ZenGraden y el margen de descuento de CSS es que son abstractas, no siempre se requieren divisiones de reorganización si se considera que se manejan las cosas abruptamente y relativly, por ejemplo, mover la navegación desde la parte inferior del HTML hasta la parte superior del render para SEO/accesibilidad – nickmorss

Rory, creo que tienes toda la razón. La alineación vertical se puede hacer con la altura de la línea, y la creación de diseños en CSS realmente no es tan difícil. De hecho, es mucho más flexible cuando se usa posicionamiento absoluto/relativo y flotantes.

Las personas que todavía utilizan tablas para el diseño deberían actualizarse con los estándares actuales.

Continuando con el tema, con la aparición de CSS3 es difícil pensar en cosas que CSS no puede hacer. Manipulación de imágenes, manipulación de contenido, selectores avanzados, todo será posible. Pero si tuviera que nombrar una cosa, es que con CSS no puede (y no podrá) rotar los elementos.

Fuente

2009-04-15 11:50:03 SolidSmile

La alineación vertical de bloques no se puede hacer con la altura de línea - créanme que lo he intentado, y si miran varias otras preguntas en la pila desbordamiento hay muchas otras personas que lo han intentado y han fallado. ¡CSS3 será increíble cuando es ampliamente compatible! – wheresrhys

No pude usar una transparencia para crear un área de texto de altura variable en todas las páginas. Yo creo que es imposible. Finalmente, escribí una función rápida de JavaScript para restablecer la altura después de la carga de la página, para que el diseño funcione. Vea http://peterchristopher.com para ver lo que quiero decir con transparencia para el área de texto.

Fuente

2009-04-15 12:14:39

Lo que no se puede hacer usando CSS

Respuesta

Cuestiones relacionadas