I was trying to understand this pen →
Mainly focussing on the learning of the Javascript, but then I encountered this →
data-color
I searched but didn’t get many in-depth resources, not even on W3S.
I am not yet clear on its utility, and repercussion if any?
The worst part is it seems to be a kind of inline CSS, which is often not considered great while building WP Themes and Plugins.
W3schools is not known for being up-to-date. Try here
what does this mean →
In Firefox 49.0.2 (and perhaps earlier/later versions), the data attributes that exceed 1022 attributes will not be read by Javascript (ECMAScript 4).
What does this mean?
I mean what is this number "1022" means on one page if there are more than 1022 attributes?
data-color, for example, are more than 1022 in number.
Means this(total number of times in one HTML template) →
date-color
data-color
.
.
.
.
.
.
.
.
.
.
.
data-color(1023th)
Well, ES4 is a thing of the past and I doubt you should need to worry about that limitation.
My take is not that it meant 1022 instances of the same data attribute, but 1022 instances of all data attributes. But in any case, it’s essentially moot now.
That is, that version of JavaScript was incapable of dealing with collections larger that 1022, but is now capable.
So nothing to worry. we can move forward with confidence.
Is it treated an inline CSS kind of thing?
It looks like that because it is color hex syntax. It could be used by CSS by targeting with an attribute selector, but IMHO, doing so for color would be better done simply having the color value in the CSS not the element.
The codepen is using the data attribute in JavaScript code. The color values could be hard coded into the JavaScript, but by using data attributes instead it keeps the value with the element.
So it’s kind of like the code is saying “have JavaScript use this data attribute value to apply the CSS style to this element”.
I wouldn’t consider the example to be the most useful for real world use. But it is a good general example of how they can be used.
Nice!
Alternatively, How can that be achieved w/o data-color attribute?
There isn’t a data-color attribute as such there is a ‘data’ attribute that you can use to create your own little little parcels of information which can be used (mainly by js but sometimes by css). They are useful for storing data in the html when you need to do something with that data later.
So ‘data-color’ could have been ‘data-mynicecolor’. You make up your own name (within the rules) and append it to ‘data-’.
The js can access the value of that new data- attribute and use that value however it wants and indeed change it to something else where it can be stored and used again.
There is no need to avoid using them as they are very useful 
Hi there codeispoetry,
here is a very simple example - ( Vanilla flavoured, of course 
)…
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self';script-src 'self'; style-src 'self'">-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f0f0f0;
font: 100%/160% verdana, arial, helvetica, sans-serif;
}
h1, h2, h3 {
text-align: center;
}
.content, .content-two {
max-width: 50em;
padding: 1em;
margin: 1em auto;
border: 0.062em solid #999;
box-sizing: border-box;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
transition: 0.75s ease-in-out;
}
.extra {
background-color: #fff;
color: #000;
}
.extra0 {
border-radius: 1em;
background-color: #000;
color: #fff;
}
.extra1 {
border-radius: 1em;
background-color: #008;
color: #fff;
}
.extra2 {
border-radius: 1em;
background-color: #900;
color: #fff;
}
</style>
</head>
<body>
<h1>Background color test</h1>
<h2>box one</h2>
<div class="content extra">
<h3>Lorem Ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
volutpat nibh. Phasellus rutrum lacus at dolor placerat
feugiat. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>
<h2>box two</h2>
<div class="content extra">
<h3>Donec Vehicula</h3>
<p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
</div>
<h2>box three</h2>
<div class="content extra">
<h3>Nam venenatis</h3>
<p>
Nam venenatis diam ante, et cursus elit porttitor at. Morbi
mattis leo at ex vehicula, non vestibulum ligula aliquam.
Maecenas non nibh sollicitudin, porttitor odio in, elementum
arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac
rutrum odio bibendum volutpat. Phasellus ac sem consequat
lorem congue malesuada vitae vitae diam. Donec eu imperdiet
augue. Curabitur ullamcorper sit amet libero in ullamcorper.
Donec sed laoreet quam. Phasellus malesuada libero felis, non
elementum ex tincidunt eget. Quisque cursus arcu vel diam
consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
</p>
</div>
<h2>box four - ( not controlled by script )</h2>
<div class="content-two">
<h3>In Sapien Massa</h3>
<p>
In sapien massa, feugiat ut magna eu, hendrerit porttitor
justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam
facilisis, et molestie dolor blandit. Pellentesque non lectus
odio. Curabitur pulvinar orci vitae lorem bibendum volutpat.
Duis congue dignissim ante ut consequat. Sed nec sagittis
neque, quis vehicula urna. Fusce laoreet interdum ligula vel
finibus. Nunc odio purus, dapibus sit amet orci eget, congue
eleifend erat. Quisque porttitor imperdiet ullamcorper.
Aenean non orci nec magna tempor porta at id ipsum.
</p>
</div>
<script>
(function(w,d) {
'use strict';
var box = d.getElementsByClassName( 'content' );
var spacer = 20; /* adjust to taste */
w.addEventListener( 'scroll',
function() {
for ( var c = 0; c < box.length; c ++ ) {
if ( ( w.pageYOffset + spacer >= box[ c ].offsetTop ) &&
( w.pageYOffset + spacer <= (box[ c ].offsetTop + box[ c ].offsetHeight + spacer ) ) ) {
box[ c ].classList.add( 'extra' + c );
}
else {
box[ c ].classList.remove( 'extra' + c );
}
}
}, false );
}(window, document));
</script>
</body>
</html>
coothead
Hi there @coothead
what is this 20?
em or page height divided into 20 parts?
It is a pixel value, and as pointed out it is also optional .
As set, the effect starts 20px before the div element
reaches the top of the page and ends 20px after the
bottom of the div element reaches the top of the page.
Experiment by changing the value. 
coothead
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.