Estructura, presentación y comportamiento. Fin al reparto de papeles 1.2.13

Estructura, presentación y comportamiento. Fin al reparto de papeles

En un principio, el reparto de papeles estaba claro y definido: Html aportaba la estructura de la página, de su presentación se encargaba Css y los comportamientos era el trabajo de Js. Cada uno en su terreno. Y la convivencia era apacible y tranquila.
Pero antes de seguir, definamos:

Estructura

Como la urdimbre o tramoya que aportan los distintos elementos (div´s, p´s, span´s, tables) por ser el que es y sus características inherentes a su condición. Competencia del Html

Presentación

El cómo se dibuja o representa cada elemento al declararles propiedades con valor diferente al que tienen por defecto. Competencia de Css

Comportamiento

Las reacciones, comportamientos y cambios ante las acciones (de los usuarios u otros factores) en la estructura y la presentación. Javascript y similares.

In the beginning, long time ago

Y se podría decir que durante mucho, mucho tiempo se respetaron los papeles asignados a cada uno. Sin injerencias o invasión de campo ajeno. Si exceptuamos las pseudoclases de Css que estaban confinadas casi en exclusiva a los enlaces y campos de formularios y algún aspecto derivado de display, float y position.

Y el usarlos tenía sus "consecuencias". Si aplicabas alguna pseudoclase a algo que no fuese lo dicho podías recibir algún toque de atención y advertencia a los estándares por parte de los "defensores puristas".
Y si alterabas el flujo del html pagabas en forma de código extra para limpiar los floats, compensar deficiencias en el soporte o bugs de navegadores.

No. No había mucho campo a la imaginación y "la guerra" entre lenguajes.

La Edad Antigua y primera expansión

El primera intento de mover fronteras la protagonizó Css. En dos frentes: escaramuza con Html y declaración de intenciones a Js.

Con los pseudoelementos :before y :after y los contadores automáticos Css se asomó a la estructura. Ahora ya podía la Presentación introducir contenido en el Html.

Recuerda que lo generado por :before y :after no se inserta antes o después del elemento, sino antes o después del contenido del elemento. No quedan fuera del elemento sino dentro de él como contenido añadido.

Con la ampliación de las pseudoclases y pseudoelementos y los selectores de hermanos Js vio no sólo cómo los estados temporales derivados de acciones lo abandonaban definitivamente, sino que se extendía un poco más allá. Un elemento podía recibir una acción y ser otro o un hijo de este segundo el afectado.

Mientras, Html se mantuvo inmutable en su papel. Ninguno de los desarrollos, incluido xHtml strict, exploró estos límites.

El fin de la separación. Solapamientos y apropiaciones

Todo lo anterior es historia vieja. Cuentos del pasado. Hoy todo ha cambiado y las opciones disponibles para la resolución de situaciones no están sólo en un campo o lenguaje. Dos han sido los vectores de ruptura:

Html5

Con la difusión de la CR Html5 y, lo que es más importante, el desarrollo y soporte de los agentes de usuario a sus nuevas funcionalidades, el Html ha escapado a sus límites y ha ampliado competencias y funcionalidades. Bien en combinación con otras tecnologías o lenguajes (canvas, SVG, WebGL) o por sí mismo (manejo/validación de formularios, multimedia...).

A modo de apunte, los nuevos territorios de Html5:

• File Access
• Gráficos
• Multimedia
• Sin conexión
• Rendimiento
• Almacenamiento

Css3

Paralelo a este advenimiento de Html5 y más dilatado en el tiempo ha sido el desarrollo e implementación de Css3 y sus rupturas. Css3 ha roto sus corsés en dos direcciones: generación y gestión de eventos (comportamientos) y adueñándose del control y ordenación de la estructura:

Ya no sólo por la ampliación de los selectores de pseudoclases y pseudoelementos incluido el "eterno en gestación" selector de ancestro (padre), el control y gestión de comportamientos se ha visto ampliado por los módulos relativos a las transformaciones y transiciones 2D y 3D. Y un paso más allá con las @keyframes que lo libera de intervención del usuario o acción desencadenante en detrimento de Js.

Y si lo anterior no es suficiente, Css3 ha matado la separación con la estructura. Prácticamente se apropia de ella:

• No importa en qué punto del html aparezca un elemento
• Se acabó el dibujarlos según direction: LtR/RtL y obligatoriamente de arriba abajo.
• Libertad para ocupar el espacio (tamaños) no en función de declaraciones estrictas o inmutables. Ahora se establecen relaciones entre hermanos, con independencia del contenido.

Gracias a las propuestas del flexbox (modelo de caja flexible), el grid layout, las columnas Css, flotados posicionados, las regiones, exclusiones, figuras... permiten manejar y alterar la estructura a gusto y conveniencia con total independencia del orden o dónde aparezca en el Html. La presentación no está en función de la estructura. Fin al mandato del flujo y el content-flow.

Layouts Css. Pasado, presente y futuro.

Y ahora qué

Nuevos tiempos, nuevas herramientas. Hora de abandonar viejas convicciones y creencias. No hay nada estanco, compartimentado y cuadriculado. Si te sirve y ayuda ¡úsalo! sin que te frene el hecho de si son o no de su competencia según la vieja concepción.

La separación entre estructura, presentación y comportamiento murió. Css y Html han crecido. Y las posibilidades, las reales y las que están por llegar (cuando estén maduras), prometen ser más que interesantes y divertidas. Y sobre todo, agrandan el campo de juego y mejoran los resultados.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso