HTML, немножко CSS и чуть-чуть JS

Вольный перевод статьи.

Думая о будущем web, я думаю о небольшом количестве JS api и о невероятных  возможностях HTML.

 

HTML — моя любимая часть стека

HTML — простой, надежный и мощный. Он постоянно улучшается.

Сообщество разработчиков в целом, а также разработчики браузеров, кажется, особенно сосредоточены на «низкоуровневых JS api», которые вы можете использовать для создания ваших web-продуктов. И это круто!

Web-компоненты довольно удобны. Но это не то, что я хочу.

Мне нужны нестандартные, готовые к использованию HTML-компоненты, которые будут интерактивными и будут обеспечивать решения проблем web-компонентов. И я хочу, чтобы они были доступны по умолчанию.

Я не хочу думаю о том, как использовать такие компоненты, как табы, выпадающие меню, и модальные окна. Я не хочу писать JS, чтобы заставить их работать. Или думать о том, какие role и aria атрибуты нужно написать, чтобы пользовательские скрин-ридеры понимали, что происходит. И я не хочу надеяться на то, что сторонний компонент верно выполнит за меня эту работу.

Я просто хочу, чтобы это было по умолчанию.

 

Я все еще хочу кое-что контролировать

Я не хочу писать только HTML.

Я хочу так же иметь возможность стилизовать элементы с помощью CSS. Иметь возможность повесить на них свои JS обработчики.

Но так же я хочу иметь возможность использовать их прямо из коробки, чтобы они просто работали без моего вмешательства.

Представьте, что мы можем добавить выпадающие меню на нашу страницу следующим образом:

<dropdown>
	<toggle>Menu Item 1</toggle>
	<ul>
		<li><a href="#">Sub Item 1</a></li>
		<li><a href="#">Sub Item 2</a></li>
		<li><a href="#">Sub Item 3</a></li>
	</ul>
</dropdown>

Представьте, что мы можем стилизовать это меню так:

dropdown:before {
	content: "+";
}

dropdown[expanded]:before {
	content: "-";
}

Или, что мы можем повесить свой обработчик так:

document.addEventListener('expand', function (event) {
	// Сделать что-то с раскрытым меню
	console.log(event.target);
});

HTML, немного CSS и чуть-чуть JS — вот, что я хочу в будущем!


Оригинал статьи: ссылка
Автор статьи: Alex. Категория: HTML
Дата публикации: 31.10.2020