Réglage de la largeur avec CSS attr()
J'essaie de définir la largeur d'un élément en utilisant attr() en CSS mais cela ne fonctionne pas. Chrome dit "valeur de propriété invalide" mais je ne suis pas sûr de ce qui ne va pas.
J'essaie d'utiliser l'attribut "prog" comme largeur en pourcentage pour le .les progrès de la div.
Voici mon exemple sur codepen.
<div class="progresscontainer">
<div class="progress" prog="10">
</div>
</div>
.progresscontainer {
position:absolute;
background-color:black;
width:500px;
height:100px;
border-radius:5px;
border:1px solid black;
overflow:hidden;
}
.progress {
background-color: green;
background: -webkit-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -webkit-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: -moz-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -moz-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: -ms-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -ms-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
position:absolute;
height:100%;
width: attr(prog %);
}
3 réponses
Ceci est une fonctionnalité expérimentale, ou du moins brouillon, de CSS, et actuellement, selon la documentation de Mozilla Developer Network, n'est compatible qu'avec la propriété CSS content (dans laquelle elle peut renvoyer une chaîne à placer dans un pseudo-élément), mais ne peut pas (encore) être utilisée pour générer des valeurs pour d'autres propriétés.
Références:
En fait, Il existe un moyen de contourner la solution attr() :
Je ne le recommande pas, mais vous pouvez tenir compte de chaque scénario de l'attribut data-width, par exemple:
(code du stylet)
$limit = 300
.myClass
for num in (1...$limit)
&[data-width="${limit}"]
width $limit
Bien que, c'est une approche terrible, et conduit à way trop de CSS. Je voulais juste souligner qu'il y a toujours un moyen.
La prise en charge des attributs autres que le contenu est expérimentale. En d'autres termes, les navigateurs ne supportent pas encore cela même si cela semble valide.
Voici un exemple montrant qu'il fonctionne avec content, mais pas width.