What's new in the basics of Web development?

We got ChatGPT...

.

.

.

Wait I'm just kidding, but we do get new updates in normal web technologies which get neglected because we are so used to doing the tasks using these so-called frameworks which are built on top of these base techs. So here I'm sharing 10 new updates which are added to the basic stock of HTML, CSS and JS.

1. Native <dialog> element in HTML

It is a lot of hassle to create a modal in HTML, if you go with the basics you have to use many lines of code in HTML, CSS as well as JavaScript or use 3rd party libraries which provide the functionality built-in using custom methods. But now we have a new <dialog> element that will do the same but will not use any kind of external coding to work.

<dialog id="new_dialog">
? <form method="dialog">
? ? <button type="submit">With Submit Form</button>
? </form>
? <button onClick="new_dialog.close()">Without form</button>
?</dialog>

<button onClick="new_dialog.showModal()">OpenModal</button>

<style>
  dialog::backdrop {
  ? background-color: rgba(0,0,0,0.5);
   }
</style>        

It makes creating and customising the "Modal" very easy.

2. Popover in HTML

We can now use popover in HTML using a basic syntax and don't require extra JavaScript code to make it work. But since this is experimental we have to enable the experimental feature in the browser.

And to add the popover, you can try the below code:

<button popovertarget="popit">Open Popover</button>

<div id="popit" popover>
? <p>something in popover</p>
</div>        

3. Inert property in HTML

If you want to show that a button lacks the ability to move or focus then you can use the inert property as shown below.

<button inert>Don't touch me!!!</button>        

4. Color Mixer in CSS

You can now mix colours directly in CSS, earlier you have to use gradients or CSS preprocessor to accomplish this task.

button {
  background-color: color-mix(in srgb, blue, green);
}         

5. Container queries

Similar to @media now we have @container queries, which will work based on the available width of the container same as media queries works with the available width of the devices.

section {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card {
    background-color: red;
    font-size: max(2rem, 1.5em + 2cqi);
  }
}
        

6. Nesting in CSS

You can now nest CSS similar to SCSS or LESS.

.container {
  .box {
    background: white;
  }
  .box2 {
    background: red;
    .button {
      color: white;
    }
  }
}         

7. CSS transform is divided

Transform property is now divided into individual properties for translate, rotate and scale.

.container {
  translate: 20% 0;
  scale: 2;
  rotate: 85deg;
}        

8. CSS Initial Letter Property

We can now capitalise the initial letter of a text as we have seen many magazines do.

.article {
  initial-letter: 3 2;
}        

9. New array functions in JavaScript

Earlier we had to use array[array.length -1] to get the last item from the list but now we have .at which will use negative indexes to give us items from the end of the list.

var arr = [1, 2, 3, 4, 5, 6]
console.log(arr.at(-1)) //6
console.log(arr.at(-3)) //4        

10.Importmap in JavaScript

Using the "importmap", we can now import multiple files in JavaScript, this will improve the import process in JS as we'll be able to import required modules only.

<script type="importmap">
  {
    "imports": {
      "imp1": "./src/helper/this.js",
      "imp2": "https://cdnjs.xyz.com/this.js"
    }
  }
</script>        

There are many more updates that are in the queue and are experimental as of now but once released will provide much more readability and ease of code.

Note: All the information in this article is based on data acquired from the internet, these techniques may require additional changes in your browsers or system to be able to work. Let me know if you face any issues with the above-mentioned items and their implementations.