I added the following CSS to every element on the page
An outline with 0.5px width
I use this bookmarklet which when clicked does it on the current page:
javascript:(function(){Array.from(document.body.getElementsByTagName('*'), e => e.style.outline = '2px dotted orangered');})();javascript:document.querySelectorAll("*") .forEach(el=>el.style.outline=`1px solid ${ Math.floor(Math.random()*2*16).toString(16) }`)
javascript: (function() { const colors = ['red', 'green', 'blue']; const setColor = (el, idx) => { el.style.outline = `1px solid ${colors[idx % colors.length]}`; [...el.children].forEach(child => setColor(child, idx + 1)); }; setColor(document.body, 0); })();
Thus green is always inside red. Any advances?
(function() { const colors = ['red', 'green', 'blue']; const setColor = (el, idx) => { let currentThickness = (idx % 10) + 1; el.style.outlineColor = colors[idx % colors.length]; let direction = 1; setInterval(() => { if (currentThickness >= 10 || currentThickness <= 1) direction *= -1; el.style.outline = `${currentThickness}px solid ${colors[idx % colors.length]}`; currentThickness += direction; }, 100); [...el.children].forEach(child => setColor(child, idx + 1)); }; setColor(document.body, 0); })();
They also might have been asking the question: “Does 0.5px vs 2px matter in any significant way?” The answer to that question is still no. But I could see how someone who’s unfamiliar with the outline property could ask the question.