@chrisyipw

CSS3 Tricks

‘cubic-bezier’ timing function

`transition: time property cubic-bezier(p1, p2, p3, p4);’

Flexible ellipses

border-radius: 200px / 150px;

or

border-radius: 50%;

pointer-events

pointer-events: auto;

Detecting ‘pointer-events’ (via verou.me):

var supportsPointerEvents = (function(){
    var dummy = document.createElement('_');
    if(!('pointerEvents' in dummy.style)) return false;
    dummy.style.pointerEvents = 'auto';
    dummy.style.pointerEvents = 'x';
    document.body.appendChild(dummy);
    var r = getComputedStyle(dummy).pointerEvents === 'auto';
    document.body.removeChild(dummy);
    return r;
})();

‘pointer-events’ allows you to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

tab-size

tab-size: 4;

The tab will presents as long as 4 whitespace.

It’s good for article publishing, in the past, we use whitespace or padding to indent paragraphs, but now, you can use tab.