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 isprecise, as it let's you do measurements simply not possible with normal JS methods (likeDate.now()). It lets you measure time tomicroseconds. Microseconds. Not Milliseconds, but a thousand of that!

You can also do all sorts of things likemarks andhighResTimeStamps and gives you a better alternative toDate.time() withPerformance.now(). Definitely worth a look!

MDN documentation for thePerformance 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, JavaScriptsIntl 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 theIntl 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:

(fromhttps://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 thatelement() 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 HTMLins 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 additionalcite and/ordatetime attribute.cite let's you add an URI which explains the change anddatetime let's you add a timestamp for when the change happened.

More on theins element on MDN

output tag

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

More on theoutput element on MDN

That's it! Thank you for reading :)