Things the web can do

Sometimes I stumble upon a rarely discussed feature or watch a CSS talk that has only 451 views or I am looking for a specific feature on MDN and see some awesome JavaScript API. I love these times, it feels great to explore new things that I don't know about yet. But at the same time I always think something like: "Why hadn't I heard of this before" or "Wow, Everyone should know this!" or both of them.

So, that's exactly what this post is about. Awesome features that I think are less talked about:

HTML

• output tag
• ins tag

CSS

• element() function
• border-radius slash(/)-syntax

JS

• Intl object
• Performance interface

---

Let's start with...

Performance interface

Yes, you read that right. The browser has a native interface that let's you do precise performance measurements. The important part is precise, as it let's you do measurements simply not possible with normal JS methods (like Date.now()). It lets you measure time to microseconds. Microseconds. Not Milliseconds, but a thousand of that!

You can also do all sorts of things like marks and highResTimeStamps and gives you a better alternative to Date.time() with Performance.now(). Definitely worth a look!

MDN documentation for the Performance interface

---

Intl object

Ever did a project where you had to deal with number input, or had to display a date in the right format? Well, JavaScripts Intl object is for you.

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting.

MDN documentation for the Intl object

---

border-radius slash(/)-syntax

Ok, so when I first saw this, I could not believe my eyes! I was using Enki to make my daily knowledge workout and then:

You can curve the x and y axis of a corner independently. That is awesome! Why? I immediately thought about an article I read some time ago (and gladly I had bookmarked it!) about optical illusions:

(from https://medium.muz.li/optical-effects-9fca82b4cd9a)

Further down a comment wrote:

[...] In the olden days we had to slice up corner images and use a lot of markup for rounded corners on elements, then border radius made it a lot easier, now to get optically correct rounded corners we’d have to go back to complex markup and background images.

But maybe we can use this slash-syntax to create these 'rounded' corners that also appear round! (Edit: Sadly its not possible with the slash-syntax, but it's interesting anyway )

MDN on the border-radius /-syntax

---

element() function

This is yet another awesome feature CSS has up its sleeve.

Vincent De Oliveira wrote:

To put it simply, this function renders any part of a website as a live image. A. Live. Image! As you see a DOM element rendered right in the browser, you’ll get an image of it. Every changes to that element will be immediately seen in real-time in the image, even text selection.

Some of the possibilities that element() would enable are thumbnails/previews and mirror-like effects. Sadly though this CSS feature only works in Firefox and can thus not be used for production purposes. Hopefully other browser vendors will follow the early efforts from Firefox at some point in the future!

(Credit Vincent De Oliveira)

Read Vincent De Oliveira's full article

---

ins tag

The HTML ins tag represents something that is/was inserted into the current document.

From MDN:

The HTML <ins> element represents a range of text that has been added to a document.

This is a useful tag if you are picky about your markup (as you should be!) because you can use it with an additional cite and/or datetime attribute. cite let's you add an URI which explains the change and datetime let's you add a timestamp for when the change happened.

More on the ins element on MDN

---

output tag

Similar to ins, output should be used for content that is the result of an equation. Nothing special, but still cool!

More on the output element on MDN

---

That's it! Thank you for reading :)