Будни разработчика: “#ссылка дня Дамы и господа, мы зашли слишком далеко. Нужна виртуалка н…”

#ссылка дня

Дамы и господа, мы зашли слишком далеко.

Нужна виртуалка на Intel, а у тебя мак? Не вопрос, давай напишем эмулятор на CSS!

Проект X86CSS — это эмулятор x86-ассемблера без JavaScript. Вообще. Всё состояние процессора — через CSS-переменные. Исполнение — через

«Процессорный цикл» — это просто тик анимации. Пять герц в эквиваленте.

ПЯТЬ. Не гигагерц, а герц.

Идея выросла из статьи The CPU Hack на dev.to: современные возможности CSS позволяют организовать пошаговое изменение состояния. Если состояние можно хранить, менять и пересчитывать, а изменения можно повторять — система становится тьюринг-полной.

Как это выглядит в упрощённом виде.

Тик процессора:


@property --ip {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --tick {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.cpu {
  animation: clock 0.1s steps(1) infinite;
}

@keyframes clock {
  to {
    --tick: calc(var(--tick) + 1);
  }
}

.cpu {
  --ip: calc(var(--ip) + var(--tick));
}

Анимация создаёт шаг. На каждом шаге меняется состояние.
От состояния зависит, какие инструкции сработают дальше.

Ввод — тоже без JS. Например, зажатая кнопка:


.key:active ~ .cpu {
  --running: 1;
}

.cpu {
  --running: 0;
  --ip: calc(var(--ip) + var(--running));
}

Пока кнопка нажата — переменная меняется и влияет на вычисления.

В реальном проекте вместо двух переменных — регистры, память, флаги и декодирование инструкций. Сотни их.

Практической пользы — ну, нет.

Но сам факт, что CSS можно довести до уровня полноценной вычислительной модели и запустить на нём x86 — выглядит как интересная точка в эволюции фронтенда.

Ах, да. Работает только на Chrome, потому что — какая внезапность — использует условный оператор (if), который появился совсем недавно. И вот это — это вполне себе имеет практическое применение.

Просто пойдите и поиграйте в это. Ощущения невероятные, хрен с ней, с применимостью на практике, честное слово. Это целый компьютер! Вы можете даже программы для него компилировать с C на x86asm. Буквально.

#css #cpu #x86 #hack