DEV Community

Cover image for HTML can do that?

HTML can do that?

Ananya Neogi on June 25, 2019

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 ...
Collapse
 
theodesp profile image
Theofanis Despoudis • Edited

Help!😱 The Dropdown is chasing me!

Dropdown

Collapse
 
karlkras profile image
Karl Krasnowsky

Yeah, but given no additional Javascript it's still pretty cool.

Collapse
 
smaximov profile image
Sergei Maximov

You can make dropdowns chase you without Javascript?! Count me impressed!

Thread Thread
 
karlkras profile image
Karl Krasnowsky

🤣

Collapse
 
babrown93 profile image
Bill

DontUseAMac

...

Nice post, I already knew all of those except for the one about dialogues, newcomers will definitely find this useful.

Collapse
 
agronick profile image
Kyle Agronick

Dialog only works in Chrome based browsers. Firefox doesn't support it without enabling an option.

Thread Thread
 
petedermott profile image
Pete Dermott

Seems to work fine for me on 67.0.4

Collapse
 
n1ru4l profile image
Laurin Quast

On mobile Safari 1,2 and 6 is not working 😕

Thread Thread
 
krushndayshmookh profile image
Krushn Dayshmookh

Nothing works on safari 😂

Collapse
 
rodolfoferro profile image
Rodolfo Ferro

Yeah, the Dropdown can do that. :P

Collapse
 
murroughfoley profile image
Murrough Foley

Made me smille

Collapse
 
mafee6 profile image
Mafee7

Bug

Collapse
 
originalankit profile image
OriginalAnkit

Same here 😥

Collapse
 
szaszroland profile image
szasz.roland

I have no dropdown here.

Collapse
 
claudepache profile image
Claude Pache

If you've come across any such cool thing HTML is capable of, please mention below 😀

My preferred one. On desktop:

rendering of date picker in FF

On mobile:

rendering on Safari on iPhone

Source code:

<h1>Date picker</h1>

<label>Choose a date: <input type="date"></label>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
joao611 profile image
João Esteves

Unfortunately, it only looks this good in Firefox. Also doesn't seem to handle foreign localizations well, as is the case with Portuguese:

Collapse
 
claudepache profile image
Claude Pache

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

Collapse
 
masteryder profile image
João Filipe Ventura Coelho

The problem is it is still not supported by Safari and some other browsers...

Collapse
 
dserodio profile image
Daniel Serodio

Safari is the new IE

Collapse
 
ananyaneogi profile image
Ananya Neogi

This is great! 😀

Collapse
 
tuncatunc profile image
tuncatunc

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

Collapse
 
vbagmut profile image
Vyacheslav Bagmut

How well is it customizable?

Collapse
 
ozzyogkush profile image
Derek Rosenzweig

Nice, the datalist is 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 with details.

Collapse
 
stephanie profile image
Stephanie Handsteiner

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.

Collapse
 
ozzyogkush profile image
Derek Rosenzweig

thankfully we only have to support latest FF, Chrome, and soon Edge. i'm ok with that.

Collapse
 
atomicwrites profile image
David Castro

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.

Collapse
 
ozzyogkush profile image
Derek Rosenzweig

if you were trying in firefox i think there's a known issue around that. caniuse.com may have some info on that

Collapse
 
ratacibernetica profile image
Martín Roldán Araujo

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.

Collapse
 
claudepache profile image
Claude Pache • Edited

But we can still use these today with progressive enhancements! 🙂

... but only after you have carefully tested nonsupporting browsers. ⚠️

The “dialog” example looks very bad on latest stable Safari (12.1):

(dialog mixed over content)

but that can be fixed with proper CSS (although I’ve tested it only superficially):

dialog {
    background: white;
    border: medium solid black;
    padding: 1em;
}
dialog:not([open]) {
      display: none !important;
}

At this point, I would still test IE and Edge before using it.

Collapse
 
maxart2501 profile image
Massimo Artizzu

There's a polyfill for those, although Edge will arguably gain support as soon as it switches to Chromium.

Collapse
 
ashleemboyer profile image
Ashlee (she/her)

This post is magical, thank you!! 😭

Collapse
 
fischgeek profile image
fischgeek

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!

Collapse
 
karlkras profile image
Karl Krasnowsky

And virtually none of these are supported by ie. When will that crap of a browser just go away?

Collapse
 
hakimio profile image
Tomas Rimkus

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.

Collapse
 
karlkras profile image
Karl Krasnowsky

yeah, but you (well at least our company) has to code around these "elderly people" still using IE.

Collapse
 
triptych profile image
Andrew Wooldridge

IE is moving to Chromium soon, so it will quickly get back in sync with modern browsers.

Collapse
 
karlkras profile image
Karl Krasnowsky

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.

Collapse
 
quii profile image
Chris James

I learned about datalist 1-2 years ago and it still blows my mind. I think it comes from many horrible years of fudging it with JS

Great post

Collapse
 
loilo profile image
Florian Reuschel

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: none to the <ins> CSS, otherwise macOS font rendering will butcher some of the wavy underlines:

Screenshot of wavy underline below the word "begin", the underline is interrupted by the rather wide "g" glyph which looks inappropriate

Collapse
 
ananyaneogi profile image
Ananya Neogi

That's a great point! I've updated the demo with text-decoration-skip-ink: none 🙂

Collapse
 
ibasilk profile image
Basil K

thank you!

Collapse
 
simonewebdesign profile image
Simone Vittori

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!

Collapse
 
ananyaneogi profile image
Ananya Neogi

Thanks!
Your browser editor post was really cool! 🙂

Collapse
 
johnfound profile image
johnfound

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.

Collapse
 
rhymes profile image
rhymes

Definitely didn't know about datalist, thanks!!

Collapse
 
dan503 profile image
Daniel Tonon

If you've come across any such cool thing HTML is capable of, please mention below 😀

<input type="time"/>

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/

Collapse
 
ardhityawiedhairawan profile image
Ardhitya Wiedha Irawan

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>

Collapse
 
martinhaeusler profile image
Martin Häusler

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.

Collapse
 
cristiano profile image
cristiano

This is awesome! I've used the details element 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. 😄

Collapse
 
kartofelek007 profile image
kartofelek007

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

Collapse
 
qcgm1978 profile image
Youth

dialog element is amazing

Collapse
 
damlight profile image
Daei_F

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

Collapse
 
lisacee profile image
Lisa Cee

I love the mobile keypads. That is such a great feature. I judge sites that don't use that correctly.

Collapse
 
alexander_32 profile image
Alexander-- • Edited

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".

Collapse
 
haleyngonadi profile image
haley.

Cool. Didn't know a lot of these!

Collapse
 
voidjuneau profile image
Juneau Lim • Edited

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.

Collapse
 
ananyaneogi profile image
Ananya Neogi

Thanks! I'm glad you find them useful 🙂

Collapse
 
johncip profile image
jmc • Edited

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.

Collapse
 
hakimio profile image
Tomas Rimkus

Interestingly the demo actually works fine on Firefox without polyfills and without changing any config flags.

Collapse
 
aravindk profile image
Aravind Kothandaraman

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?

Collapse
 
arswaw profile image
Arswaw

One of the finest HTML articles on Dev.to

Collapse
 
mikejancar profile image
Mike Jancar

I've been so deep into Javascript lately, I didn't know about half of these. Thanks for sharing!

Collapse
 
papaponmx profile image
Jaime Rios

Awesome, thanks for sharing

Collapse
 
trjones1 profile image
Tramel Jones

Awesome post!!!

Collapse
 
wanoo21 profile image
Ion Prodan

Amazing things, thanks!

Collapse
 
mkrajaci profile image
Mario Krajacic

Amazing.

Collapse
 
dotorimook profile image
dotorimook

Amazing tips!!

Collapse
 
akashdeepsingh profile image
Akashdeep Singh

Great stuff! +1 for the Potter references.

Collapse
 
ragemurage profile image
Murage Munene

Very awesome post!

Collapse
 
bantisk profile image
bantisk

data list is new for me and looks promising.

Collapse
 
avalander profile image
Avalander

Alright everybody, this post won, we can close this site now.

Collapse
 
nickytonline profile image
Nick Taylor

Always top notch posts Ananya. Thanks for sharing. 💯

Collapse
 
ananyaneogi profile image
Ananya Neogi

Thanks! 😁

Collapse
 
thenathurat profile image
thenathurat

My goodness, I feel like a fool not knowing this before.

This article was supper helpful, thank you!

Collapse
 
emanuelgsouza profile image
Emanuel Gonçalves

Nice post. I don't knew that was possible to do the amazing dropdown with datalist html tag. Amazing!

Collapse
 
ilvalerione profile image
Valerio

I didn't know about the color picker!! Wow!

Collapse
 
webdeasy profile image
webdeasy.de

Great article! Thanks 😊

Collapse
 
stereobooster profile image
stereobooster • Edited

the dropdown is true surprise I see it for the first time. TIL

Collapse
 
genta profile image
Fabio Russo

I LOVE this kind of stuff.

People really need to renew their basic skills... (and browsers too :( )

Collapse
 
pinguinosod profile image
David Cautin

I had no idea about the progress and meter, I will definitely play a little with those, thank you!

Collapse
 
jsardev profile image
Jakub Sarnowski

Wow! I wasn't aware of many of these here! Thank you! :)

Collapse
 
mchungaji profile image
Martin Kiogora

Thank you for motivating this beginner. Thank you for sharing.

Collapse
 
djpandab profile image
Stephen Smith

This is a great post definitely. Thanks for all of the information in the post & responses.

Collapse
 
jacobdb profile image
Jacob Bearce

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.

Collapse
 
hashimwarren profile image
Hashim Warren

Dang! I didn't know over half of these. Thanks for this.

Collapse
 
bradtaniguchi profile image
Brad

Probably one of the most straight up informative posts I've read on DEV.to!!!

Collapse
 
sagarb3 profile image
Sagar Bhattacharya

Excellent post and it truly opens the capability of html

Collapse
 
franwatafaka profile image
Fran Sosa

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

Collapse
 
ananyaneogi profile image
Ananya Neogi

Are you talking about the colours I used in the demos?

Collapse
 
javajunky profile image
Wil

This was insightful.

Collapse
 
abdulm profile image
Abdul Muttaqin

Really cool

Collapse
 
teamallnighter profile image
Chris Connelly

Great post

Collapse
 
menosketiago profile image
Tiago Almeida

Edge Chromium cannot come soon enough...

Collapse
 
eddielewis_92 profile image
Eddie Le

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. 👍 😊

Collapse
 
trjones1 profile image
Tramel Jones

w00t

Collapse
 
tedybak profile image
Ted

try to do it in internet explorer, lol

Collapse
 
kshep92 profile image
🐏 Kevin Sheppard 🐏

I never knew about the details/summary and I finally learned the use for the del, ins and mark elements. Great article!

Collapse
 
ananyaneogi profile image
Ananya Neogi

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!

Collapse
 
alexander_32 profile image
Alexander--

JS is NOT required for making dialogs! It is possible to make them in pure CSS:

chdir.github.io/dialog-demo/

Collapse
 
originalankit profile image
OriginalAnkit

Thank you

Collapse
 
swpalmer profile image
Scott Palmer

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.

Collapse
 
bhaveshg profile image
BHAVESH GUPTA

Your silly project hp-ipsum.netlify.com
crashes on input of order 106.
Attaching the screenshot and by the way nice post, really helpful.

Collapse
 
ananyaneogi profile image
Ananya Neogi

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!

Collapse
 
mafee6 profile image
Mafee7

WEB DEV SIMPLIFIED

Collapse
 
bbarbour profile image
Brian Barbour

You should do something on web components! That's something awesome html can do.

Collapse
 
copy_pasta_chef profile image
Essien

Did not know about the color picker. I wonder if there is a way to customize it. Thanks for the list.

Collapse
 
craftyminer1971 profile image
CraftyMiner1971

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. :)

Collapse
 
drinkspiller profile image
Skye

Great list. Would be a very nice addition to list the browser support for each demo.

Collapse
 
adamszaloczi profile image
Adam Szaloczi

I love them! Just make sure you check them on caniuse.com bc some of them have limited support.

Collapse
 
_omggamer_ profile image
Omggamer

One of the best articles I have read!
Omggamer

Collapse
 
banzyme2 profile image
ENDEESA

OmG😯

Collapse
 
dictech profile image
dictech

Awesome stuff.

Finally! HTML is a programming language😁

Collapse
 
karlkras profile image
Karl Krasnowsky

Progress meter, I'm on my android (using Chrome) and the progress meter does nothing.

Collapse
 
capsule profile image
Thibaut Allender

Maybe use CanIUse Embed to show each feature's support? caniuse.bitsofco.de/

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Interesting, colour picker crashes dev.to app on android. Of course the app is just a web view, probably based on chrome.

Collapse
 
calumcalum profile image
CalumCalum

these are class, would love to see more.

Collapse
 
gnuchu profile image
John Griffiths

Or more accurately “HTML can sometimes do these things depending on what browser you’re using”.

Collapse
 
zenotds profile image
Zeno • Edited

i had no idea an input type="color" existed. Mindblown :D

Collapse
 
lonestargeek profile image
LonestarGEEK

Have you tested any of these to see if they're AMP compatible? Being mostly HTML I would think they would be.

Collapse
 
christiangroeber profile image
Christian Gröber

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

Collapse
 
luispa profile image
LuisPa

SO AWESOME! Thanks for this post

Collapse
 
tominekan profile image
Tomi Adenekan

Internet Explorer be like 😮

Collapse
 
unrasend profile image
Vlad Luchkov

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

Collapse
 
toqeer__abbas profile image
Toqeer Abbas

Nice

Collapse
 
luispa profile image
LuisPa

SO AWESOME! Thanks for this post

Collapse
 
de_nien profile image
Nienke

Cool!
And 👏👏👏👏 for hp-ipsum!

Collapse
 
narenkram profile image
Narendra Ram

❤ Thank you. Did not know about

Collapse
 
nageshwaruideveloper profile image
Nageshwar Reddy Pandem

such a nice article ananya... got some idea over the use of HTML5 semantic elaments...thank you

Collapse
 
dana94 profile image
Dana Ottaviani

The color picker one is interesting, thanks!

Collapse
 
aqeelsmith profile image
Akhil • Edited

Undefined error 😁

Collapse
 
mrm8488 profile image
Manuel Romero

Great post, Ananya! I always trust in bootstrap for everything :)

Collapse
 
simonmanning profile image
S K Manning

Very cool. Many thanks!

Collapse
 
ishanpro profile image
Ishan Tiwari

Where is the kbd tag

Collapse
 
ardhityawiedhairawan profile image
Ardhitya Wiedha Irawan

Dropdown searchable without JavaScript ? This is awesome! Nice post 👍