Is it possible to use data-* attributes in HTML to set the width in CSS?

Question

TL;DR:

I want to define the width in the HTML

<span class="skill-bar html-skill" data-width="80%"></span>

and then use the data-width value in CSS but I'm not able to do so.

.skill-bar {
    width: attr(data-width);
}

More in-depth:

I'm trying to make my portfolio with skill-bars that show how experienced I am in each language and until now I set the width of each bar by setting an individual class in the HTML like Html-bar or javascript-bar and have to manually transfer the values from the HTML to the CSS but I'd much rather just use data-* attributes.

may be this will help you : developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… — user16639239
– user16639239, Commented Aug 28, 2021 at 11:57
Theoretically, it is possible. The only problem is it has no browser support at all: developer.mozilla.org/en-US/docs/Web/CSS/…. Seems the use of css attr(), is currently only supported for "content". — Bettylex
– Bettylex, Commented Aug 28, 2021 at 13:35

Neil · Accepted Answer · 2021-08-28 14:28:41Z

5

Nishant above has a good solution e.g.

<html>
<head>
    <style >
.abc {width: var(--width); border: #000 solid 2px;}
    </style>
</head>
<body>
    <div class="abc" style="--width: 100px">100</div>
    <div class="abc" style="--width: 200px">100</div>
</body>
</html>

answered Aug 28, 2021 at 14:28

Neil

3,2111 gold badge19 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sueszli Over a year ago

This was the best solution so far! Thank you (I dont have enough credit to upvote)

Y.T. · Accepted Answer · 2021-08-28 18:30:14Z

What you suggested is an experimental feature not supported by many browsers (including lastest version of chrome). This is because attr() returns a string which could basically only be used for content. The closest possible solution might be:

[data-width="80%"] {
  width: 80%; /* perhaps duplicating this 100 times isn't a good solution though*/
}

<div class="skill-bar html-skill" data-width="80%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec magna elementum urna interdum iaculis eget id felis. Quisque eget turpis sem. Fusce rhoncus blandit sapien, et luctus lacus. Nullam consequat, enim id tincidunt finibus, turpis leo dapibus mauris, vel ultrices sem ligula vitae lectus. Vestibulum mattis ac nisi quis imperdiet. Sed vel nunc dictum, ultricies dolor eu, tempus massa. Suspendisse interdum nunc mi, eget malesuada mi sagittis a. Mauris facilisis dictum risus, ac tempor enim auctor in. Pellentesque non rhoncus justo. Integer dapibus nunc quis enim sagittis finibus. Proin fermentum, libero non iaculis ultrices, nulla ante aliquam sapien, ac commodo purus nulla et enim. Vivamus eu facilisis neque. Donec sit amet vehicula neque. Nam et ex fermentum, accumsan nulla hendrerit, commodo dui. Nulla ullamcorper euismod ipsum suscipit tempus. Aliquam ut mauris enim.

Donec non turpis quis sapien aliquet elementum. Curabitur vitae leo fringilla, ultrices justo sed, facilisis risus. Cras consectetur convallis nunc, a dictum leo ornare at. In hac habitasse platea dictumst. Fusce fermentum enim quis vehicula egestas. Aliquam nulla mi, consequat vitae sodales rhoncus, faucibus nec dolor. Proin sit amet sollicitudin eros. Morbi feugiat, erat in viverra sodales, urna lorem porta lacus, dictum venenatis sem nisl tristique eros. Maecenas eu lacus in lectus eleifend pulvinar pellentesque in dui. Phasellus placerat venenatis pharetra.</div>

Attribute selector is supported by IE 7 or above and almost everything else.

Thank you! You were right - this feature is not supported by most browsers.

Collectives™ on Stack Overflow

Is it possible to use data-* attributes in HTML to set the width in CSS?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related