News for hackers. Stuff that matters.
Re:HTML and CSS techniques to reduce your JavaScript by pickpuck on Friday June 04, 2021 @05:30AM (#27391993)
The form/valid one is very interesting but I'm not sure I completely follow, especially the last example. Would you be able to post a Codepen?
Re:HTML and CSS techniques to reduce your JavaScript by eyelidlessness on Friday June 04, 2021 @10:09PM (#27401314)
Since it just finally made sense to me... it’s basically the checkbox hack but without a sibling structure requirement. Given markup like this:

    <form id="foo"></form>
    <div class="target">...</div>
    <div class="doesnt-matter">
        <input type="checkbox" form="foo" required>
    </div>
You can target `.target` with:

    #foo:invalid ~ .target
Because the checkbox is required/unchecked. (And the inverse if it’s checked using `:valid`.)
Re:HTML and CSS techniques to reduce your JavaScript by lenkite on Sunday June 06, 2021 @09:23AM (#27412991)
Ok, this is a great hack - but what would one practically use this for ? I mean the standard checkbox hack works too right ? Or is there some place where this technique excels ?
Re:HTML and CSS techniques to reduce your JavaScript by inopinatus on Monday June 07, 2021 @12:22AM (#27418972)
There are two bonus capabilities from using the form:valid hack:

1. The input element(s) can now be anywhere on the page. You can, for example, use adjacency to style a control button, without torturing your HTML to squeeze the button into being a sibling of whatever it's activating.

2. You can use form:valid as a parent selector i.e. as a wrapper element. You couldn't use an input:checked as a parent selector because the <input> element's content model is "nothing" i.e. there are no child elements under an <input>, but you sure can with a <form>. The result is less brittle to code-rot.

This is extremely freeing and allows you to use, for example, a :checked adjacency for styling an activation button and a wrapper element (a form:valid) for the large complex component (modal? drop-down? slideover? video content?) that it activates. Heck, it can even be an iframe. Here's the bones of an example:

https://codepen.io/inopinatus/pen/vYxrOeR?editors=1100

There are two downsides:

1. Behaviour of some elements is different inside a <form>. Most obviously, don't nest a <form> inside with the same scope.

2. Your HTML maybe become a mess of scattered <form>, <input>, and <label> elements that many other developers will look at and say "WTF was this person thinking" and "what does this button do?"

Re:HTML and CSS techniques to reduce your JavaScript by eyelidlessness on Tuesday June 08, 2021 @02:31AM (#27431261)
I would use it where I don’t have full control over the document structure (for example where my checkbox can’t sibling select because something third party wraps it in a div).
Re:HTML and CSS techniques to reduce your JavaScript by e12e on Friday June 04, 2021 @07:55PM (#27400526)
I'm assuming the input is toggled via js (or server rendered html) - and the selector is used for cascading "state" into the html?
Re:HTML and CSS techniques to reduce your JavaScript by inopinatus on Monday June 07, 2021 @01:47AM (#27419396)
Done. I've posted a sample usage, it's in a reply to a comment a bit further down.