attr(data-something) works in ::after{} and ::befor{} .
And the attrebit you can write in the content like this :

div[data-smth]

[data-smth]::after or before::{
content: attr(data-smth);
}

if you need like your style just use js in js not it is Difficult their

Yeah, that’s because attribute() is unsupported by the left property. That’d have to go on the content property of a pseudo element to spit the number out.

<div class="box" data-width="150">Some content..</div>
<style>
.box{
position:absolute;
left: attr(data-width px);
}
</style>

is it possible to set the value of “left” propriety this way ?

Another use-case:
control error messages via js.

<label for="id">...</label>
<p data-error-for="id">...</p>

Like the label’s for attribute targeting an input with the specified id, you can populate any error messages for the id it references.

I’ll also add an aria-live attribute to <p> to tell Screen Readers of any changes.

https://prismjs.com

Hi Florian
this is true, looks like overkill, however I feel beeing on the ‘safer’ side because I am not altering the original data, I just transport the data as is, making no assumption about its usage.
I, on the backend, do not know if the client will render the data or use it in a regex, pass it on to some other process or whatever …

Cheers

IMO this is one step too much already. Especially when you’re working with PHP, just using htmlspecialchars() on the data (possibly with the ENT_QUOTES flag) is enough to guarantee you’re not getting into any escaping trouble.

This has the advantage of not having to do any decoding on the JavaScript side — just accessing element.dataset.name will yield the correct data with all the encoded characters already decoded by the browser.

Immediately inspired, I went to try and make a CSS system where a user can use the data attribute to specify the rows they want (just like in your example), but then use attr(data-columns) within grid-template-columns to give me something like: grid-template-columns: repeat(attr(data-columns), 1fr);

I thought that would be a really nice way to quickly define a grid from the HTML, but unfortunately that does not work, do you know if there’s a way to do something similar without having to write the CSS for all possible options or am I missing something?

Contrary to what Can I use says it does work in Chromium Edge

https://caniuse.com/#feat=mdn-css_selectors_attribute_case_insensitive_modifier