3D Mahjong, Built in CSS
#HackerNews #3DMahjong #CSS #Game #Development #WebDesign #Gaming
1
chaos.social
boosted
Don't you just love sleep?
In last night's sleep, I realised how I could replace the need for 150 lines of JS, with one line of #css .
2
Don't you just love sleep?
In last night's sleep, I realised how I could replace the need for 150 lines of JS, with one line of #css .
2
So I was reading the new #CSS selectors level 5 draft, like one does, and what do I see? `label /for/ input` will let us select the input referenced by a label's for attribute? I don't have a good use case right now, usually `label + input` or `label > input` does the trick, but still… very cool to have the option. Interested to see what other use cases people come up with.
https://www.w3.org/TR/2026/WD-selectors-5-20260217/#combinators
6
chaos.social
boosted
Eine Animation mit #CSS und #JS die den Anschein erzeugt, das Bilder sich im Karussell bewegen:
1
Eine Animation mit #CSS und #JS die den Anschein erzeugt, das Bilder sich im Karussell bewegen:
1
chaos.social
boosted
I've got a problem. I've recently added the following CSS to my site, which automatically adds an arrow symbol after outgoing links.
a[href^="http"]:not(:has(img))::after {
content: "⭜";
}
- The good thing: It works. Yay.
- The problem: It adds a gap between the line of text the link is in and the one below. You can see examples on my links page.
- The questions: Why? And is there a way to get rid of that gap? It seems to be connected to the arrow symbol itself? Can that be? I don't even know how to look for solutions. Does anyone have a tip on where to look for one?
Edit: Maybe I should add that this is happening in Firefox. It does not happen in Safari on my phone, but there the arrow isn't visible to begin with. Different problem.
Edit 2: So far, thank you all so much for your replies. I'll go through them one by one. This may take a bit.
I'm adding a screenshot of how it looks on my laptop, which runs Fedora Linux with Firefox. If I inspect the page and untick the line content: "⭜";, the gap is gone.
#CSS #personalWeb #smallWeb #indieWeb
1
I guess I already shared this website, but I really, really like it.
It demonstrates the purpose of separating structure and content via HTML from styling via CSS.
csszengarden.com/ is one #HTML with dozens of designs applied via different CSS files. Always same HTML, different #CSS. It really can open the eyes on the fundamentals of the web technology.
No inline CSS, nor utility classes. Clear separation.