Thread with 4 posts
jump to expanded post
Behold, my beautiful CSS debug element!! It will, of course, round the debug element in red (well, tomato-red). I also have a nice little global (GASP) const removeThis = node => node.remove() and I <section class="debug" onclick="removeThis(this)">....debug stuff...</section and I can just get the things in there dynamically, and click on them to remove them.
And the best part, the remove icon is a nice dynamic list!!!
.debug {
position: relative;
padding: 0.4rem;
border: 2px solid tomato;
counter-increment: icon-counter;
}
.debug::before {
content: 'NOO';
position: absolute;
display: inline-block;
height: 1rem;
width: 1rem;
color: tomato;
/* counter-increment: icon-counter; */
top: 5px;
right: 5px;
font-size: 20px;
color: #f00;
}
.debug::before {
content: counter(
icon-counter,
symbols(
cyclic '\2715' '👻' '💥' '❌️' '\2716' '🚫' '💀' '\2717' '\2611' '⊝' '🎉'
'✨' '-' '💀'
)
);
}
@zlatko Nice! Curious: what’s the reason you use `border` over `outline` in your situation? (I’m always interested in use cases and dev stories, is why I ask.)
@Meyerweb it was an unconscious choice. Probably driven by long long history of abusing CSS stuff and never committing to becoming an expert in the stuff instead of just expertly hacking my way around what I want.
I often used the .debug trick back in the old-school days when you rendered stuff on the backend, and when possible, I would pair it with environment so it gets a display: none on prod environments (when I forget to remove the debug things like that). Borders was just what you used because you "knew" how it works together with the box model, where outlines were a bit more finicky for me and I couldn't get them "just right".
My second conscious reason, now that I think about it, is that I always believed that you would use borders to just, you know, separate an element from whatever is around it, whereas outline is more for like subtly highlighting certain other things. So, like, semantics matter - but I now realize that I may have been wrong all along. Maybe outline doesn't mean that.
I've "learned" CSS around 1996 - they didn't have anything fancier then back then - and from then onward, I just piled stuff on top to see what would ...erm, stick. Now you got me thinking about my border-vs-outline and I now have to go and see if I wanna change that or not.
But I do think that the web performance matters, and wanted this stuff with only CSS, and I often do, so sometimes I do silly things like this dynamic changing of the "close" icon. And this one seemed silly enough to earn a spot on my timeline :)
Otherwise I wouldn't even post it, it's a common trick.
Long post
@Meyerweb Now I've written so much about it, I should probably go make it into a blog post :)