You can add these to your list of esoteric tech questions to ask during interviews. /s
Cool HTML elements nobody uses
21–30 of 111 posts
Re: Cool HTML elements nobody uses
#22sub doesn't seem to work in Android Chrome
Re: Cool HTML elements nobody uses
#23This and were so overused that browsers started to show them without any animation
Re: Cool HTML elements nobody uses
#24+ Marquee
for image divs that websites keep using JS for.
Re: Cool HTML elements nobody uses
#25Here's one very few people know: It works like a line break, but it only kicks in if the word needs to be broken. Very useful for email/URL formatting on mobile (along with ­).
A subtlety to point out about when comparing it to its textual alternative ZWSP (U+200B ZERO WIDTH SPACE): if someone copies the text (as text—if it’s copied as formatted HTML, anything could happen), ZWSP will remain, whereas will disappear. You could exclude the ZWSP with something like `user-select: none`. So really, is kinda like ​. My experience is that is almost always what you want rather than ZWSP.
disappears), while document.body.innerText is "a\nb\nc" (
becomes \n). As for removing the line breaks from what goes on the clipboard (which is desirable if you’re choosing visually-optimal break points manually), well, that’s unreliable. I’ve only ever tried it on Firefox, but tricks like `user-select: none` on a line break of either kind don’t work, netting you two line breaks for some reason; wrapping each line in something like can work.
There are similar but more obscure considerations with the difference between
and a textual carriage return preserved by `white-space: pre`. Take the document data:text/html,
a%0Ab(containing one carriage return and one manual line break), and document.body.textContent is "a\nbc" (the
c
disappears), while document.body.innerText is "a\nb\nc" (
becomes \n). As for removing the line breaks from what goes on the clipboard (which is desirable if you’re choosing visually-optimal break points manually), well, that’s unreliable. I’ve only ever tried it on Firefox, but tricks like `user-select: none` on a line break of either kind don’t work, netting you two line breaks for some reason; wrapping each line in something like can work.
Re: Cool HTML elements nobody uses
#26 and has the problem that they change the line height. So if you have an paragraph and one line contains "Nice ground with 42 m² grass" then that line is taller than all the other lines, which makes it rather ugly.
So I automatically converts all m2 and similar into the unicode symbols: https://en.wikipedia.org/wiki/Unicode_subscripts_and_supersc...
Re: Cool HTML elements nobody uses
#27I am old enough to remember development when image maps were still common for things like headers and big hero homepage navigation images. I'd like to add which acts like an img tag and submit button that submits the clicked X and Y essentially as two separate inputs Here's an MDN example showing X and Y position in GET string on click. - https://mdn.github.io/learning-area/html/forms/image-type-ex...
Trip down memory lane: Internet Explorer didn’t quite interpret the standard correctly and sent the coordinates as floating point numbers. If you had this input[type=image] on a ASP.NET WebForms page, this then caused ASP.NET WebForms to crash, as it tried to interpret the postback arguments of the X/Y coordinates as integers. I think this was later fixed by patching Internet Explorer.
Re: Cool HTML elements nobody uses
#28My favorite obscure useful HTML elements: , , , //, ///.
Re: Cool HTML elements nobody uses
#29Having used all of these in the past, here's why this is the case: 1. meter/progress - default style looks dated, styling works different on different browsers, the color scale options are confusing 2. sup/sub & 7. abbr - these are only useful for page content (as opposed to site design), which is usually WYSIWYG or something like Markdown. Many editors/parsers don't support it, at least by default. 4. map/area - it'…
The problem with detail/summary is that in some browsers that element is hard to style correctly and always turns out to be so limited that you ask yourself why you don’t fully develop this functionality manually and put some aria attributes on it for good WCAG2.1 measure.
Also applies to progress, for which you need to use obscure browser-specific CSS rules.
Re: Cool HTML elements nobody uses
#30remember this tag?