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 highResTimeStamp
s 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 :)
Top comments (1)
Can you please specify features of AFI. It would be great thing for me to read about new and informative things. The best essay writing service provides your best tools for assignment writing.
Some comments have been hidden by the post's author - find out more