Web development is constantly evolving, and staying up to date with the latest changes is essential. In the world of HTML, CSS, and JavaScript (JS), recent advancements have brought long-awaited improvements that address previous limitations. These changes empower developers to create more immersive and dynamic websites. In this blog, we’ll explore the latest transformations in HTML, CSS, and JS that are improving web development.

HTML

Native modals

The dialog element currently has great support in modern browsers, allowing us to create much simpler modals from scratch without the need for a centered window with a backdrop and related JavaScript.

Things to consider:

1. In JavaScript, you can use element.show() or element.showModal() to render the dialog. The last one will open the modal.
2. There is the pseudo-element ::backdrop allows for customization of the modal’s background.
3. The modal can be closed by pressing escape, calling element.close() or using formmethod="dialog".
4. In CSS you can use dialog[open] to create some transition.

    #dialogadvance {
      .dialog-header {
        display: flex;
        justify-content: space-between;
      }
      background-color: whitesmoke;
      display: block;
      opacity: 0;
      scale: 0;
      transition: all 1s;
      padding: 1em 2em;
    }

    #dialogadvance[open] {
      opacity: 1;
      scale: 1;
    }

Show dialog and Code

Popover

This new element is currently with a bad support in Firefox but it is coming, with this you won’t need to use JavaScript to show the popopover:

Open popover

This is the only code needed:

<button popovertarget="popoveradvance" popovertargetaction="toggle">Open popover</button>

<div id="popoveradvance" popover="auto" class="popover">
  It works! Click again to close it.
</div>

Of course you can controll it with javascript using hidePopover(), showPopover() and togglePopover().

CSS

Simplified media queries

When I was learning, media queries always seemed a bit confusing to me. Now, we can use > or <:

@media (max-width: 1250px) {
  /* css */
}

@media (width <= 1250px) {
  /* css */
}

Additionally, we can also create ranges very easily:

@media (30em <= width <= 50em) {
  /* css */
}

Nesting

Finally, nesting can now be done without the need to use SASS. Furthermore, it’s supported in all modern browsers. In this case, we also have the nested selector “&” available. Usage example:

.foo {
  .bar {
    /* css */
  }
  .containerClass & {
    /* css */
  }
}

These lines would have been the same as writing .foo .bar {} and .containerClass .foo {} respectively.

The only limitation is that we can’t use ‘&’ for concatenation, so things like this wouldn’t be possible:

.foo {
  &__bar {
  }
}

I think this, along with CSS variables, is a step forward in not having to use SASS.

Container queries (size)

This feature allow us to organize the children based on the size of the container. That’s how it would be used:

  @container (width > 15em) {
    /* css */
  }

To utilize this, we need to declare a context within an element. This can be done simply by using the container-type property within an element. Optionally, you can also name the container with:

.post {
  container-type: inline-size;
  container-name: sidebar;
}

Alternatively, you can also use the shorthand:

.post {
  container: sidebar / inline-size;
}

Then, to use this named container, you would simply do:

@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}

Also, when adding styles within the container, new length units emerge, which we can utilize.

For more information on this, I invite you to read the documentation on MDN.

Container queries (style)

This feature doesn’t have a good support but it will allow us to organize the children based on the style of the container.

It would function in a similar manner to the previous one. We could have something like this:

@container style(color: green) and style(background-color: transparent),
    not style(background-color: red),
    style(--themeBackground),
    (max-width: 100vw) or style(max-width: 600px) {
  /* css */
}

To delve further into this topic, I invite you to continue reading here Container Style Queries.

JavaScript

at method in String and Arrays

With this method we can retrieve elements at some position, the advantage is that we can use negative numbers, so the following statement would return 2:

[1, 5, 2].at(-1)

findLast and findLastIndex

findLast give us the final element that match the condition and findLastIndex, as you can imagine, gives the index of this last element.

const list = [16, 20, 11, 14, 777]
list.findLast((element) => element % 2 === 0)

Wrapping up

JavaScript has made significant strides over time, to the extent that it rendered jQuery unnecessary. I like to envision an ideal world where CSS, HTML, and JavaScript suffice for front-end development without the need for frameworks. Therefore, I celebrate any advancements in these areas. Hopefully, I’ll soon be writing another blog because even more advancements have been released.

Thank you for your time!