Wait!

Web could do that!?

A collection of little nuggets found by

Rafael Fernandes (@adammodus)

*with a bunch of help from Prashant Palikhe (@prashantpalikhe)

Who is that pokemon?

It's Rafa!

Name:	Rafael Fernandes
Twitter:	@AdamModus
Github:	AdamModus
Website:	https://adammode.xyz

CSS

@support

Stage 4 - CR- 93.42%

@supports (display: flex) {
    div {
        display: flex;
    }
}

@supports not (display: flex) {
    div {
        float: right;
    }
}

@supports (--foo: green) {
    div {
        color: var(--foo);
    }
}

@supports (display: table-cell) and (display: list-item)
    


}

CSS.supports("display", "flex");

CSS.supports("display: flex");

nth-* functions

REC

attr()

<div data-content="This is my custom attribute text">
    ...
</div>

div:before {
    display: block;
    content: attr(data-hello);
}

:focus-within

Unoff -73.16%

input:focus {
    border: 1px solid black;
}

input:focus {
    border: 1px solid black;
}

.parent:focus-within {
    background-color: lightgray;
}

font-display

Unoff - 68.8%

body {
    font-display: block;
}

body {
    font-display: swap;
}

body {
    font-display: optional;
}

--custom-properties

Stage 4 - CR - 88.3%

:root {
    --base-color: #fff;
    --base-spacing: 1rem;
}

:root {
    --base-color: #fff;
    --base-spacing: 1rem;
}

.app {
    background-color: var(--base-color);
    padding: calc(var(--base-spacing) * 2);
}

document.documentElement.style.setProperty('--base-spacing', '12px');

rotate()

Stage 3 - WD- 94.79%

.something-to-rotate {
    transform: rotate(360deg);
}

.something-to-rotate {
    transform: rotate(400grad);
}

.something-to-rotate {
    transform: rotate(6.2832rad);
}

.something-to-rotate {
    transform: rotate(1turn);
}

display: flow-root

Stage 3 - WD - 58%

.child {
    float: left;
}

.child {
    float: left;
}

.parent::after {
    display: block;
    content: "";
    clear: both
}

.child {
    float: left;
}

.parent {
    display: flow-root;
}

object-fit: cover

Stage 4 - CR- 92%

.img {
    width: 200px;
    height: 250px;

}

.img {
    width: 200px;
    height: 250px;
    object-fit: cover;
}

pointer-events: none

Stage 5 - REC- 94%

.cant-click-this {
    pointer-events: none;
}

.click-this {
    pointer-events: auto;
}

will-change: transform

Stage 3 - WD- 87.51%

.backdrop {

    opacity: 0;
    transition: opacity 0.2s ease;
}

.backdrop.is-animating {
    opacity: 1;
}

.backdrop {
    will-change: opacity;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.backdrop.is-animating {
    opacity: 1;
}

justify-content: space-evenly

Stage 3 - WD- 87.51%

.parent {
    display: flex;
    justify-content: space-between;
}

.child {
    margin-left: 20px;
}

.parent {
    display: flex;
    justify-content: space-around;
}

.child {
    margin-left: 20px;
}

.parent {
    display: flex;
    justify-content: space-evenly;
}

.child {
    margin-left: 20px;
}

HTML

[rel="noopener"]

LS - 85%

<a href="http://some-website.com" target="_blank">Open link</a>

one.com

two.com

href="two.com" target="_blank"

window.opener

.location

window object of one.com

.href = "malicious-clone-of-one.com"

rel="noopener"

[rel="preconnect"]

WD - 75%

Eagerly connect to a domain

<link href="https://some-domain.com" rel="preconnect" crossorigin />

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <style>
        p {
            font-family: Roboto;
        }
    </style>
</head>
<body>
    <p>Hello world!</p>
</body>
</html>

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),     
      url(https://fonts.gstatic.com/s/roboto/v16/font.woff2) format('woff2');
}

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <style>
        p {
            font-family: Roboto;
        }
    </style>
</head>
<body>
    <p>Hello world!</p>
</body>
</html>

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
    <style>
        p {
            font-family: Roboto;
        }
    </style>
</head>
<body>
    <p>Hello world!</p>
</body>
</html>

[rel="preload"]

CR - 72%

<link href="/some-font-file" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">

<html>
<head>
    <link rel="stylesheet" href="./style1.css">

    <script src="./script1.js"></script>
</head>
<body>
    <div>Some div with HERO image</div>
</body>
</html>

<html>
<head>
    <link rel="stylesheet" href="./style1.css">

    <script async src="./script1.js"></script>
</head>
<body>
    <div>Some div with HERO image</div>
</body>
</html>

<html>
<head>
    <link rel="stylesheet" href="./style1.css" />
    <link rel="preload" href="http://lorempixel.com/1200/800/sports/" as="image" />
    <script async src="./script1.js"></script>
</head>
<body>
    <div>Some div with HERO image</div>
</body>
</html>

JavaScript

window.length

Number of iframes in your page

document.designMode

document.<collection>

console.log(document.all); 
console.log(document.images); 
console.log(document.links); 
console.log(document.styleSheets); 
console.log(document.scripts); 
console.log(document.forms);

console.log(document.all); // Logs HTMLCollection of all elements
console.log(document.images); 
console.log(document.links); 
console.log(document.styleSheets); 
console.log(document.scripts); 
console.log(document.forms);

console.log(document.all); // Logs HTMLCollection of all elements
console.log(document.images); // Logs HTMLCollection of all img elements
console.log(document.links); 
console.log(document.styleSheets); 
console.log(document.scripts); 
console.log(document.forms);

console.log(document.all); // Logs HTMLCollection of all elements
console.log(document.images); // Logs HTMLCollection of all img elements
console.log(document.links); // Logs HTMLCollection of all anchor elements
console.log(document.styleSheets); 
console.log(document.scripts); 
console.log(document.forms);

console.log(document.all); // Logs HTMLCollection of all elements
console.log(document.images); // Logs HTMLCollection of all img elements
console.log(document.links); // Logs HTMLCollection of all anchor elements
console.log(document.styleSheets); // Logs HTMLCollection of all styles elements
console.log(document.scripts); 
console.log(document.forms);

console.log(document.all); // Logs HTMLCollection of all elements
console.log(document.images); // Logs HTMLCollection of all img elements
console.log(document.links); // Logs HTMLCollection of all anchor elements
console.log(document.styleSheets); // Logs HTMLCollection of all styles elements
console.log(document.scripts); // Logs HTMLCollection of all script elements
console.log(document.forms);

console.log(document.all); // Logs HTMLCollection of all elements
console.log(document.images); // Logs HTMLCollection of all img elements
console.log(document.links); // Logs HTMLCollection of all anchor elements
console.log(document.styleSheets); // Logs HTMLCollection of all styles elements
console.log(document.scripts); // Logs HTMLCollection of all script elements
console.log(document.forms); // Logs HTMLCollection of all form elements

<form id="loginForm">
    <input type="text" id="username" />
    <input type="password" id="password" />
</form>

document.forms.loginForm

document.forms.loginForm.elements.username

document.forms.loginForm.elements.password

document.execCommand

document.execCommand('copy'); 
document.execCommand('cut'); 
document.execCommand('paste'); 
document.execCommand('undo'); 
document.execCommand('redo');

document.execCommand('copy'); // Copies current selection and pastes to the clipboard
document.execCommand('cut'); 
document.execCommand('paste'); 
document.execCommand('undo'); 
document.execCommand('redo');

document.execCommand('copy'); // Copies current selection and pastes to the clipboard
document.execCommand('cut'); // Cuts current selection and pastes to the clipboard
document.execCommand('paste'); 
document.execCommand('undo'); 
document.execCommand('redo');

document.execCommand('copy'); // Copies current selection and pastes to the clipboard
document.execCommand('cut'); // Cuts current selection and pastes to the clipboard
document.execCommand('paste'); // Pastes the clipboard contents at the insertion point 
document.execCommand('undo'); 
document.execCommand('redo');

document.execCommand('copy'); // Copies current selection and pastes to the clipboard
document.execCommand('cut'); // Cuts current selection and pastes to the clipboard
document.execCommand('paste'); // Pastes the clipboard contents at the insertion point 
document.execCommand('undo'); // Undoes the previous executed command
document.execCommand('redo');

document.execCommand('copy'); // Copies current selection and pastes to the clipboard
document.execCommand('cut'); // Cuts current selection and pastes to the clipboard
document.execCommand('paste'); // Pastes the clipboard contents at the insertion point 
document.execCommand('undo'); // Undoes the previous executed command
document.execCommand('redo'); // Redoes the previous undo command

Bind once

element.addEventListener('click', function onClick() {
    
}, false);

element.addEventListener('click', function onClick() {
    element.removeEventListener('click', onClick);
}, false);

element.addEventListener('click', function onClick() {
    element.removeEventListener('click', onClick);
}, {once: true});

element.addEventListener('click', function onClick() {

}, {once: true});

function setUpListeners() {
    var data = ['one', 'two', '...etc.'];
    
    window.addEventListener('load', function() {
        doSomethingWithSomeData(data);
    });
}

data is in scope of the callback and can't be GC-ed

Foreground detection

94%

document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        
    } else {
        
    }
});

document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        video.pause();
    } else {
        video.play();
    }
});

document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        stopPollingServer();
    } else {
        startPollingServer();
    }
});

document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        stopCarousel();
    } else {
        resumeCarousel();
    }
});

Intersection observer

74.5%

Detect when elements enter the viewport

or any other containing element

const observer = new IntersectionObserver();

const observer = new IntersectionObserver(onChange);

const observer = new IntersectionObserver(onChange);

function onChange(changes) {
	




}

const observer = new IntersectionObserver(onChange);

function onChange(changes) {
	




}

const imgs = [ ...document.querySelectorAll('.lazy') ]; // <img class="lazy" data-src="image.jpeg" src="" />

const observer = new IntersectionObserver(onChange);

function onChange(changes) {

	



}

const imgs = [ ...document.querySelectorAll('.lazy') ]; // <img class="lazy" data-src="image.jpeg" src="" />

imgs.forEach(img => observer.observe(img));

const observer = new IntersectionObserver(onChange);

function onChange(changes) {
	changes.forEach(change => {
	    change.target.src = change.target.dataset.src;


  	});
}

const imgs = [ ...document.querySelectorAll('.lazy') ]; // <img class="lazy" data-src="image.jpeg" src="" />

imgs.forEach(img => observer.observe(img));

const observer = new IntersectionObserver(onChange);

function onChange(changes) {
	changes.forEach(change => {
	    change.target.src = change.target.dataset.src;

	    observer.unobserve(change.target);
  	});
}

const imgs = [ ...document.querySelectorAll('.lazy') ]; // <img class="lazy" data-src="image.jpeg" src="" />

imgs.forEach(img => observer.observe(img));

Orientation

92%

Info about physical orientation of the device

window.addEventListener('deviceorientation', (event) => {




    
});

window.addEventListener('deviceorientation', (event) => {
    if (isDisplayDown) {
        video.pause();
    } else {
        video.play();
    }
});

window.addEventListener('deviceorientation', (event) => {
    if (event.alpha === 0 && event.beta === 180 && event.gamma === 0) {
        video.pause();
    } else {
        video.play();
    }
});

Web Share API

if (navigator.share) {
    navigator.share({
        title: 'My blog',
        text: 'Check out my blog - you will learn a thing or two.'

    })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

if (navigator.share) {
    navigator.share({
        title: 'My blog',
        text: 'Check out my blog - you will learn a thing or two.',
        url: 'https://my-blog.com/post',
    })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}