Typed HTML attributes in CSS

The attr() function can read an HTML attribute and parse it as a typed CSS value. Enter a CSS length to update data-shift; the browser then uses that value to move the specimen.

translate: attr(data-shift type(<length>), 0px) 0;

The requested type is <length>, so values such as 2rem and 32px are valid, while words or percentages are not lengths here. The second argument, 0px, is the fallback when the attribute is absent or invalid. The data stays on the element, and the stylesheet owns the movement.