Ananya Neogi

Posted on Jun 25, 2019

HTML can do that?

#webdev #html

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

1. Dropdown with searchable text

2. Dialog box

3. Measuring progress

Styling this is not an easy task, I agree! But there's always some workaround and it's nicely explained here - How to style progress element

4. Expand/collapse details

5. Show correct mobile keypad based on input type

6. Add a simple colour picker

7. Highlight text

8. Create a direct phone number link

Similar to email link with mailto we can also create a direct phone number link.

<a href="tel:+917272727272">+91-7272727272</a>

9. Show deletion and insertion of text

10. Edit page contents

Wish to make your own browser editor? You can do that too - How to make browser editor with html.

Note: Not all browsers have implemented these elements and attributes. But we can still use these today with progressive enhancements! 🙂

HTML is the foundation of any webpage, it's only wise to pay real good attention to it. Semantic markup not only helps in SEO but also helps in accessibility.

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

In other news, I made a silly project : https://hp-ipsum.netlify.com

Follow me on twitter @_ananyaneogi to get more tidbits 😊

Top comments (135)

Theofanis Despoudis • Jun 26 '19 • Edited

Help!😱 The Dropdown is chasing me!

Karl Krasnowsky • Jun 27 '19

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

Sergei Maximov • Jul 2 '19

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

Karl Krasnowsky • Jul 2 '19

🤣

Bill • Jun 26 '19

DontUseAMac

...

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

Kyle Agronick • Jun 27 '19

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

Pete Dermott • Jun 28 '19

Seems to work fine for me on 67.0.4

Laurin Quast • Jun 30 '19

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

Krushn Dayshmookh • Jul 11 '19

Nothing works on safari 😂

Rodolfo Ferro • Jul 1 '19

Yeah, the Dropdown can do that. :P

Murrough Foley • Jul 18 '20

Made me smille

Mafee7 • Mar 14 '21

Bug

OriginalAnkit • Sep 5 '19

Same here 😥

szasz.roland • Apr 16 '21

I have no dropdown here.

Claude Pache • Jun 26 '19

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

My preferred one. On desktop:

On mobile:

Source code:

<h1>Date picker</h1>

<label>Choose a date: <input type="date"></label>

João Esteves • Jun 30 '19

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

Claude Pache • Jul 1 '19

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

João Filipe Ventura Coelho • Jun 28 '19

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

Daniel Serodio • Jul 5 '19

Safari is the new IE

Ananya Neogi • Jun 27 '19

This is great! 😀

tuncatunc • Jun 27 '19

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

Vyacheslav Bagmut • Jul 9 '19

How well is it customizable?

Derek Rosenzweig • Jun 25 '19

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.

Stephanie Handsteiner • Jun 26 '19

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.

Derek Rosenzweig • Jun 27 '19

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

David Castro • Jun 26 '19

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.

Derek Rosenzweig • Jun 27 '19

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

Martín Roldán Araujo • Jun 26 '19

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.

Claude Pache • Jun 26 '19 • 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):

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.

Massimo Artizzu • Jun 27 '19

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

Ashlee (she/her) • Jun 26 '19

This post is magical, thank you!! 😭

fischgeek • Jun 26 '19

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!

Karl Krasnowsky • Jun 27 '19

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

Tomas Rimkus • Jun 27 '19

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.

Karl Krasnowsky • Jun 27 '19

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

Andrew Wooldridge • Jun 28 '19

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

Karl Krasnowsky • Jun 28 '19

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.

Chris James • Jun 26 '19

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

Florian Reuschel • Jul 1 '19

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: