25 replies

1. ⭑ salma 3 min later

   blocked

   1. Zach Leatherman 4 min later

      if you can’t handle me at my JavaScript then you don’t deserve me at my HTML

      1. Jeff Couturier 1 hr later

         I feel both offended and seen.

         1. Zach Leatherman 1 hr later

            you’re in the right place 😅

2. Zach Leatherman 6 min later

   how dare my personal web site not undergo a vigorous and lengthy code review process

3. Jhey ʕ·ᴥ·　ʔ 31 min later

   it's fine

   [display=none] { display: none; }

   or if you wanna get "snazzy" with it 😮

   [display] {
   display: attr(display type(<custom-ident>), block);
   }

   1. Zach Leatherman 33 min later

      THIS IS A CURSED SOLUTION and I’ve shipped it to all of my web sites thank you

      1. Jhey ʕ·ᴥ·　ʔ 35 min later

         gonna go create a Tailwind-like solution powered by HTML attributes instead now 💀

         1. Zach Leatherman 35 min later

            …wait

            1. Jhey ʕ·ᴥ·　ʔ 40 min later

               headgust™

         2. leah 🛸 54 min later

            this actually kind of exists with unocss.dev/presets/attr..., but it gets compiled away lol

            1. Jhey ʕ·ᴥ·　ʔ 58 min later

               yeah – but the power part here would be it's a runtime thing

               you could allow a defined set and then let people jus' throw updates in the HTML with it all covered by that one line 😅

               mayhem

            2. Paul Melero 1 day later

               Cc/ @unocss.dev

         3. leah 🛸 8 hr later

            had some fun messing around with this today :) github.com/uncenter/att...

            1. Jhey ʕ·ᴥ·　ʔ 8 hr later

               love it - the name is brilliant 😅 sounds like a cleaning product haha

               read the README, could technically purge this as well which would make for a real small stylesheet 🤔

4. Adirs Code 1 hr later

   Maybe I’m reading too much into this, but wouldn’t you prefer to do it like this?

   <SVG class=“youKnowWhat”…>

   .youKnowWhat {
   display: hidden;
   }

   1. Zach Leatherman 1 hr later

      plenty of fine ways to do this (though you’d want `display: none` not hidden there). `<svg hidden>` might be the best one!

      in this specific case it’s for an SVG spritesheet.

5. Shaw 1 hr later

   <svg display="don't">

   ...but really: don't forget about the `hidden` attribute.

   1. Zach Leatherman 2 hr later

      if I could pin a reply…

   2. Zach Leatherman 3 hr later

      so… this might be a stupid question but why doesn’t <svg hidden></svg> hide the svg 😅 codepen.io/zachleat/pen...

      1. Shaw 4 hr later

         Odd! Looks like default browser styles aren't including `display: none` for svg[hidden]. Might only apply to HTML elements by default, as SVG2 spec doesn't list it under the attributes.
         www.w3.org/TR/SVG2/stru...

         Adding `[hidden] { display:none }` to CSS will do it, but maybe that's wrong for this

         1. Shaw 4 hr later

            Hidden spec for reference: html.spec.whatwg.org#the-hidden-a...

            Doesn't directly address <svg> that I can tell. Hard to say what the broswer's choice is there.

         2. Zach Leatherman 4 hr later

            maybe `svg[hidden] { display: none; }` is a good candidate for the css reset stylesheet

6. Jakob E 1 hr later

   Not sure if it’s still an issue when using <use> with a svg sprite/asset - but back in the old days display:none broke <defs>
   style=”width:0;height:0;position:absolute;” focusable=“false” is what I’m using (maybe I ought to do a do-we-still-need-this l)

7. Nitek 2 hr later

   If you didn't not look at your old code and consider it bad, it would mean you hadn't learned anything 😀