This Fall has been busy for me, however, many new things have been discovered while browsing the internet and I’d like to share them with you.

1. FocusEvent.relatedTarget property
2. CSS overscroll-behavior property
3. currentColor value for color properties
4. Content model and Phrasing content
5. CSS [class] attribute selector
6. Edge browser on MAC
7. JSON.parse improves JavaScript performance
8. CSS focus-within property
9. Easy way to generate arrays with JavaScript
10. The :not(:placeholder-shown) selector
11. CSS :empty selector
12. Javascript two dots to use toString on numbers
13. Ordered list attributes
14. JavaScript .matchMedia() method
15. CSS font-variant-numeric: tabular-nums property
16. CSS counters
17. Speech Synthesis
18. The future of web styling

1. JavaScript FocusEvent.relatedTarget property

This property returns previously focused or blurred element, depending on the event.

document.querySelector('input')
  .addEventlistener('focus', (event) => {
    console.log(event.target); // the element that received focus
    console.log(event.relatedTarget); // the element that lost focus (if any)
  });

May come in handy when the user is “tabbing” around.

FocusEvent.relatedTarget property on MDN

2. CSS overscroll-behavior property

CSS overscroll-behavior property is used to prevent scrolling of parent containers from within overflow containers.

.container-aside {
  overflow-y: scroll;
  overscroll-behavior: none;
}

I learned it from Ben Nadel, check out his awesome article on overscroll-behavior
or
full docs of overscroll-behavior on MDN

3. CSS currentColor keyword

The currentColor keyword represents the value of an element’s color property.

div { 
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

So in a way it works as a CSS custom property.

currentColor on MDN

4. Content model and Phrasing content

Every HTML element have Content model and Phrasing content. Which means that in each HTML element can only have specific HTML elements inside it. For instance p element cannot nest another p element.

In short Content model is:

Each element defined in this specification has a content model: a description of the element's expected contents...
The contents of an element are its children in the DOM.
—HTML Standart

Phrasing Content

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level.
—HTML Standart

5. CSS [class] attribute selector

In case you need to increase selector specificity and have no way to manipulate HTML you can append [class] attribute.

.active {
  color: red; /* specificity 0 - 1 - 0 */
}

.active[class] {
  color: red; /* specificity 0 - 2 - 0 */
}

6. Edge browser on MAC

New Edge browser is available for MAC users.

The new Microsoft Edge is built on the Chromium engine, providing best in class compatibility with extensions and web sites.

Currently, Microsoft offers three download versions:

1. Beta (Major update every 6 weeks)
2. Dev (Updated weekly)
3. Canary (Updated daily)

However the first stable version will be available on January 15, 2020 according to Microsoft.

7. JSON.parse improves JavaScript performance

Because the JSON grammar is much simpler than JavaScript’s grammar, JSON can be parsed more efficiently than JavaScript.

Mathias Bynens gives a talk on how tho speed up your app faster.

8. CSS focus-within property

This property is assigned to a parent element. The styling rules are applied when any child element receives focus.

div:focus-within {
  background: pink;
}

focus-within on MDN

9. Easy way to generate arrays with JavaScript

Tomek Sułkowski gives an awesome tip on how to generate useful arrays.

arr = [...Array(10)]
// [undefined, undefined, undefined, undefined, ...]

arr = [...Array(10).keys()]
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

arr = [...Array(10).fill(true)]
// [true, true, true, true, true, ...]

arr = [...Array(10)].map(Math.random)
// [0.58421901676177, 0.9937913695104534, 0.07661896593894757, 0.7450181633715036, ...]

10. The :not(:placeholder-shown) selector

This selector combo allows you to toggle element next to input or textarea based whether the placeholder is shown.

Given HTML:

<input placeholder="Search...">
<button>Search!</button>

CSS:

button {
    display: none;
}

input:not(:placeholder-shown) + button {
    display: block;
}

11. CSS :empty selector

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace)
—MDN

12. Javascript two dots to use toString on numbers

This approach allows converting number to a string.

345..toString()
// "345"

13. Ordered list attributes

The ordered list element has some pretty useful attributes like reversed and start.

reversed:

This Boolean attribute specifies that the list’s items are in reverse order. Items will be numbered from high to low.

start:

An integer to start counting from for the list items.

14. JavaScript .matchMedia() method

There is a way to detect the media-query and respond to its change.

The Window interface's matchMedia() method returns a new MediaQueryList object representing the parsed results of the specified media query string.
—MDN

15. CSS font-variant-numeric: tabular-nums property

tabular-nums value is activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables.

The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
—MDN

16. CSS counters

There’s an ability to add a counter in CSS, for example, you can number the headings on a page. This can be done with the help of counter-increment and counter-reset properties.

<div>
  <h2>Intro</h2>
  <p>Intro text...</p>

  <h2>Main</h2>
  <p>Main text...</p>

  <h2>Conclusion</h2>
  <p>Conclusion text...</p>
</div>

div {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "§" counter(section) ". ";
}

17. Speech Synthesis

Native Web API has built in Speech Synthesis. You can generate speech right in your browser with a different options, like language, voice, rate, pitch.

Official MDN docs
and
Demo

18. The future of web styling

On the last Chrome Dev Summit (2019) a lot of new features CSS and JS has been announced, like:

1. border-block property
2. :is() selector
3. backdrop-filter property

There are just too many to list them all here, I strongly advise to watch a video and make notes.

And to finish it off, lists can have the ability to style the marker box with CSS.