Combina calc() con attr() in CSS

Mi chiedevo se posso combinare la funzione calc() con la funzione attr() per ottenere qualcosa di simile al seguente:Combina calc() con attr() in CSS

<div class="content" data-x="1"> 
    This box should have a width of 100px 
</div> 

<div class="content" data-x="2"> 
    This box should have a width of 200px 
</div> 

<div class="content" data-x="3"> 
    This box should have a width of 300px 
</div>

CSS

Il draft dice che dovrebbe funzionare, ma nel mio caso (Chrome 31.0.1650.63 me Firefox 25.0.1) non è così. Ci sono due casi allora:

Ho sbagliato
non è ancora supportato

Che cosa è l'affare?

Example Fiddle

fonte

2013-12-10 Loupax

In questo momento attr() non è supportata di default in qualsiasi principali browser per tutti gli attributi di altri poi "contenuti". Per saperne di più su di esso qui: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

fonte

2013-12-10 09:42:53 jede

Ecco un esempio con "contenuto": http://jsfiddle.net/cQ8F4/2/ – randak

Sì non supportato. Puoi farlo non dinamico con css come questo: http://jsfiddle.net/cQ8F4/3/ Per la soluzione dinamica vorrei usare javascript o jQuery: http://jsfiddle.net/cQ8F4/4/ – nkmol

Sembra che ci sia un modo intorno ad esso using vars

.content{ 
    --x: 1; 
    width: calc(100px * var(--x)); 
    background: #f00; 
} 

[data-x="1"] { --x: 1; } 
[data-x="2"] { --x: 2; } 
[data-x="3"] { --x: 3; } 

/*doesn't look like this works unfortunately 
[data-x] { --x: attr(data-x); } 
seems to set all the widths to some really large number*/

La sezione commentata sarebbe stato perfetto, e questo può essere lo stesso motivo la tua idea non ha funzionato , ma sembra che css non esegua il bel casting automatico a cui potresti essere abituato in javascript ('2' * 3 //=6).
attr() restituisce una stringa, non un numero e questo può essere visto aggiungendo .content:after { content:var(--x) }; niente viene stampato, --x è un numero, content accetta stringhe.

Se c'è una funzione di css da trasmettere, credo che sarebbe la chiave di questo problema.

fonte

2016-11-26 07:04:31 Hashbrown

Questo è carino fantastico, anche senza il supporto attr()! Può consentire la definizione di alcuni layout davvero carini! – Loupax

FYI, IE non supporta le variabili CSS e Edge sta lentamente arrivando. La maggior parte degli altri browser li supporta però! http://caniuse.com/#feat=css-variables – eppsilon

Al momento la funzione attr() non funziona in Chrome.

una soluzione quasi come bello è quello di utilizzare le variabili CSS:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     :root { 
     --module-size: 100px; 
     --data-x:1; /* Default value */ 
     } 

     .content{ 
      width: calc(var(--module-size) * var(--data-x)); 
      border: 1px solid; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="content" style="--data-x:1"> 
     This box should have a width of 100px 
    </div> 

    <div class="content" style="--data-x:2"> 
     This box should have a width of 200px 
    </div> 

    <div class="content" style="--data-x:3"> 
     This box should have a width of 300px 
    </div> 
    </body> 
</html>

fonte

2017-01-31 14:00:26

Combina calc() con attr() in CSS

risposta

Problemi correlati