Найти в Дзене
Герман Геншин

CSS взломал матрицу: x86-эмулятор без единой строчки JavaScript прямо в вашем браузере!

x86 — архитектура, на которой построено большинство современных ПК, серверов и игровых приставок. Эмуляторов для неё хватает с запасом, но этот проект ломает шаблоны: его полностью реализовали на CSS — языке, казалось бы, предназначенном только для оформления веб-страниц. До этого уже появлялись x86-эмуляторы, которые запускаются прямо в браузере, такие как v86, отладчик Jakub Beránek и JSLinux. Но у свежего x86CSS от Lyra Rebane совсем другой подход: машинный код x86 исполняется прямо в браузере — без JavaScript и WebAssembly, исключительно за счёт возможностей самого CSS. CSS обычно отвечает лишь за внешний вид, но благодаря появлению новых функций — if(), @functions и другим расширениям — теперь в нём можно творить гораздо большее. Пока что x86CSS работает только в браузерах на Chromium (Google Chrome, Microsoft Edge, Vivaldi), потому что в Firefox и Safari нужных CSS-возможностей пока нет. На демонстрационной странице запускается программа на Си, скомпилированная GCC в машинный ко

x86 — архитектура, на которой построено большинство современных ПК, серверов и игровых приставок. Эмуляторов для неё хватает с запасом, но этот проект ломает шаблоны: его полностью реализовали на CSS — языке, казалось бы, предназначенном только для оформления веб-страниц.

До этого уже появлялись x86-эмуляторы, которые запускаются прямо в браузере, такие как v86, отладчик Jakub Beránek и JSLinux. Но у свежего x86CSS от Lyra Rebane совсем другой подход: машинный код x86 исполняется прямо в браузере — без JavaScript и WebAssembly, исключительно за счёт возможностей самого CSS.

CSS обычно отвечает лишь за внешний вид, но благодаря появлению новых функций — if(), @functions и другим расширениям — теперь в нём можно творить гораздо большее. Пока что x86CSS работает только в браузерах на Chromium (Google Chrome, Microsoft Edge, Vivaldi), потому что в Firefox и Safari нужных CSS-возможностей пока нет.

На демонстрационной странице запускается программа на Си, скомпилированная GCC в машинный код для 8086 и исполняемая через CSS. Эмулятор рисует треугольник Паскаля, считает числа Фибоначчи или даже позволяет сыграть в Horsle — версию Wordle, в которой слово всегда одно и то же: «horse».

-2

Автор рассказывает: «Я реализовал почти всю архитектуру x86, за исключением нескольких команд и деталей, которые оказались неудобными или просто не нужны были. Я обычно пишу нужную мне программу на C, компилирую её разными настройками GCC, а потом добавляю в эмулятор только те инструкции, которые реально требуются для её запуска. Так что все мои программы всегда работают».

Чтобы эмулятор работал стабильно, по умолчанию он использует таймер на JavaScript — это ускоряет и повышает надёжность. Но даже если пользователь выключит скрипты, эмулятор не остановится: вместо JS-таймера сработает CSS-анимация и контейнерные запросы стилей, так что всё продолжает функционировать!

-3

Новый JavaScript-движок справляется с 10 килобайтами ОЗУ!

Теперь JavaScript реально можно запускать почти на любом устройстве.

Этот эмулятор скорее эксперимент, чем инструмент для повседневной работы, но он показывает, на что теперь способен CSS. Времена простых визуальных эффектов издавна в прошлом: теперь CSS может даже запускать эмулятор x86. Если кто-то всё ещё говорит, что CSS — это не язык программирования, просто покажите им этот проект.

Подпишитесь на рассылку — всё самое интересное о технологиях и «железе»

Исходники уже доступны на GitHub, а автор скоро обещает подробный разбор работы эмулятора в своём блоге.

Если вам понравилась эта статья, подпишитесь, чтобы не пропустить еще много полезных статей!

Премиум подписка - это доступ к эксклюзивным материалам, чтение канала без рекламы, возможность предлагать темы для статей и даже заказывать индивидуальные обзоры/исследования по своим запросам!Подробнее о том, какие преимущества вы получите с премиум подпиской, можно узнать здесь

Также подписывайтесь на нас в: