After witnessing some awesome things CSS can do, it's time for HTML to come in the same spotlight!
It's amazing that you can do so much with just ...
For further actions, you may consider blocking this person and/or reporting abuse
Help!😱 The Dropdown is chasing me!
Yeah, but given no additional Javascript it's still pretty cool.
You can make dropdowns chase you without Javascript?! Count me impressed!
🤣
DontUseAMac
...
Nice post, I already knew all of those except for the one about dialogues, newcomers will definitely find this useful.
Dialog only works in Chrome based browsers. Firefox doesn't support it without enabling an option.
Seems to work fine for me on 67.0.4
On mobile Safari 1,2 and 6 is not working 😕
Nothing works on safari 😂
Yeah, the Dropdown can do that. :P
Made me smille
Bug
Same here 😥
I have no dropdown here.
My preferred one. On desktop:
On mobile:
Source code:
Unfortunately, it only looks this good in Firefox. Also doesn't seem to handle foreign localizations well, as is the case with Portuguese:
It works fine for me for the few languages I’ve tested. That seems particular to your locale. You should report the bug here: bugzilla.mozilla.org
The problem is it is still not supported by Safari and some other browsers...
Safari is the new IE
This is great! 😀
I’ve struggled to find a date time picker of my material ui react application. It’s best native (built-in) input methods for portability and simplicity
How well is it customizable?
Nice, the
datalistis one I'll have to definitely look at. The frontend team at my job is building out a new set of components for our apps, including various dropdown/filterable elements. Same withdetails.I was thinking the same, although you'd still need some kind of JavaScript fallback for older browsers, even for the datalist one. Safari for example is supporting that since 12.1. (macOS) and 12.2. (iOS) only.
thankfully we only have to support latest FF, Chrome, and soon Edge. i'm ok with that.
I found this when trying to make a searchable drop-down, and it's almost perfect except I couldn't make it show all options when it first recieves focus. So annoying.
if you were trying in firefox i think there's a known issue around that. caniuse.com may have some info on that
Great post, shame some of these features are not supported on major browsers.
Don't forget to visit caniuse.com/ before attempting to implement one of these features.
... but only after you have carefully tested nonsupporting browsers. ⚠️
The “dialog” example looks very bad on latest stable Safari (12.1):
but that can be fixed with proper CSS (although I’ve tested it only superficially):
At this point, I would still test IE and Edge before using it.
There's a polyfill for those, although Edge will arguably gain support as soon as it switches to Chromium.
This post is magical, thank you!! 😭
In regards to your "silly project" I too have something similar. When I type potteripsum on my keyboard, it spits out
Leviosa protego arania quietus ennervate lumos morsmordre serpensortia protego nox scourgify. Aparecium petrificus oblivious serpensortia arania portus wingardium ennervate. Imperturbable apparate pepperup totalus petrificus riddikulus. Jinx homorphus finite legilimens hover. Impedimenta serpensortia mobilicorpus nox totalus imperio peskipiksi mortis momentum. Expecto mobilarbus protego locomotor nox apparate aresto mobilicorpus. Totalus colloportus alohomora patronum funnunculus ennervate petrificus engorgio legilimens babbling.
Immobilus protego peskipiksi totalus stupefy totalus densaugeo incarcerous confundus. Impedimenta ennervate sonorus incendio impedimenta aparecium evanesca aparecium locomotor wingardium. Alohomora aparecium amortentia ennervate mobilicorpus patronum. Momentum immobulus mortis protean flagrate. Serpensortia impedimenta leviosa avis tarantallegra orchideous protego.
Aresto petrificus imperius aparecium immobilus concealment.
Nice collection of HTML functionality!
And virtually none of these are supported by ie. When will that crap of a browser just go away?
With 5% worldwide market share (around 2% decrease since last year) and not getting any real updates for around 6 years, you might as well just show "upgrade your browser" page to the elderly people still using IE.
yeah, but you (well at least our company) has to code around these "elderly people" still using IE.
IE is moving to Chromium soon, so it will quickly get back in sync with modern browsers.
but there is (as far as I know) no mandate to force users to stop using current versions of IE. Heck, there are still companies using Windows 7. We'll see a small, but very vocal ie user base that refuse to give up this piece of trash for a long time yet.
Unless a company can take a stand that they will no longer support it (which I have proposed to my management), it will continue to be a thorn in our side for a long time.
I learned about
datalist1-2 years ago and it still blows my mind. I think it comes from many horrible years of fudging it with JSGreat post
Not sure if I'll ever encounter a use case for it, but deletion and insertion are pretty rad, didn't know that thing exists. 👍
However, I'd suggest adding
text-decoration-skip-ink: noneto the<ins>CSS, otherwise macOS font rendering will butcher some of the wavy underlines:That's a great point! I've updated the demo with
text-decoration-skip-ink: none🙂thank you!
I love this series of posts, they're really helpful. I shared this one on Twitter before even realizing it mentioned my work on a contenteditable browser editor. Haha, that was a nice surprise. Thanks for sharing with us!
Thanks!
Your browser editor post was really cool! 🙂
Well, the dialog box will not work without JS, so it can't be considered pure HTML solution.
On the other hand, combining checkbox with some CSS, the same behavior can be implemented without JS at all.
Definitely didn't know about
datalist, thanks!!Makes entering time values consistent and also easier on mobile.
I built a polyfill for it as well so that there is no reason not to use it 😁
dan503.github.io/time-input-polyfill/
Dropdown is awesome.
How to handle dropdown with different data between value and text?
example :
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
Nice, I like the lightweight approach. However, there are certain limitations to the HTML-native components. As has already been pointed out, the dropdown doesn't play well with scrolling. If you use a HTML , then you have little control over the look of the dropdown in CSS. It's all about those small things... I believe browsers could do a better job with the native components and their HTML integration. Currently, web devs build the most absurd constructions to achieve things like a dropdown menu, and run into the weirdest corner cases with focus handling, overlay anchoring etc.
This is awesome! I've used the
detailselement on a project we've worked on recently, we've ended up not using JS for anything because it wasn't needed and applying this element contributed towards this outcome. 😄So many people talk about super power of web component. And look at this default elements. This is something sad, because lots of this elements is implement badly.
Datapicker? - has broken layout and design, there is no usefull attributes
Dialog - not woking in every browser, there is no usefull attributes
Dropdown - UX sux. I choose one element and when i open list another time, i will see only this element. No atributes for change this behavior
dialog element is amazing
This is very interesting. I can do some implementations of these with animations using a smart combination of HTML inputs combined with CSS. I think HTML/CSS can still go beyond, there are things for which JS was not necessary anymore and yet it's the norm.
Good article :D
I love the mobile keypads. That is such a great feature. I judge sites that don't use that correctly.
Nice article! I think, that it misses an important technique, that uses checkboxes and :checked selector to approximate interactive elements.
Checkboxes and radio buttons can be used to create tabs, expandable areas, dialogs and other complex interactive controls without using Javascript. They are a lot more flexible and have better cross-browser compatibility than "dialog" and "summary".
Cool. Didn't know a lot of these!
Your post always brightens me for an endless possibility. The things you did without JS amaze me.
Thank you for amazing posts. I'm in awe of the effort you put on the examples.
Thanks! I'm glad you find them useful 🙂
Weird stuff... caniuse says no FF, but MDN says it's been there since 53. Unless there's more than one meaning of dialog. They both say no IE/Edge/Safari though.
Edit... nevermind, it's behind a flag in FF, but MDN shows that as green and caniuse shows it as red. TIL.
Interestingly the demo actually works fine on Firefox without polyfills and without changing any config flags.
Totally unrelated but still wanna ask - where do u happen to host these apps and your own website with a domain? I see multitude of choices, is there any post about free hosting with domain vs paid ones and benefits?
One of the finest HTML articles on Dev.to
I've been so deep into Javascript lately, I didn't know about half of these. Thanks for sharing!
Awesome, thanks for sharing
Awesome post!!!
Amazing things, thanks!
Amazing.
Amazing tips!!
Great stuff! +1 for the Potter references.
Very awesome post!
data list is new for me and looks promising.
Alright everybody, this post won, we can close this site now.
Always top notch posts Ananya. Thanks for sharing. 💯
Thanks! 😁
My goodness, I feel like a fool not knowing this before.
This article was supper helpful, thank you!
Nice post. I don't knew that was possible to do the amazing dropdown with datalist html tag. Amazing!
I didn't know about the color picker!! Wow!
Great article! Thanks 😊
the dropdown is true surprise I see it for the first time. TIL
I LOVE this kind of stuff.
People really need to renew their basic skills... (and browsers too :( )
I had no idea about the progress and meter, I will definitely play a little with those, thank you!
Wow! I wasn't aware of many of these here! Thank you! :)
Thank you for motivating this beginner. Thank you for sharing.
This is a great post definitely. Thanks for all of the information in the post & responses.
Wow, I was completely unaware of those first two, definitely going to see how feasible it would be to ingrate them in to my workflow.
Dang! I didn't know over half of these. Thanks for this.
Probably one of the most straight up informative posts I've read on DEV.to!!!
Excellent post and it truly opens the capability of html
I fell in love with that drop-down list. Something I do not understand is ... How do you select those colors? I'm not good at choosing which is the right one
Are you talking about the colours I used in the demos?
This was insightful.
Really cool
Great post
Edge Chromium cannot come soon enough...
Thank you for such a great post! I've just figured out how I may make search function return more intuitive results after reading through 7, Highlighting text. 👍 😊
w00t
try to do it in internet explorer, lol
I never knew about the details/summary and I finally learned the use for the del, ins and mark elements. Great article!
You don't need css to actually make it work. Yes, JS is required to put the attribute but I think it's fair to say that html is doing all of the heavy lifting!
JS is NOT required for making dialogs! It is possible to make them in pure CSS:
chdir.github.io/dialog-demo/
Thank you
These examples didn’t work at all on my iPhone until I signing to comment about it, then they started working. Gotta love how crappy web apps are.
Your silly project hp-ipsum.netlify.com
crashes on input of order 106.
Attaching the screenshot and by the way nice post, really helpful.
The motivation behind a silly project is that it's supposed to be silly and not perfect which is built in very little amount of time so naturally it doesn't account for all the edge cases!
WEB DEV SIMPLIFIED
You should do something on web components! That's something awesome html can do.
Did not know about the color picker. I wonder if there is a way to customize it. Thanks for the list.
Your 'silly project' can come in handy if you want an alternative to the regular ipsum text that's so common. It's still worthy of a bookmark, though. :)
Great list. Would be a very nice addition to list the browser support for each demo.
I love them! Just make sure you check them on caniuse.com bc some of them have limited support.
One of the best articles I have read!
Omggamer
OmG😯
Awesome stuff.
Finally! HTML is a programming language😁
Progress meter, I'm on my android (using Chrome) and the progress meter does nothing.
Maybe use CanIUse Embed to show each feature's support? caniuse.bitsofco.de/
Interesting, colour picker crashes dev.to app on android. Of course the app is just a web view, probably based on chrome.
these are class, would love to see more.
Or more accurately “HTML can sometimes do these things depending on what browser you’re using”.
i had no idea an input type="color" existed. Mindblown :D
Have you tested any of these to see if they're AMP compatible? Being mostly HTML I would think they would be.
The only one from that list I knew was the one. Though that one does not work properly in edge. But no surprise there, really
SO AWESOME! Thanks for this post
Internet Explorer be like 😮
Detail tag with open attr lacks support in browser(~50% of users)
Progress - extremely hard to style to support all browsers with animation.
Dialog - 70% of users support
Nice
SO AWESOME! Thanks for this post
Cool!
And 👏👏👏👏 for hp-ipsum!
❤ Thank you. Did not know about
such a nice article ananya... got some idea over the use of HTML5 semantic elaments...thank you
The color picker one is interesting, thanks!
Undefined error 😁
Great post, Ananya! I always trust in bootstrap for everything :)
Very cool. Many thanks!
Where is the kbd tag
Dropdown searchable without JavaScript ? This is awesome! Nice post 👍