[Résolu] [LESS] Variable depuis data-attr

Hello,

Ce matin je me demandais si il était possible de récupérer le contenu d'un attribut avec CSS/LESS (jusque là, oui c'est possible) pour créer un système de grille et (c'est là que ça deviens intéressant...) d'utiliser ce chiffre pour calculer la taille des éléments. C'est évidement à la dernière étape que ça coince.

Je vais par exemple assigner un data-columns-small="2" et dans ma version "-small", je vais calculer 100%/2.

Un petit exemple pour montrer ça. Il faut supprimer les variables des lignes 17 à 20 pour voir mes erreurs.

J'ai l'impression qu'il ne veut pas de cette variable en number et donc pas faire le calcul. Est-ce qu'il y a un moyen de forcer cela ?

Merci les Kiwis

Ici : https://www.w3.org/TR/css3-values/#calc-notation ils disent "Components of a calc() expression can be literal values, attr() or calc() expressions, or <percentage> values that resolve to one of the preceding types." (donc en principe ça marche (marchera?) avec un attr().)

Mais bon ici : https://developer.mozilla.org/en-US/docs/Web/CSS/attr ils disent : "The attr() function can be used with any CSS property, but support for properties other than content is experimental."
Du coup ca ne marche que pour content, pas pour width je suppose.

Sinon par hasard je viens de tomber sur ca : http://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html , je ne sais pas si c'est maintenu à jour ou pas par contre

Et en faisant quelques tests tout con avec attr et calc pour voir si ca se combine dans le content, je n'arrive pas a y faire marcher calc en fait ..
https://codepen.io/anon/pen/xZagRo
Modifié par mathieu1004 (03 Feb 2016 - 21:42)

mathieu1004 a écrit :
Et en faisant quelques tests tout con avec attr et calc pour voir si ca se combine dans le content, je n'arrive pas a y faire marcher calc en fait ..
https://codepen.io/anon/pen/xZagRo

Bonsoir,

Comme le dit la doc de Mozilla, attr() peut être une valeur de n'importe quelle propriété (width, content, etc.). Du moins en théorie. Car en pratique pour le moment, seule la propriété content accepte attr() sur les navigateurs actuels.

Dans tes tests de Codepen, ton calc ne fonctionne pa pour 2 raisons :
- il faut absolument des espaces autour de l'opérateur (donc calc(5 * 11) et non calc(5*11))
- calc() n'est pas une valeur possible pour la propriété content

Bonne soirée,