Updated deprecated banners and iconography

[Rumyra]

We have updated our labelling of deprecated technologies to primarily be powered by the web features statuses: ‘Not recommended’ and ‘Not recommended to be removed’.

This improves the banners we show on our pages by also including a reason and date of removal where appropriate.

Currently this affects the following directories:

• All of /web/ aside from accessibility
• /webassembly/

We’ll be opening up some ‘tidy up’ PRs to ensure this covers accessibility as well.

If there are pages on MDN where a deprecated banner is required but is not covered by web features, the frontmatter status: deprecated will be used to display this labelling.

We have also replaced the bin icon with baseline iconography. Further work is planned to roll this out site wide and also for “limited availability” and “newly available” statuses, making our icons more consistent throughout.

I will be updating our guidelines to reflect this over the coming days. The deprecated macro {{deprecated_header}} has, well, been deprecated and will no longer be used. If you are writing reference pages, you do not need to include any status information in the frontmatter, as this will be automated via baseline and the web features dataset. If you would like to display a deprecated banner on a guide or a how-to, you can still use the frontmatter status to do so.

[abextm]

I find the discouraged/deprecated ◇◇ symbol basically meaningless, and nobody I have asked has been able to identify what it is trying to convey.

[pransh15]

Hey @abextm, that's interesting! I think you might be talking about the Baseline icons here? The limited availability icon is trying to show a ❌ basically.

These are what the deprecated notes look like on MDN, which I believe are pretty straightforward.

Let me know if I misunderstood your comment! 😄

[abextm]

I am talking about the deprecated icon, as shown here:

[Rumyra]

Documentation updates tracker mdn/mdn#835

PR mdn/content#45345