Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting width with CSS attr()

Tags:

css

I'm trying to set the width of an element using attr() in CSS but it's not working. Chrome says "invalid property value" but I'm not sure what's wrong.

I'm trying to use the attribute "prog" as the width in percent for the .progress div.

Here's my example on 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 %); } 
like image 778
sheodox Avatar asked Aug 23 '13 17:08

sheodox


People also ask

Can I use CSS content ATTR?

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet.

How do I set auto width in CSS?

Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.

How can use data attribute value in CSS?

Getting a data attribute's value in CSS #You can access the content of a data attribute with the attr() CSS function. In every major browser, it's use is limited to the content property. For example, let's say you wanted to add some content dynamically to a component based on a data attribute value. You could do this.

What is ATTR attribute?

The attr() method sets or returns attributes and values of the selected elements. When this method is used to return the attribute value, it returns the value of the FIRST matched element. When this method is used to set attribute values, it sets one or more attribute/value pairs for the set of matched elements.


2 Answers

This is an experimental, or at least draft, feature of CSS, and currently, according to Mozilla Developer Network's documentation, is only compatible with the CSS content property (in which it can return a string to be placed inside a pseudo-element), but cannot (yet) be used to generate values for other properties.

References:

  • attr() (at MDN).
  • attr() (at W3C).
like image 99
David Thomas Avatar answered Sep 19 '22 23:09

David Thomas


Actually, there is a way to get around the attr() solution:

I don't recommend this, but you could account for every scenario of data-width attribute, for example:

(stylus code)

$limit = 300  .myClass     for num in (1...$limit)         &[data-width="${limit}"]             width $limit 

Albeit, this is a terrible approach, and leads to way too much CSS. I just wanted to point out that there's always a way.

like image 33
user1429980 Avatar answered Sep 23 '22 23:09

user1429980