¿Hay alguna manera de poner relaciones/restricciones en CSS?

Question

En cada herramienta de diseño o principio artístico que he escuchado, las relaciones son un tema central. Por relaciones me refiero a lo que puedes hacer en Adobe Illustrator para especificar que la altura de una forma es igual a la mitad de la altura de otra. No puede expresar esta información en CSS. CSS codifica todos los valores. Usando un lenguaje como LESS que permite variables y aritmética, puede acercarse a las relaciones, pero sigue siendo una variante de CSS.

Esta incapacidad en mi mente es el mayor problema con CSS. Se supone que CSS es un lenguaje que describe el componente visual de una página web pero ignora las relaciones y limitaciones, ideas que están en el núcleo del arte.

¿Qué tan posible es imaginar un nuevo lenguaje de diseño web que pueda expresar relaciones y restricciones que se pueden implementar en JavaScript utilizando las propiedades CSS actuales?

Answer 1

¿Está buscando algo como CSS Scripting Layout Specification o Constraint Cascading Style Sheets for the Web? Sin embargo, ambos todavía están en etapa de investigación/prototipo.

La especificación de diseño CSS Scripting se ha implementado como un complemento de Google Chrome, al parecer.

Answer 2

También había una especificación JavaScript Sheets de hojas de Netscape en 1996, http://en.wikipedia.org/wiki/JavaScript_Style_Sheets.

La especificación de diseño de scripts CSS no es un complemento de Chrome. Lo que se proporciona es una prueba de concepto. Muchas personas no están convencidas de que JavaScript pueda funcionar lo suficientemente bien para el diseño de CSS debido a la implementación de CSS Expressions de Microsoft que tenía graves problemas de rendimiento.

Está limitado al diseño ya que esta parece ser la mayor queja con CSS. Su objetivo es brindarles a los usuarios avanzados la capacidad de hacer casi cualquier cosa que deseen, pero al mismo tiempo hacer que los usuarios principiantes puedan encapsular, referenciar y reutilizar los diseños.

Answer 3

Directamente, esto no es algo que se pueda hacer en CSS puro sin causar más problemas que ayudar debido a la cantidad variable de soporte de diferentes navegadores.

Indirectamente, marcos como Less o por running your CSS through a server-side script antes de enviarlo al cliente son su mejor opción, pero, como usted dijo, no es ideal.

En Javascript, usar jQuery para establecer height property de un elemento basado en el outerHeight de otro es probablemente el comienzo de una solución decente, pero no puedo encontrar ningún ejemplo de código que la gente haya escrito para resolver su problema específico. Me imagino que podría ser algo como esto, sin embargo:

var totalHeight = 1000; 
$("#div2").height(totalHeight - $("#div1").outerHeight()); 

que fijaría la altura de una función de la altura + frontera + acolchado de la otra. Para ser más robusto, hay más que se necesita investigar más que eso, pero es el comienzo de una solución.

Answer 4

Es posible que desee echar un vistazo a Clever CSS, un enfoque pitónico para escribir CSS. Incluye variables, aritmética, incluso puedes hacer operaciones en colores.

También estoy buscando uno de estos enfoques para escribir estilos, algo que es un nivel superior a CSS. Pero uno de los grandes problemas, creo, será el hecho de que las hojas de estilo CSS a menudo son escritas por diseñadores y no por programadores, usando herramientas de diseño que probablemente les permitan trabajar en un nivel superior y generar el CSS posteriormente. Lo que para nosotros los programadores podría ser un buen enfoque flexible puede no funcionar porque es demasiado geek para los diseñadores.

Answer 5

Si establece los atributos de tamaño usando un porcentaje y coloca el elemento como un elemento secundario del que está dimensionando, podrá dimensionar un elemento con relación a otro. Luego, use posicionamiento para mover al niño fuera del padre físicamente.

Answer 6

El uso de porcentajes para determinar la altura es expresar una relación con un valor codificado.

"si establece los atributos de tamaño usando un porcentaje y coloca el elemento como un elemento secundario del que está dimensionando, podrá ajustar el tamaño de un elemento con relación a otro" PERO SOLO SI se expresan las alturas de los elementos principales explícitamente (y esto aplica iterar hasta el elemento html).

En CSS Nivel 2 "El porcentaje se calcula con respecto a la altura del bloque contenedor que contiene. Si la altura del bloque contenedor no se especifica explícitamente (es decir, depende de la altura del contenido), se interpreta el valor como 'auto' ". Pero a partir de la Revisión 1 "las alturas porcentuales en los elementos posicionados de forma absoluta ya no se tratan como 'automáticas' cuando la altura del bloque contenedor no se especifica explícitamente."

Con el posicionamiento absoluto, esta solución se rompe porque "Para elementos absolutamente posicionados cuyo bloque de contención se basa en un elemento de nivel de bloque, el porcentaje se calcula con respecto a la altura del cuadro de relleno de ese elemento. CSS1, donde el porcentaje siempre se calculó con respecto al cuadro de contenido del elemento principal ".

En el siguiente código, las alturas de divs de la envoltura interna colapsarán usando el posicionamiento absoluto, perdiendo la capacidad de usarlas para colocar márgenes.

<body> 

<style type="text/css"> 
html, body { 
    height: 100%; 
} 

div#wrapper { 
    height: 100%; 
} 

div#content-wrap { 
    height: auto; 
} 

div#wrapper-upper-half { 
    height: 50%;  
    background-color:aqua; 
} 

div#wrapper-lower-half { 
    height: 50%;  
    background-color:fuchsia; 
} 

</style> 

<div id="wrapper"> 
    <div id="wrapper-upper-half"> 
    </div> 

    <div id="content"> 
    </div> 

    <div id="wrapper-lower-half"> 
    </div> 
</div> 

</body>