Software Tech

Unleash the Power of the Platform with These HTML Tags

How many times did you reach for a library when you needed a modal? I know I have so

Unleash the Power of the Platform with These HTML Tags


How many times did reach for a library when you needed a modal?

I know I have so many times…

Creating a dialog looks something like this:

Open


Hello World!
method=“dialog”>
OK

const dialogElm = document.querySelector(dialog);
const buttonElm = document.querySelector();

buttonElm.addEventListener(click, () => {
dialogElm.showModal();
})

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:


Styling the backdrop

You can customize the backdrop background using the ::backdrop pseudo element:

::backdrop {
// you can go all out, if you want 😉
background-color: lightcoral;
opacity: 0.8;
}

Here's what our styles look like in action:

Returning values from the dialog

Let's observe a basic example. This is the :

id=“show”>Open


Hello Dialog!

for=“name-input”>Enter something
id=“name-input”>
id=“ok” value=“” formmethod=“dialog”>OK

And the Javascript:

const dialogElm = document.querySelector(dialog);
const showButton = document.getElementById(show);
const outputElm = document.querySelector(output);
const nameInput = document.getElementById(name-input);
const okButton = document.getElementById(ok);

// open the modal
showButton.addEventListener(click, () => {
dialogElm.showModal();
})

// set the input value as the button value
nameInput.addEventListener(change, (e) => {
okButton.value = nameInput.value;
});


dialogElm.addEventListener(close, (e) => {
outputElm.value = dialogElm.returnValue === ? No return value. : `ReturnValue: ${dialogElm.returnValue}.`;
});

// programatically prevent the default button event and use the dialog close
// event, sending the value of the input field.
okButton.addEventListener(click, (e) => {
e.preventDefault();
dialogElm.close(nameInput.value);
})

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:

Adam Argyle's post on web.dev.



I will be the title of the content underneath
Whatever is written here will be hidden by default

Show and hide content with no JavaScript?!

Is this magic?!

No. It's part of the platform.

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 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?

Check it out:

for=“ice-cream-choice”>Choose a flavor:
list=“ice-cream-flavors” id=“ice-cream-choice” name=“ice-cream-choice”>

id=“ice-cream-flavors”>
value=“Chocolate”>
value=“Coconut”>
value=“Mint”>
value=“Strawberry”>
value=“Vanilla”>

This will show us an input in which, when we start typing, will give us suggestions:

The bonus is that we get keyboard controls for the suggestions, and easily navigate through the list.


With these attributes, we can indicate to the browser what the color of the bar would be, depending on the values.

This is best understood through an example. Let's take this fuel level example:

for=“fuel”>Fuel level:

id=“fuel”
min=“0” =“100”
low=“33” high=“66” optimum=“80”
value=“70”>
at 70/100

What you put between the opening and closing tag does not display.

This results in the a green bar in the browser:

The bar is green because our value (70) is higher than the high attribute, therefore, we get green.

If we change the value to something lower than the high value, for example, 60 our bar will change its color to yellow, without needing to change any CSS:

And if we set the value attribute to lower than the low (33) value, that would result in a red bar:

Pretty neat, no?

Flipping colors

Now, let's say we want to display something that has the opposite definition, meaning, when we have more, it's bad, and when we have less, it's .

For example, let's say we want to display how much space we have left on a hard drive. In order to do this, all we have to do is define our attributes opposite to what we did with the fuel example:

for=“disc-space”>Disc space:

id=“disc-space”
min=“0” max=“1024”
low=“750” high=“300”
value=“850”>

This will result in a red bar:

When we have more disc space (value is less than low, for example 650) we'll get a green bar:


It only has 2 attributes: max + value (the minimum value is always 0).
It only displays one color out of the box.

Here's a simple example:

value=“70” max=“100”>70 %

However the one cool feature about this element, is that if you omit all of the attributes, you get an animated loading bar with a blue moving and forward:

When using this element, just remember that there are some accessibility concerns.



It is a period of . Rebel spaceships, striking from a hidden base,
have won their first victory against the evil Galactic Empire. During the
battle, Rebel spies managed to steal secret plans to the Empire's
ultimate weapon, the DEATH STAR, an armored space station with enough power to
destroy an entire planet.

One thing to note about accessibility is that in order for screen readers to announce “marked” content, you need to use CSS in combination with :before and :afterpseudo elements, like so:

mark::before,
mark::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

mark::before {
content: ” [highlight start] “;
}

mark::after {
content: ” [highlight end] “;
}


srcset=“image-large.jpg” media=“(min-width: 1200px)”>

srcset=“image-medium.jpg” media=“(min-width: 768px)”>

srcset=“image-small.jpg”>

src=“image-fallback.jpg” alt=“Image”>

Below we can see this in action, when we resize the window, the browser renders a different image:

For more about image optimizations, I suggest checking out “Optimal Images in HTML” a post that Steve wrote a while back.

Fun with math and science (elements)

MathML is an XML based language for describing mathematical notations.

The gist of it is that there are many elements that you can use to display equations and “sciencey” stuff, in case you need to.

I will not dive in too deeply here, as I probably lack the math knowledge to actually explain anything significant.


The infinite sum
display=“block”>




n
=
1


+




1

n
2




is equal to the real number
display=“inline”>


π
2

6

>.

Which would render this:

Yeah science!


Almost every developer's favorite molecule is
C8H10N4O2, which is commonly known
as “caffeine.”

Which would yield this:

This can come in handy for your chemistry website, or if you want to add footnotes.

The Pythagorean theorem is often expressed as the following equation:

a2 + b2 = c2

Which would render this:


The ordinal number “fifth” can be abbreviated in various languages as follows:


English: 5th
French: 5ème

Which gives this result:

Or superior lettering (not sure what that is for, but you can), like for certain French abbreviations (apparently, as I've learned from MDN):

Robert a ésenté son rapport à Mlle Bernard.

That would render:

Moaaaaaar elements!




Conclusion

Happy coding!

Visually build with your components

Builder.io is a headless CMS that lets you drag and drop with your components right within your existing site.

Try it out Learn more

// Dynamically render your components
export function MyPage({ json }) {
return BuilderComponent content={json} />
}

registerComponents([MyHero, MyProducts])

Read the full post on the Builder.io blog

About Author

Yoav Ganbar

Leave a Reply

SOFAIO BLOG We would like to show you notifications for the latest news and updates.
Dismiss
Allow Notifications