Comments on: A Complete Guide to Data Attributes https://css-tricks.com/a-complete-guide-to-data-attributes/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Thu, 13 Jun 2024 17:18:50 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Abdurahmon https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1797194 Fri, 23 Sep 2022 15:11:21 +0000 https://css-tricks.com/?p=302917#comment-1797194 In reply to Idress Benchellali.

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

]]>
By: Mitchell https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1796442 Wed, 20 Jul 2022 03:56:58 +0000 https://css-tricks.com/?p=302917#comment-1796442 Hey just wondering if there are any other selectors i was hoping for greater than but even not equals would be great

]]>
By: Geoff Graham https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1795749 Fri, 13 May 2022 22:51:44 +0000 https://css-tricks.com/?p=302917#comment-1795749 In reply to Idress Benchellali.

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.

]]>
By: Idress Benchellali https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1795748 Fri, 13 May 2022 22:11:35 +0000 https://css-tricks.com/?p=302917#comment-1795748 I am having trouble making this code work:

<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 ?

]]>
By: Reginaldo Henrique https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1795360 Sat, 02 Apr 2022 14:46:22 +0000 https://css-tricks.com/?p=302917#comment-1795360 With the use of the data attribute is it possible to improve the SEO of a site or is it irrelevant?

]]>
By: Toheeb Ogunbiyi https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1789651 Sat, 12 Feb 2022 11:05:26 +0000 https://css-tricks.com/?p=302917#comment-1789651 In reply to Fabricio.

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.

]]>
By: Fabricio https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1757237 Wed, 27 May 2020 15:01:41 +0000 https://css-tricks.com/?p=302917#comment-1757237 Is there any way to get a javascript or jQuery click event on an element with an attribute starting with a certain text? e.g “data-gtm-event-“

]]>
By: Geoff Graham https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1756632 Tue, 12 May 2020 14:49:26 +0000 https://css-tricks.com/?p=302917#comment-1756632 In reply to Eliseo.

https://prismjs.com

]]>
By: Eliseo https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1756609 Tue, 12 May 2020 03:03:20 +0000 https://css-tricks.com/?p=302917#comment-1756609 Cómo puedo colorear la sintaxis de mi código fuente, así como aparece en vuestra página web , para dar ejemplos.

]]>
By: Mike https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1755761 Mon, 13 Apr 2020 15:57:31 +0000 https://css-tricks.com/?p=302917#comment-1755761 Awesome write up. Thank you for sharing!

]]>
By: Heinz https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1754504 Tue, 18 Feb 2020 20:37:00 +0000 https://css-tricks.com/?p=302917#comment-1754504 In reply to Heinz.

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

]]>
By: Florian https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1754501 Tue, 18 Feb 2020 16:37:00 +0000 https://css-tricks.com/?p=302917#comment-1754501 In reply to Heinz.

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.

]]>
By: Joe Lamyman https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1754497 Tue, 18 Feb 2020 15:38:00 +0000 https://css-tricks.com/?p=302917#comment-1754497 This is a really useful guide, thank you Chris!

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?

]]>
By: Cinnfhaelidh https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1754495 Tue, 18 Feb 2020 14:55:22 +0000 https://css-tricks.com/?p=302917#comment-1754495 It should probably be pointed out that case-insensitive attribute values are not supported by Internet Explorer or legacy Edge.

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

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

]]>
By: Dustin https://css-tricks.com/a-complete-guide-to-data-attributes/#comment-1754493 Tue, 18 Feb 2020 14:44:34 +0000 https://css-tricks.com/?p=302917#comment-1754493 This is a really great article. Thanks for writing it up. And I love the green lights at the bottom.

]]>