HTML Lists

(blog.frankmtaylor.com)

199 points | by speckx 2 hours ago

12 comments

  • appplication 1 hour ago
    This was a fun little read. Just through testing the examples, I also learned datalist does not seem to work well on mobile safari (which is a large enough market I might even say there’s essentially no scenario in which it’s worth using if there’s a compatibility issue).
    • MattGaiser 1 hour ago
      Way back when I was working my first job, datalist didn’t work on Firefox. That’s what got Firefox removed from the list of supported browsers.

      It has been a problem for a long time if you want to support anything other than Chrome.

      • Levitating 18 minutes ago
        > It has been a problem for a long time if you want to support anything other than Chrome.

        That's partially because Chrome keeps adopting standards nobody else wants to support.

        • afavour 17 minutes ago
          Both things can be true. Chrome supports a bunch of non standard APIs but it also has some of the best coverage of standard APIs.
    • carlosjobim 38 minutes ago
      They work well but not with GBoard on iOS.
  • dzonga 43 minutes ago
    this was a dope & comprehensive.

    unfortunately we have a new class of dev's that never learned html but went straight for React. Now with LLMs they will never learn HTML.

    hence they reach for react components where simple html would have been sufficient.

    • Ancapistani 19 minutes ago
      I think that’s OK.

      When I first had to use XML, I had to learn the XML spec and output it manually - serialization libraries didn’t really exist yet. I’ve since seen generation of juniors come up through the ranks using XML as an interchange format (and then JSON) without ever learning it fully. It was fine, and nothing terrible happened.

      I’ve seen AJAX go from the hot new thing to people not knowing what it stood for, to now most people not even recognizing the term. AJAX didn’t die; it became so common we don’t need a word for it anymore.

  • VladVladikoff 1 hour ago
    >What if there’s a bunch of options, but for [reasons] we don’t want a user to be able to select a subset of them? Let’s add the disabled attribute to an optgroup

    Seems broken in mobile safari, not actually disabled I can still select the disabled items.

    • p2detar 1 hour ago
      Not broken, but strange since it should be working on latest Safari.

      https://caniuse.com/mdn-html_elements_optgroup_disabled

      I think it may be a Safari bug.

      • quantumleaper 1 hour ago
        Your link states it's not supported in iOS Safari at all, even though it has been supported in macOS Safari since 2013.
      • tvmalsv 1 hour ago
        Came here to mention the same thing. Very well be on me, tho. I’m using the Brave browser (is it safari-powered?) and on iOS 18.7.9, which is the newest my old iPhone X supports.
        • somewhatgoated 45 minutes ago
          I think on iphone everything is safari powered(?)

          Also doesnt work for me on iPhone Firefox

  • montroser 1 hour ago
    Good stuff, except don't get too excited about `datalist`. It just doesn't have enough hooks to be actually useful for anything other than a little prototype.
    • iammrpayments 1 hour ago
      I think I’ve tried building a combobox using datalist once but it didn’t work
      • bombcar 28 minutes ago
        As you learn more about “raw” html you find all sorts of very fun things that are - ah - not very well implemented if at all.
  • jdw64 1 hour ago
    HTML linters actually help distinguish things like that? I'm curious if there are any linters out there that can enforce this kind of semantic tag selection.
  • jimmaswell 1 hour ago
    Lots of useful information I wasn't aware of after being a front-end lead for years. I'll start using these at work for sure.
  • reconnecting 1 hour ago
    This is how real HTML magic should look like:

    <MARQUEE>

      <OL>
          <LI>One</LI>
          <LI>Two</LI>
          <LI>Three</LI>
      </OL>
    
    </MARQUEE>
    • recroad 1 hour ago

          <BLINK>
            <MARQUEE>
              <OL>
                <LI>One</LI>
                <LI>Two</LI>
                <LI>Three</LI>
              </OL>
            </MARQUEE>
          </BLINK>
      
      FTFY
      • Trufa 55 minutes ago
        blink wont work, but marquee will
        • wwweston 45 minutes ago
          Not with that attitude:

              <style>
              @keyframes blink {
                  0% { opacity: 1; }
                  50% { opacity: 0; }
                  100% { opacity: 1; }
              }
              
              blink { animation: blink 0.7s infinite; }
              </style>
          
              <blink>This guy blinks.</blink>
          • reconnecting 20 minutes ago
            What version of Macromedia Dreamweaver did you use to make this?
          • Trufa 40 minutes ago
            people who use css are not welcome here.
            • Ancapistani 16 minutes ago
              It’s OK if it’s a polyfill.

              Wait, not far enough back…

              It’s OK if it’s a shim.

        • reconnecting 3 minutes ago
          Since <BLINK> is gone, `BEHAVIOR=SLIDE` is the closest you'll get.

          <MARQUEE DIRECTION="DOWN" BEHAVIOR="SLIDE">Slide</MARQUEE>

      • reconnecting 1 hour ago
        <MARK>FTFY</MARK>
  • WA 1 hour ago
    And yet, no native select + search combined, which is a very common kind of list. The datalist is basically unusable, because you don't know any of the options.
  • zombot 1 hour ago
    What I always wanted to know about lists and never dared to ask!
  • einpoklum 41 minutes ago
    tl;dr: You _do_ know HTML lists, they're basicaly like they used to be 20 years ago. But there are HTML form controls which are list-like and this will tell you about them: <select> and <datalist> which have <option> elements and <menu> which has <li> elements.

    It's a nice read, not very long and you can kind of leisurely skim it.

  • MagicMoonlight 1 hour ago
    That’s a really good article. It’s nice to see something which isn’t slop.
    • lucb1e 2 minutes ago
      Somehow I'm still in the mode where I'm surprised where it is, rather than when it isn't, but yeah it's annoyingly often. Do you come across it so much that it's your default expectation now?

      Edit: when not reading articles about AI or LLM-found vulnerabilities, of course. Those are universally LLM-supported and... very hit and miss in terms of the application of human quality control, let's say

  • asveikau 1 hour ago
    Title reminds me of Joni Mitchell.

        I've looked at lists from both sides now
        From give and take and still somehow
        It's HTML lists' illusions I recall 
        I really don't know HTML lists at all
    • ale 34 minutes ago
      I thought of the 2000 version first which made this much funnier in my head