DEV Community: zhangbao

What is display: flow-root?

zhangbao — Thu, 26 Dec 2019 09:20:48 +0000

display: flow-root: The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.

So, using display: flow-root means

you don't have to use .clearfix hacks, and
won't hide box-shadow comparing to use overflow: hidden

References:

display: flow-root, from CSS-Tricks
display: flow-root versus clearfix

What does CSS property pointer-events mean

zhangbao — Wed, 25 Dec 2019 07:27:38 +0000

The CSS property pointer-events means weather a element should react to Pointer events.

What is Pointer Events in JavaScript

zhangbao ・ Dec 25 '19

#javascript

If you use pointer-events: none, you'll find the element does't react to any Mouse and Touch events.A bit like it doesn't exist in the document.

pointer-events, from MDN

What is Pointer Events in JavaScript

zhangbao — Wed, 25 Dec 2019 04:14:52 +0000

Roughly, You can think Pointer Events as a combination of Mouse and Touch events.

document.addEventListener('mousedown', () => {
  // do something on mousedown
});

document.addEventListener('touchstart', () => {
  // do something on touchstart
});

same as below

document.addEventListener('pointerdown', () => {
  // do something on mousedown or touchstart
});

Reference:

Consistent access to browser events with Pointer Events API

The HTML5 Pointer Events API: Combining touch, mouse, and pen