Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>
Idioma: En

Unleash the Power of the Platform with These HTML Tags

Posted on Aug 15 • Originally published at builder.io on Aug 15 Get ready to spice up your HTML game with some seriously underrated tags! In this blog post we'll uncover some hidden gems that will make your web development skills shine brighter than a disco ball. From the sassy

tag to the snazzy tag, we'll cover a variety of elements that will take your web pages from drab to fab. So, buckle up and let's explore some exciting new ways to level up your HTML coding skills.How many times did you reach for a library when you needed a modal?I know I have so many times…However, since last year, when Safari and Firefox added support for the element, you can finally “use the platform”!Creating a basic dialog looks something like this:Whatever is in the tag will be hidden from a user. The button in the above code is the means for the user to open the dialog, but in order for this to work we’d need to add a bit of JavaScript:In the video below, you can see how clicking on the open button opens the modal, and the OK button inside the dialog closes it:Let’s break it down:You can customize the backdrop background using the ::backdrop pseudo element:Here's what our styles look like in action:When using a
element inside a element, it’s possible to get a return value from the close event.Let’s observe a basic example. This is the HTML:And the Javascript:The next video shows how you can open the modal, fill in the inner form, close it using the confirmation button, and get the value of the input outside of it:For a deeper dive into the intricacies of the element, I suggest checking out Adam Argyle’s post on web.dev.Using
and allows the creation of collapsible sections of content with a summary that can be clicked to reveal or hide the details:In the video below we can see how clicking on the content reveals the rest:Show and hide content with no JavaScript?!Is this magic?!No. It’s part of the platform.You can also control the open/close state with JS, but the beauty is you don’t have to. In order to render an open widget, one can add an open attribute to the
element.Notice that we do get some browser default styles like the triangle on the left.If we wanted to change styles we could use the list-style CSS property to change the triangle and the details[open] selector to change the content styles based on the open state.Check out a working example of these elements below:Did you know that your browser has an element that basically gives you an autocomplete with no JavaScript?Using ,

Related Articles



This post first appeared on VedVyas Articles, please read the originial post: here

Share the post

Unleash the Power of the Platform with These HTML Tags

×

Subscribe to Vedvyas Articles

Get updates delivered right to your inbox!

Thank you for your subscription

×