Что веб грядущий нам готовит

.class
    color #fff
    background #f00
    border-color #fff

    ::after
        content 'Hello!'

⬆️ Прогрессивное
улучшение

🔄 Рефакторинг

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.parent {
    display: flex;
    place-items: center;
}

.card__media {
    aspect-ratio: 2 / 3;
    background-image: url("test.jpg");
}
.container {
    contain: layout inline-size;
}

@container (min-width: 480px) {
    .card__media {
        aspect-ratio: 16 / 9;
        background-image: url("test-wide.jpg");
    }
}

🏃‍♂️ Быть впереди

🚀 Ускорение разработки

✏️ Влияние на веб

Internet Explorer

<meta http-equiv="Page-Enter"
      content="RevealTrans(Duration=0.600, Transition=6)">

async function navigateToSettingsPage() {
    await document.documentTransition.prepare({
        rootTransition: 'cover-up',
        sharedElements: [element1, element2, element3],
    });

    updateDOMForSettingsPage();

    await document.documentTransition.start({
        sharedElements: [element1, element4, element5],
    });
}

Internet Explorer 4+

filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.9659258262890683,
    M12=-0.2588190451025207,
    M21=0.2588190451025207,
    M22=0.9659258262890683,
    SizingMethod='auto expand');

transform: rotate(15deg);

Дискомфорт
↓
Новая фича

Дискомфорт
↓
Обсуждение
↓
Новая фича

Дискомфорт
↓
Обсуждение
↓
Стандарт

🌐 Браузеры

📃 Стандарты

💽 Релизы браузеров

var gamepads = {};

function gamepadHandler(event, connecting) {
    var gamepad = event.gamepad;

    if (connecting) {
        gamepads[gamepad.index] = gamepad;
    } else {
        delete gamepads[gamepad.index];
    }
}

window.addEventListener("gamepadconnected", function(e) {
    gamepadHandler(e, true);
}, false);
window.addEventListener("gamepaddisconnected", function(e) {
    gamepadHandler(e, false);
}, false);

Added support for lab(), lch(), hwb() color syntaxes.

<script type="text/javascript">
    var recognition = new SpeechRecognition();
    recognition.onresult = function(event) {
        if (event.results.length > 0) {
            q.value = event.results[0][0].transcript;
            q.form.submit();
        }
    }
</script>

<form action="https://www.example.com/search">
    <input type="search" id="q" name="q" size=60>
    <input type="button" value="Click to speak" onclick="recognition.start()">
</form>

🐥 Канарейки

🔐 Fission

👩‍💻 Деврелы 👨🏻‍💻

📬 RSS

📃 Cпецификации W3C

Working Draft (WD)
↓
Candidate Recommendation (CR)
↓
W3C Recommendation (REC)

.foo {
    color: blue;
    & > .bar { color: red; }
}

.foo {
    color: red;
    @nest .parent & {
        color: blue;
    }
}

📃 Cпецификации TC39

Stage 0
↓
Stage 1
↓
Stage 2
↓
Stage 3
↓
Stage 4

const birthday = Temporal.PlainMonthDay.from('12-15');

const birthdayIn2030 = birthday.toPlainDate({ year: 2030 });
birthdayIn2030.dayOfWeek; // => 7

assert(birthdayIn2030 instanceof Temporal.PlainDate);
assert.equal(birthdayIn2030.toString(), '2030-12-15');

const time = Temporal.PlainTime.from('12:38:28.138818731');

const wholeHour = time.round({
    smallestUnit: 'hour',
    roundingMode: 'floor'
});

assert.equal(wholeHour.toString(), '12:00:00');

🧪 Эксперименты

Chrome Canary

• Перейти в chrome://flags/
• Включить “Experimental Web Platform features”.
• Перезагрузить браузер.
• Играться!

Firefox Nightly

• Перейти в about:config
• Включить “browser.preferences.experimental”.
• Перезагрузить браузер.
• Играться!

{
    "file_handlers": {
        "graph": {
            "extensions": [ "svg" ],
            "include_directories": false,
            "types": [ "image/svg+xml" ],
            "verb": "open_with"
        },
        "raw": {
            "extensions": [ "csv" ],
            "include_directories": false,
            "types": [ "text/csv" ],
            "verb": "open_with"
        }
    }
}

🥚 Stage 1

const array = [1, 2, 3, 4, 5];

// groupBy groups items by arbitrary key.
// In this case, we're grouping by even/odd keys
array.groupBy(i => {
    return i % 2 === 0 ? 'even': 'odd';
});

// =>  { odd: [1, 3, 5], even: [2, 4] }

📝 Explainers

<style>
    .styled-select::part(button) {
        background-color: red;
    }
    .styled-select:open::part(button) {
        background-color: lightgray;
    }
</style>
<select class="styled-select">
    <option>choice 1</option>
    <option>choice 2</option>
</select>

await new EyeDropper().open();
// { sRGBHex: '#ff0000' }

EyeDropper API
⌛️
03.08.2021

App History API
⌛️
03.02.2021

URLPattern
⌛️
27.08.2019

const p = new URLPattern({
    hostname: ':subdomain.example.com',
    pathname: '/*/:image.jpg'
});

const result = p.exec('https://imagecdn1.example.com/foo/cat.jpg');
// result.hostname.groups.subdomain will be 'imagecdn1'
// result.pathname.groups[0] will be 'foo', corresponding to *
// result.pathname.groups.image will be 'cat'

😡 Если мне плохо,
я могу...

🗣 Пожаловаться
коллегам

📱 Пожаловаться
в соц. сетях

⚠️ Принести issue

💻 Сделать pull request

🎩 Эксперты

🐞 Приносить баги

Даже самое маленькое создание может изменить будущее.
Галадриэль, Властелин Колец: Братство кольца