Setting Width with CSS Attr()

Setting width with CSS attr()

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).

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

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>

width attribute not working with d3 style

css width is not just a number:

width: 150px;
width: 20em;
width: 75%;
width: auto;

I believe you want:

.style('width', (d) => {
  return parseInt(d.age) + 'px';
});

How can I use the HTML data attribute in CSS as a property?

Support would depend on the given browser's implementation. If it's not working, then it's not currently supported.

According to MDN, support for properties other than content is experimental:

The attr() function can be used with any CSS property, but support for properties other than content is experimental.

Width style attribute not being respected properly in html?

First of all I suggest not to use so many inline styles because it's difficult to handle it. Use CSS classes instead.

You can try:

.card-img-container {
    flex-basis: 276px;
}

.card-body {
    flex-grow: 0;
    flex-basis: calc(100% - 276px);
}

.card-img-container {
    min-width: 276px;
}

I don't know what do you want to do on mobile. You can change these styles according to your needs.

CSS values using HTML5 data attribute

There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation

This fiddle should work like what you need, but will not for now.

Unfortunately, it's still a draft, and isn't fully implemented on major browsers.

It does work for content on pseudo-elements, though.

Making a progress bar with the CSS attr function

attr() was originally intended for use with the content property and support for it there is good.

CSS Values and Units Module Level 4 adds support for any property (such as width), but that specification is currently a Working Draft and browser support is non-existent.

change a attr of element when windows width less than value with jquery

This is better solved by @media queries. You need to add this in your CSS:

@media screen and (max-width: 992) {
  #header_right {
    text-align: center;
  }
}

And you must bind this with the window's resize event, inside the document's ready function. Actually you have a syntax error there:

$(document).ready(function () {
  $(window).resize(function () {
    if ($(window).width() < 992) {
      $('#header_right').css('text-align', 'center');
    }
  });
});

Because the current code you have, checks only once when the document is loaded and not every time when the window is resized.

How to show the width of an element in the content of an ':after' pseudo-element?

It's currently not possible to do this with CSS alone.

You could use JavaScript to iterate over the elements and set a custom data-width attribute based on the computed width of the element. In doing so, you can use the content value of attr(data-width) in order to display this attribute value as the pseudo element's content. The CSS attr() function allows you to retrieve the element's attribute and display the value.

For instance:

var elements = document.querySelectorAll('[data-width]');

for (var i = 0; i < elements.length; i++) {

  elements[i].dataset.width = elements[i].offsetWidth;

}

[data-width]:after {

  content: ' ' attr(data-width) 'px';

}

[data-width] {

  border: 1px solid;

}

div {

  width: 300px;

  height: 30px;

}

<div data-width></div>

<p data-width>Paragraph element</p>

<span data-width>Span</span>

Setting Width with CSS Attr()