HTML Lists(blog.frankmtaylor.com) |
HTML Lists(blog.frankmtaylor.com) |
However, the disabled attr on group definitely does not work!
More than a decade ago I had a project that used a pretty aggressive input-suggestion widget on the UI. We used a jQuery plugin for it and it was by far the most complicated part of the frontend. In fact, it was the main use-case for jQuery in that project.
Reading the article, I thought it would be pretty much a breeze re-implementing that frontend in a lightweight JS-minimalist version. But of course, unless I ship my machine to the users, not really. Sad state of affairs.
Nonetheless, I'm really impressed with what's included in the HTML spec nowadays! I haven't kept-up with developments in the spec since I read all about XHTML in high school. I ought to take some time every now and then to see what's changed though, again, browser compatibility is a PITA today as it was back in high school.
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.
Seems broken in mobile safari, not actually disabled I can still select the disabled items.
https://caniuse.com/mdn-html_elements_optgroup_disabled
I think it may be a Safari bug.
Div soup is probably a bit far in the opposite direction, but even then it's at least pretty consistent and apparent what the quirks and limitations are because it aligns with what you or the framework wrote much more consistently.
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.
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.
Thank god the underlying language, libraries, and browser support have moved forward. And IE6 is dead. God, what a nightmare.
html forms still work the same way.
can one say the same for the various form libraries for react or state solutions.
For example the HTML approach to style parts of a control is to use pseudoclasses. Sometimes the selectors are different across browsers! Then you have to test across browsers because who knows if it will actually work correctly.
React is not just easier it's more dependable. If I make something with React and some divs I know it's going to work the same in all browsers.
SuperHTML validates not only syntax but also element nesting and attribute values. No other language server implements the full HTML spec in its validation code.Conveying that something is a list of actions requires adding ARIA attributes. The article mentions `role=menu` but that's not enough, each item also needs the `menuitem` role. The WAI Authoring Practices Guide explains the roles and interaction expectations; don't copy their coded examples and definitely don't use the roles for navigation menus.
I like to ask people what they imagine <ruby> does, because I certainly didn't guess right.
I'm debating whether that one will be one or two articles because I'm going to be covering everything from <ruby>, <bdi>, <bdo> all the way through <var>, <kbd>, <samp>, <cite>, and <q>.
After that one, I'll probably have something like, "You don't know HTML interactions" or something to cover <dialog>, <popover>, and the Invoker API.
So sit tight; it's all coming.
<MARQUEE>
<OL>
<LI>One</LI>
<LI>Two</LI>
<LI>Three</LI>
</OL>
</MARQUEE> <BLINK>
<MARQUEE>
<OL>
<LI>One</LI>
<LI>Two</LI>
<LI>Three</LI>
</OL>
</MARQUEE>
</BLINK>
FTFY- https://blog.frankmtaylor.com/archive doesnt work
- https://blog.frankmtaylor.com/archives nope
- https://blog.frankmtaylor.com/posts nada
- https://blog.frankmtaylor.com/all nil
- https://blog.frankmtaylor.com/blog nyet
- do you understand that most of us got 10000+ bookmarks and it would be really really handy if you could make a single page on your website that lists every post every written without the description or the entire article on it?
Also, why would you want to go through all 235 posts?
- https://www.seangoedecke.com/page/2 or
- https://mmapped.blog/posts this or
And then to find out the list don't work on Safari iOS.
It's a nice read, not very long and you can kind of leisurely skim it.
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 allFor example, Blink/Webkit allow <meter> and <progress> to be styled. Firefox does not support those pseudoclasses so you can't style those elements cross browser.
Then there is <input type="range">
Blink, Webkit:
::-webkit-slider-thumb
::-webkit-slider-runnable-track
Firefox:
::-moz-range-thumb
::-moz-range-track
::-moz-range-progress
If I build a meter or progress bar in React, I can easily style it and because it uses divs and not wonky pseudoclasses then it looks the same in every browser.Also doesnt work for me on iPhone Firefox
IE 5.5 was much, much worse, and there was a long time there when it didn’t get any updates at all.
Unfortunately, it could be around a decade before all three major browsers finally implement the standard, and the fix might not be quite as clean as you originally imagined.
> No need to ask AI for a summary; I’ll just give you the ending up front.
It's easy to miss how often we bring AI up about in conversation or writing given just how dominating a topic it can be in every circle these days.
Yeah I put it there just to discourage folks from asking some LLM to summarize it.
I really don't want my content fed to Sam Altman.
<style>
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
blink { animation: blink 0.7s infinite; }
</style>
<blink>This guy blinks.</blink> <style>
@keyframes blink {
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
}
blink { animation: blink 0.7s steps(1, end) infinite; }
</style>
<blink>This guy blinks.</blink>Wait, not far enough back…
It’s OK if it’s a shim.
<MARQUEE DIRECTION="DOWN" BEHAVIOR="SLIDE">Slide</MARQUEE>