numero - css text color




Calcolo del valore per CSS (6)

Direi che è perché il CSS definisce solo come qualcosa viene visualizzato dal browser. Non vi è alcun flusso di informazioni sui fogli di stile, o per dirlo in altre parole: i CSS non sono dinamici.

Se conosci l'altezza di un elemento e desideri cambiarlo ogni volta che viene visualizzata la pagina, puoi generare un foglio di stile con PHP o altre lingue. Poi sai anche qual è la metà dell'altezza e puoi impostarla anche.

Se non conosci l'altezza, sarebbe un cambiamento dinamico. Il browser dovrebbe prima eseguire il rendering della pagina, quindi determinare l'altezza dell'elemento e inviarlo al CSS. Lì l'altezza della linea è calcolata e alterata nella pagina renderizzata. Ma forse anche l'altezza complessiva dell'elemento cambia. Ora il browser doveva tornare di nuovo in CSS e così via ...

Semplicemente non funzionerebbe. Il CSS è lì per definire staticamente l'aspetto della pagina.

Come sviluppatore web, spesso si incontrano problemi che potrebbero essere risolti molto facilmente se ci fosse qualcosa come il calcolo del valore.

Mi sono chiesto spesso perché non è possibile fare qualcosa di simile in CSS:

line-height: (height / 2)px;

Questo risolve alcuni problemi che si incontrano quando si desidera allineare un elemento verticale, ad esempio. È difficile allineare verticalmente gli elementi usando CSS in questo momento e produce un po 'di overhead.

Non è necessario nei casi in cui si conosce l'altezza fissa di un elemento. Ma non appena l'altezza è soggetta a modifiche (testo più lungo, ecc.), Sei fregato conoscendo l'altezza totale di un elemento.

Sarebbe facile risolvere questo problema usando JS aggiuntivo, ma questo è fuori discussione per i normali siti web. Quindi, perché non aggiungiamo semplicemente la capacità nei CSS di fare riferimento ai valori attuali e di lavorare con loro?

Se cerchi domande come queste, sai che cosa intendo:


Perché è "fuori questione per i normali siti web"? jQuery può fare molto di questo abbastanza facilmente ...

IE supporta i calcoli negli stili, ma non è raccomandato, si comporta come un cane ed è completamente incompatibile con tutto il resto.


perché non è possibile fare qualcosa di simile in CSS: line-height: (height / 2) px;

Perché ciò renderebbe molto facile l'introduzione di loop logici.

In questo esempio, a meno che non si imposti esplicitamente "altezza" (nel qual caso sarebbe anche semplice impostare in modo esplicito "altezza della linea"), l'altezza dell'elemento dipende dall'altezza della linea del suo testo di contenuto, che dipende sull'altezza ...

IE ha cercato di fornire questo con la sintassi 'expression ()', ma in realtà non funziona. L'approccio di IE consisteva nel ricalcolare passo dopo passo, quindi se si dispone di un'espressione indeterminata può continuare a ridisegnare i propri elementi costantemente al variare del valore dell'espressione. Per un esempio di come questo può andare storto, prova:

<div id="q" style="background: yellow; line-height: expression(document.getElementById('q').offsetHeight/2+'px');">
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
</div>

Quando ridimensionate la finestra del browser, l'altezza della linea e, quindi, l'offsetHeight cambieranno, con conseguente layout incoerente. Ad una certa dimensione l'altezza esploderà.

C'è un caso per consentire espressioni semplici contenenti solo costanti, ad es .:

line-height: (1em+4px);

ma qualsiasi cosa implichi proprietà calcolate dinamicamente è destinata al fallimento come la sintassi 'expression ()' di IE infetta.




Puoi usare SASS e MENO . se non sai nulla su di loro, Google li:





css