C'è un modo per mettere relazioni/contrapposizioni in CSS?

Question

In ogni strumento di progettazione o principio d'arte di cui ho sentito parlare, le relazioni sono un tema centrale. Per relazioni intendo la cosa che puoi fare in Adobe Illustrator per specificare che l'altezza di una forma è uguale alla metà dell'altezza di un'altra. Non puoi esprimere queste informazioni in CSS. CSS hard-codes tutti i valori. Usando un linguaggio come LESS che consente alle variabili e all'aritmetica puoi avvicinarti alle relazioni ma è ancora una variante CSS.

Questa incapacità nella mia mente è il problema più grande con i CSS. Il CSS dovrebbe essere un linguaggio che descrive la componente visiva di una pagina Web ma ignora relazioni e vincoli, idee che sono al centro dell'arte.

Quanto è possibile immaginare un nuovo linguaggio di progettazione Web in grado di esprimere relazioni e vincoli che possono essere implementati in JavaScript utilizzando le proprietà CSS correnti?

Answer 1

Stai cercando qualcosa come CSS Scripting Layout Specification o Constraint Cascading Style Sheets for the Web? Entrambi sono ancora nella fase di ricerca/prototipo però.

La specifica di CSS Scripting Layout è stata implementata come un plug-in di Google Chrome, a quanto pare.

Answer 2

C'era anche una specifica di fogli di stile JavaScript da Netscape nel 1996, http://en.wikipedia.org/wiki/JavaScript_Style_Sheets.

La specifica CSS Scripting Layout non è un plug-in di Chrome. Ciò che viene fornito è una dimostrazione del concetto. Molte persone non sono convinte che JavaScript possa funzionare abbastanza bene per il layout CSS a causa dell'implementazione CSS Expressions di Microsoft che ha avuto gravi problemi di prestazioni.

È limitato al layout in quanto questo sembra essere il più grande reclamo con CSS. Il suo scopo è dare agli utenti esperti la possibilità di fare quasi tutto ciò che vogliono, ma allo stesso tempo renderli tali che i layout possano essere incapsulati, referenziati e riutilizzati dagli utenti inesperti.

Answer 3

Direttamente, questo non è qualcosa che si può fare in puro CSS senza causare più problemi di aiuto a causa di quantità variabili di supporto da diversi browser.

Indirettamente, strutture come Meno o running your CSS through a server-side script prima di inviarlo al cliente sono la soluzione migliore ma, come hai detto tu, non sono l'ideale.

in JavaScript, utilizzando jQuery per impostare la propria height property elemento basato su un altro è outerHeight è probabilmente l'inizio di una soluzione decente, ma non riesco a trovare nessuna esempi di codice persone hanno scritto per risolvere il tuo problema specifico. Mi immagino che potrebbe essere qualcosa di simile, però:

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

che avrebbe stabilito l'altezza di una base all'altezza + confine + padding dell'altro. Per essere più robusti, c'è più che c'è bisogno di approfondire, ma è l'inizio di una soluzione.

Answer 4

Si consiglia di dare un'occhiata a Clever CSS, un approccio pitonico alla scrittura CSS. Include variabili, aritmetica, puoi persino fare operazioni sui colori.

Sto anche osservando uno di questi approcci agli stili di scrittura, qualcosa che è un livello superiore rispetto ai CSS. Ma uno dei grandi problemi, credo, sarà il fatto che i fogli di stile CSS sono spesso scritti da designer e non da programmatori, utilizzando strumenti di progettazione che probabilmente consentono loro di lavorare a un livello più alto e di generare successivamente il CSS. Quello che per noi programmatori potrebbe essere un buon approccio flessibile potrebbe non funzionare perché è troppo geek per i designer.

Answer 5

Se si impostano gli attributi di dimensione utilizzando una percentuale e si posiziona l'elemento come figlio di quello che si sta dimensionando, sarà possibile ridimensionare un elemento relativamente a un altro. Quindi, usa il posizionamento per spostare fisicamente il bambino al di fuori del genitore.

Answer 6

L'utilizzo di percentuali per determinare l'altezza è di esprimere una relazione con un valore hardcoded.

"se si impostano gli attributi di dimensione utilizzando una percentuale e si posiziona l'elemento come figlio di quello che si sta ridimensionando, sarà possibile ridimensionare un elemento relativamente a un altro" MA SOLO SE sono espresse le quote di elementi genitore esplicitamente (e questo applica iterando fino all'elemento html).

In CSS Livello 2 "La percentuale viene calcolata rispetto all'altezza del blocco contenitore della casella generata. Se l'altezza del blocco contenitore non è specificata esplicitamente (cioè dipende dall'altezza del contenuto), il valore viene interpretato come 'auto' ". Ma dalla Revisione 1 "le altezze percentuali sugli elementi posizionati in modo assoluto non sono più considerate come 'auto' quando l'altezza del blocco contenitore non è esplicitamente specificata."

Con il posizionamento assoluto questa soluzione si interrompe perché "Per gli elementi posizionati in modo assoluto il cui blocco contenitore è basato su un elemento a livello di blocco, la percentuale viene calcolata rispetto all'altezza della casella di riempimento di quell'elemento. CSS1, in cui la percentuale è sempre stata calcolata rispetto alla casella del contenuto dell'elemento padre. "

Nel seguente codice, le altezze div al wrapper interne si comprimono utilizzando il posizionamento assoluto, perdendo la possibilità di utilizzarle per posizionare i margini.

<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>