Вы когда-нибудь задумывались, как выглядела жизнь веб-разработчика более 20 лет назад, когда всемирная паутина была еще чем-то новым, вам приходилось слушать странные гудки и гудки, прежде чем войти в нее, JavaScript и CSS были скорее любопытством, чем чем-то еще? обычно используется при создании простых веб-сайтов, а самым популярным браузером был Internet Explorer? Ну, возможно, нет… но если у вас есть пара свободных минут и вы хотите научиться еще одной бесполезной вещи — эта статья вас не разочарует!
Предыстория
В начале 2022 года я впал в какое-то ностальгическое настроение и очень захотелось поиграть в одну игру из моего детства (Принц и трус — это игра в жанре point and click, да, я из Польши). У меня был компакт-диск с оригинальной игрой, но не было машины, на которой можно было бы ее запустить. Я подумал, что будет веселее играть на старом школьном ПК с Windows, поэтому я решил пройтись по аукционам/веб-сайтам/торговым площадкам подержанных вещей, чтобы купить старое, подержанное оборудование (и программное обеспечение — Windows 98), чтобы собрать его для себя. … в любом случае, как я его построил и какие у меня были проблемы — оставим это для другой истории.
После прохождения игры дух ностальгии улетучился, оставив мне вещи, которые занимали место и собирали пыль. Мне быстро пришла в голову идея попробовать веб-разработку на этом ПК, но всегда находилось что-то получше. Так что эта идея некоторое время откладывалась, пока я, наконец, не решился написать эту статью.
1999
Мне тогда было 10 лет, и у меня был как минимум 3-летний опыт работы с операционными системами Microsoft Windows. Я совершенно уверен, что мой путь в веб-разработке начался в начале 2000-х, и я использовал Macromedia Dreamweaver (Adobe приобрела Macromedia в 2005 году) для своих первых «проектов» без CSS, макетов на основе таблиц и фрагментов JS, скопированных из Интернета в иметь некоторые модные эффекты, такие как анимация падающего снега.
Интернет сам по себе был для меня загадкой в 1999 году. Возможно, я слышал о нем и знал, что это такое, но первый контакт я установил в 21 веке.
Что происходило в мире? Евросоюз ввел новую валюту — евро. Билл Клинтон был все еще президентом США. Всемирная метеорологическая организация объявила 90-е годы самым жарким (если говорить о средней температуре) десятилетием. Губка Боб Квадратные Штаны дебютировал на Nickelodeon. Эминем выпустил The Slim Shady LP. Такие фильмы, как Матрица и Звездные войны: Эпизод 1 — Скрытая угроза (тогда мне очень понравился этот фильм, недавно я его до сих пор нравится) были свои мировые премьеры.
Все говорили о ошибке тысячелетия, так как 2000 год должен был принести глобальный компьютерный апокалипсис из-за проблем с форматированием даты. Итак, если вы еще этого не сделали, 1999 год был вашим последним шансом создать личный сайт.
Проект
Что мы собираемся делать? Простой личный веб-сайт с тремя вкладками — главная (поздоровайтесь с нашими посетителями), о нас (краткая биография) и контакты (некоторая контактная информация). . Макет не должен быть очень сложным — заголовок (с заголовком и навигацией по вкладкам) вверху, нижний колонтитул внизу и область содержимого вкладок между ними.
Хотелось бы использовать как можно больше CSS, а переключение между вкладками реализовать с помощью JavaScript. Подстраниц не будет — только один индексный файл HTML, один файл JS, один файл CSS и несколько (два) изображений. Вот структура моего дерева проектов:
project-root/ ├── assets/ │ ├── scripts.js │ ├── styles.css | ├── bg.gif (used as background of the page) | └── mk.jpg (my face for about section) | └── index.html
Страница должна работать и хорошо выглядеть во всех (двух) основных браузерах, доступных на тот момент — MS Internet Explorer 5 и Netscape Navigator 4.51.
Инструменты
Я мог бы пойти на классику и выбрать Блокнот MS, чтобы написать весь код для моего сайта. Но давайте сделаем его немного более профессиональным и получим настоящий редактор кода. Моей первой мыслью был Notepad++, но поскольку он был выпущен в 2003 году, в 1999 году его не существовало. Я думал о редакторе полированного кода под названием Pajączek (Spidey), доступном с 1996 года, но я думаю, это было только на польском языке и не бесплатно. После нескольких минут поиска в Google и Википедии я нашел Arachnophilia—выпущенную в 1996 году, бесплатную, на английском языке и связанную с пауками. Это подойдет.
Моя Windows 98 шла с предустановленным Internet Explorer (v5.0), но мне нужно было где-то достать другие приложения — Netscape Navigator и Arachnophilia. Естественно, обе версии должны были быть доступны 23 года назад. Искать старое программное обеспечение непросто, но обычно oldversion.com — хорошее место для начала. К сожалению, когда я пытался добраться туда, он не работал пару дней, и я был почти уверен, что он ушел навсегда. Однако, когда я печатаю эти слова, кажется, что он снова в сети.
Тем не менее, мне пришлось искать в другом месте. Это заняло у меня некоторое время, потому что фраза типа netscape 4.5 download, набранная в гугле, не даст вам удовлетворительных результатов на первой странице (она вообще не даст вам удовлетворительных результатов), поэтому мне пришлось копаться. В конце концов, страница archive.org дала мне то, что мне было нужно — образ диска apcmag.cd от мая 1999 года, который включал в себя оба приложения: Netscape Navigator v4.51 и Arachnophilia v3.9.
Мой первоначальный амбициозный план включал использование локального сервера и запуск моего веб-сайта на локальном хосте (я даже нашел старую статью об установке Apache и PHP на Windows 98). Однако для проекта такого масштаба это казалось несколько ошеломляющим, поэтому в конце концов я отказался от этой идеи. Возможно, когда-нибудь я перейду к более продвинутому ретро-веб-приложению, которое требует бэкэнд-логики, но пока давайте сосредоточимся только на внешнем интерфейсе.
арахнофилия
Давайте кратко поговорим о выбранном мной редакторе кода. Возможно, тогда он считался неплохим, но сейчас он кажется немного дешевым. Тем не менее, это больше, чем может предложить обычный блокнот MS — он имеет некоторую базовую подсветку синтаксиса HTML и функцию предварительного просмотра (нажмите кнопку, и Arachnophilia сохранит текущий HTML-код во временном файле и откроет его в IE для предварительного просмотра; он утверждает, что перезагружает страницу после каждого сохранения, но, к сожалению, у меня эта функция не работала).
Он не поддерживает файлы JS и CSS, но вы можете создавать их в виде текстовых файлов с расширением .js или .css. Тогда просто напишите туда код.
Когда вы решите создать новый HTML-файл, появится окно подсказки, позволяющее вам установить заголовок страницы, цвет текста и ссылки. На основе вашего ввода Arachnophilia сгенерирует для вас исходный HTML-код с заголовком, установленным в разделе заголовка, и стилями текста и ссылок, добавленными в качестве атрибутов к тегу body (я не собираюсь оставлять его таким).
Первоначальный HTML-код имеет имена тегов с заглавной буквы, что мне очень нравится, поскольку оно излучает атмосферу старой школы, поэтому я попытаюсь следовать ему. Само собой, автоотступа нет.
Логика на первом месте
Прежде чем реализовать всю страницу, я хочу изучить, что я могу сделать с помощью JavaScript. Моя цель — иметь вкладки, управляемые JS: при нажатии на ссылку навигации соответствующая вкладка должна отображаться, а другие скрыты.
Сначала я сосредоточился на Internet Explorer. Нет инструментов разработчика и консоли JS — если что-то выдает ошибку, IE показывает значок предупреждения в нижней панели, двойной щелчок по нему дает нам более подробную информацию — сообщение об ошибке и место ее возникновения.
Не то, к чему я привык, но все же весьма полезно. Когда у меня возникала какая-то проблема, я обычно мог найти решение, погуглив ее (результаты указывали на старые темы на забытых форумах), или я использовал caniuse.com, чтобы выяснить, какие методы доступны (в нем перечислены только IE v6 и выше, но по моему опыту, когда что-то было зеленым для 6-8, то работало и на IE v5).
Вот пара вещей, которые я понял во время разработки PoC JavaScript для Internet Explorer 5:
getElementsByClassNameне поддерживается, ноgetElementsByNameработает нормально (поэтому я использовал его для выбора всех навигационных ссылок)…- … но не с DIV (поэтому я не мог использовать его для выбора содержимого вкладок),
addEventListenerне существует, но в IE для этого есть собственный метод —attachEvent— он принимает как минимум два аргумента — eventName (но с on в начале, например: onclick вместо click) и обратный вызов (который не получает объект события в качестве аргумента),anchorElement.getAttribute('href')возвращает полный URL-путь, а не только значение, добавленное в атрибут href (поэтому, если атрибуту присвоено значение #foobar, локально вы получите что-то вроде C:\\…\ #фубар)
Это мой HTML для проверки концепции вкладок:
<A href="#tab0" tab="tab0" name="link">Link 1</a> <A href="#tab1" tab="tab1" name="link">Link 2</a> <A href="#tab2" tab="tab2" name="link">Link 3</a> <DIV id="tab0">Content 1</div> <DIV id="tab1" style="display: none;">Content 2</div> <DIV id="tab2" style="display: none;">Content 3</div>
Я сохранил атрибуты href, чтобы сделать его более семантичным, но мне понадобился пользовательский атрибут tab, чтобы упростить получение идентификатора вкладки с помощью JS.
А вот мой код JavaScript для управления переключением между вкладками:
var tabLinks = document.getElementsByName('link');
var currentOpenTabElement = document.getElementById('tab0');
for (var i = 0; i < tabLinks.length; i++) {
tabLinks[i].attachEvent('onclick', createOnClickHandler(i))
}
function createOnClickHandler(tabLinkIndex) {
var tabLink = tabLinks[tabLinkIndex];
var tabId = tabLink.getAttribute('tab');
return function() {
openTab(tabId);
}
}
function openTab(tabId) {
var tab = document.getElementById(tabId);
currentOpenTabElement.style.display = 'none';
tab.style.display = ''
currentOpenTabElement = tab;
}
И должен признать — я удивлен. Код выглядит неплохо и делает то, что я хотел (переключается между вкладками). Это 1999 год, это Internet Explorer, и он работает. Я действительно удивлен.
Netscape Navigator — первый удар
Если мой код работает в Internet Explorer, что может пойти не так в браузере Netscape? — спросил я себя. В 90-х это был даже самый популярный браузер, и хотя он в конечном итоге уступил IE, я был уверен, что мне не о чем беспокоиться. Итак, я открыл свою страницу в Netscape Navigator и…
…управление вкладками не работает.
Моя первая ставка заключалась в том, что attachEvent — это просто IE, поэтому он не будет работать в Netscape. Но как я могу знать? Где Netscape распечатывает сообщения об ошибках JS? Есть ли консоль JS? Нет. В нижней панели есть какая-то информация, как в IE? Нет. Есть ли признаки того, что что-то пошло не так при выполнении кода JS? Ну… это не работает, так что это своего рода обратная связь, но нет, ее нет.
Так как же отлаживать JavaScript в Netscape Navigator 4.51? Что ж, нужно сделать обработку ошибок самостоятельно — добавить обработчик window.onerror, который будет вызывать метод alert с сообщением об ошибке (это не сам придумал, нашел здесь).
Итак, getElementsByName в то время не существовало в мире Netscape. А как насчет getElementsByClassName? Нет. Может хотя бы getElementById? Нет. Netscape Navigator полностью состоит из нет? Нет, но наверняка это дает вам их много.
Вы не найдете никакой информации о поддержке на caniuse.com, вы ограничены тем, что осталось в Интернете. И, к счастью, здесь есть один полезный ресурс — Справочник по клиентскому JavaScript (версия 1.3) от Netscape Communications Corporation, опубликованный в 1999 г. Это дало мне некоторое представление о том, что я мог использовать, и, о боже, версия JavaScript для Netscape кажется совершенно другой историей. Существуют коллекции, такие как document.ids или document.classes, но мы мало что можем с ними сделать — обычно мы можем установить только некоторые базовые стили, но только один раз, когда браузер загружает страницу.
Моя идея заключалась в том, чтобы использовать атрибут onClick (поскольку это более кроссбраузерное решение) для прикрепления обработчиков кликов, отвечающих за настройку свойства стиля отображения для элементов вкладок. Но я не мог заставить его работать. В очередной раз пришлось обратиться к дяде Гуглу и надеяться на удачу. Нашел несколько старых статей, но большинство из них никуда меня не указывало. Наконец-то я получил этот, который спас мой день. Компания Netscape представила собственный HTML-тег layer, предназначенный для позиционирования и анимации (с помощью сценариев) элементов на странице.
Единственная проблема с тегом <layer> заключается в том, что он ведет себя как элемент с абсолютным позиционированием CSS (относительно родительского слоя или окна). К счастью, есть также тег <ilayer>, который является просто встроенным слоем. Это более полезно, но есть еще одна небольшая проблема — атрибут visibility для слоев работает так же, как свойство CSS visibility, что означает, что вы можете скрыть элемент, но он все равно будет занимать место. В результате первая вкладка будет отображаться там, где я хочу, чтобы она была видимой, а остальные будут отображаться ниже, что выглядело бы плохо. Чтобы исправить это, мне нужно использовать отрицательное значение свойства top, чтобы переместить их в правильное положение. Фу...
Итак, как выглядит кроссбраузерная версия? Во-первых, мне пришлось добавить некоторый встроенный скрипт в <head> документа, чтобы определить, является ли браузер Netscape:
<SCRIPT> var probablyNetscape = !!document.layers && !!document.classes && !!document.ids; </SCRIPT>
Почему я не использовал свойство navigator, чтобы проверить, какой браузер используется для посещения страницы? navigator.appName возвращает Netscape, хорошо, но так же, как Chrome в 2023 году, а navigator.userAgent возвращает мне Mozilla v4.51 — это немного более конкретно, но не совсем надежно. Проверка того, есть ли у document такие свойства, как layers, которые полностью принадлежат Netscape, дает мне больше уверенности.
В любом случае — я буду использовать информацию о том, что это probablyNetscape в моем файле scripts.js и непосредственно в HTML. Говоря о HTML, вот он:
<A href="#tab0" onClick="tabLinkClickHandler('tab0')">Link 1</A>
<A href="#tab1" onClick="tabLinkClickHandler('tab1')">Link 2</A>
<A href="#tab2" onClick="tabLinkClickHandler('tab2')">Link 3</A>
<DIV>
<ILAYER name="tab0" style="display: block;">
<DIV id="tab0">Content 1</DIV>
</ILAYER>
<ILAYER name="tab1" visibility="hide" style="display: block;">
<DIV id="tab1">Content 2</DIV>
</ILAYER>
<SCRIPT>if (!probablyNetscape) {document.getElementById('tab1').style.display = 'none';}</SCRIPT>
<ILAYER name="tab2" visibility="hide" style="display: block;">
<DIV id="tab2">Content 3</DIV>
</ILAYER>
<SCRIPT>if (!probablyNetscape) {document.getElementById('tab2').style.display = 'none';}</SCRIPT>
</DIV>
Как видите, я использовал некоторый встроенный скрипт, чтобы добавить стиль display: none к вкладкам, которые изначально должны быть скрыты, если браузер не Netscape. Я сделал это, потому что возможность изменить свойство display с помощью JS в Netscape Navigator не работает так, как вы ожидаете (поэтому я не мог его удалить), и я хотел скрыть эти вкладки как можно скорее (до загрузки scripts.js) .
Свойства <ILAYER>, такие как visibility и top, будут понятны только Netscape. Другие браузеры будут их игнорировать (ну, IE 5 их игнорирует, так что я надеюсь, что и будущие браузеры будут делать то же самое).
Ссылки для навигации по вкладкам имеют атрибуты onClick с назначенными обработчиками кликов, которые определены в моем файле scripts.js:
var activeTab = 'tab0';
if (probablyNetscape) {
window.onerror = function(message, file, line) {
alert('JavaScript error!\nFile: ' + file + '\nLine: ' + line + '\nMessage: ' + message);
}
// Set position for layers in Netscape Navigator
document.layers.tab1.top = -38;
document.layers.tab2.top = -76;
}
function tabLinkClickHandler(tab) {
if (tab === activeTab) return;
if (probablyNetscape) {
document.layers[activeTab].visibility = 'hide'
document.layers[tab].visibility = 'show'
} else {
document.getElementById(activeTab).style.display = 'none';
document.getElementById(tab).style.display = 'block';
}
activeTab = tab;
}
И я знаю — если кто-то щелкнет ссылку до того, как файл скрипта загрузится, это вызовет ошибку, поэтому на данный момент я мог бы просто поместить весь код своего скрипта в index.html, но… я просто хочу, чтобы так и было.
Теперь у меня есть работающее кросс-браузерное доказательство концепции. Этот опыт был — благодаря Netscape Navigator — немного разочаровывающим. Но теперь пришло время для расслабляющей части — макета и стилей css!
Хороший взгляд с этим
Я усвоил урок — нет смысла разрабатывать что-то специально для IE5, а потом пытаться приспособить для Netscape Navigator, так как в итоге получится совсем другой код. С самого начала мне нужно искать решения, которые будут работать в обоих браузерах.
У меня было некоторое представление о структуре HTML и стилях CSS, которые я хотел бы использовать, поэтому, чтобы сделать его кроссбраузерным, я начал делать все шаг за шагом. А теперь позвольте мне рассказать вам историю о сумасшествии со стилем разметки HTML в 1999 году.
Центрирование элементов с левым и правым полем, установленным на авто, не работает. Есть два возможных решения — тег <center> или <div> с атрибутом align=”center”. Этот элемент должен оборачивать контейнер содержимого страницы (с шириной 480 пикселей). В обоих случаях IE также центрирует содержимое потомков, поэтому мы можем установить атрибут align на left в контейнере страницы, что исправит ситуацию с IE. Однако Netscape перемещает весь контейнер обратно влево, поэтому, чтобы сделать его правильным (я имею в виду центр, но с содержимым слева), нам нужен третий контейнер с атрибутом align, установленным на left. Вот некоторый код, чтобы его было легче понять:
<DIV align="center">
<!-- this one has width set to 480px in styles.css -->
<DIV class="page-container">
<DIV align="left">...</DIV>
</DIV>
</DIV>
CSS flexbox (не говоря уже о сеточной системе) не всегда был рядом. Если вы занимаетесь веб-разработкой более 10 лет, то, скорее всего, помните, что для создания сетки разработчики использовали свойство float (даже Bootstrap). Я считаю, что он не предназначался для этого (изначально), но разработчики отвели ему довольно важное место в истории стилизации макетов веб-сайтов.
Во всяком случае, я использовал плавающие элементы для выравнивания элементов управления вкладками (ссылок), я хотел использовать здесь теги списка — ul и li — но похоже, что Netscape не любит комбинацию элементов плавающего элемента и списка… Более того, использование стиля плавания непосредственно на теге привязки удалит все стили привязки по умолчанию (я про Netscape, в IE все нормально). В итоге я получил список на основе DIV.
Цвет фона в наборе DIV с помощью CSS — это серьезное дерьмо для Netscape Navigator v4.51. Без свойства CSS border, установленного на none (или что-то еще, ему просто нужен стиль границы, чтобы исправить себя), только текст внутри DIV будет иметь желаемый цвет фона (например, стиль выделения текста).
Настройка background-image доставила мне еще одну головную боль. IE требует, чтобы путь к изображению (bg.gif) относился к файлу styles.css (поэтому url('bg.gif') допустимо), но Netscape ожидает, что он будет относиться к файлу index.html (url('assets/bg.gif')). Самое простое решение здесь — установить фон непосредственно в атрибуте стиля тела (конечно, с указанием пути относительно index.html).
Когда я работал над навигацией, я хотел изменить стили ссылок при открытии связанной вкладки. Из-за ограничений Netscape мне пришлось поиграть с тегом (i)layer, и я дошел до того, что мой HTML вызвал критическую ошибку Netscape.
...
<DIV class="tab-control">
<ILAYER name="start-link" class="tab-control-layer">
<DIV class="tab-control-inner">
<A href="#start" id="start-link">Start</A>
</DIV>
</ILAYER>
</DIV>
...
Ну, возможно, это также как-то связано с CSS, но я этого не проверял.
Следующая проблема — маржи. Скажем подробнее: маржа в Netscape Navigator v4.51. Вы можете установить margin: 0 везде, но Netscape не дает... знаете что. Просто лучше знает. Поля должны быть. Конечно, есть решение — используйте отрицательные значения. Однако это повлияет и на другие браузеры (IE), а другие браузеры понимают, что НОЛЬ - это НОЛЬ. ТОГДА НИКАКОЙ МАРЖИ. ЧТО С ВАМИ НЕ ТАК, НЕТСКЕЙП?
В этот момент я знал, что никогда не сделаю версию своего сайта Netscape настолько хорошей, насколько мне хочется. И мне нужно использовать для этого специальные стили. Как это отличить? Моей первой мыслью было добавить дополнительный класс в тело с помощью JavaScript в случае браузера, отличного от Netscape (потому что я не могу задавать имена классов с версией JS Netscape), но оказалось, что Netscape Navigator 4 настолько сломан, что это довольно легко задать стили, которые будут им игнорироваться. Использование html в качестве селектора потомков сделает свое дело, потому что Netscape не распознает его как действительный.
Работая с CSS для моей страницы, я понял, сколько вещей сломано в Netscape Navigator 4, например: вы можете использовать каждый селектор только один раз (другие будут игнорироваться), а комбинированные селекторы не приветствуются (не используйте что-то вроде .class.with-other-class).
Мне не удалось удалить пробелы между ссылками вкладок, которые вы видите на изображении выше.
Конечно, Internet Explorer 5 тоже не идеален, так как имеет некоторые неожиданные особенности поведения, но Netscape Navigator 4 — просто сумасшествие.
Говоря об IE — я хотел реализовать простую анимацию крылатой фразы (Добро пожаловать в 1999!) под заголовком страницы, которая непрерывно скользит слева направо. Я использовал setInterval для этой цели, и оказалось, что передача анонимной функции в качестве обратного вызова приведет к сбою IE через несколько секунд.
// IE5 KILLER
setInterval(function() {...}, 100);
Если сначала определить функцию, а затем передать ее в setInterval, все будет правильно.
// THAT'S FINE!
function animateCatchphrase() {...}
setInterval(animateCatchphrase, 100);
Могу поспорить, что у IE есть проблемы с управлением памятью в случае анонимной функции. У Netscape Navigator с этим проблем нет. Хорошая работа, Netscape, 10 баллов Гриффиндору.
Окончательно
Если бы я хотел описать все проблемы, с которыми я столкнулся при работе над проектом страницы 1999 года, мне пришлось бы написать об этом книгу. Кажется, я уже рассказал вам самую интересную (разочаровывающую) часть. Но поверьте мне — есть еще кое-что, например, стилизация абзацев — в этом случае я быстро сдался и вместо этого использовал DIV.
Так или иначе, после нескольких часов, проведенных за этим, моя страница была готова и работала как в Internet Explorer 5, так и в Netscape Navigator 4.51.
Общий размер всех файлов, необходимых для запуска страницы, составляет ~42 КБ (html, css, js и два изображения — все несжатые). Мне не удалось найти достоверной информации о средней скорости интернет-соединения в 1999 году, поэтому посчитаем время загрузки для телефонного модема, который в конце 90-х годов мог развивать скорость до 56 кбит/с — с таким устройством (работающим на полной скорости) для получения всех данных потребуется 6 секунд. В 1999 году это, вероятно, было приемлемо.
Я не буду вставлять сюда весь код (длинный и скучный), вы найдете ссылку на репозиторий Github где-то ниже. Теперь давайте посмотрим на некоторые скриншоты моей страницы, которые я сделал в Windows 98.
Интернет Эксплорер 5
Должен сказать, что я очень горжусь тем, как он оказался в Internet Explorer. Выглядит и работает так, как я хотел.
Нетскейп Навигатор 4.51
Как вы можете видеть, версия Netscape Navigator имеет некоторые недостатки… раздел содержимого и вкладки кажутся сломанными, и, несмотря на то, что я потратил много времени, пытаясь сделать их максимально похожими на то, чего я добился в IE, я в конечном итоге потерпел неудачу… Возможно, я бы смог сделать это, если бы я сделал все на LAYERs, но это звучит как чрезмерная инженерия.
Назад в будущее
Вернёмся в 2023 год и откроем мою страницу в каком-нибудь современном браузере, например Google Chrome.
Он выглядит… маленьким, но в остальном все выглядит и работает хорошо. Есть одна небольшая проблема с размером поля содержимого (оно слишком широкое, это легко заметить, если посмотреть на правый нижний угол серого поля). Оболочка страницы имеет ширину 480 пикселей, а поле содержимого внутри оболочки страницы также имеет ширину 480 пикселей, но также имеет отступы по 10 пикселей с каждой стороны. В 1999 году это работало нормально (хотя я считаю, что это была ошибка как в IE, так и в Netscape). Однако теперь блок содержимого имеет общую ширину 500 пикселей (сумма ширины и отступов с обеих сторон), что является более ожидаемым поведением. Мы можем исправить это с помощью следующих трех строк кода CSS:
* {
box-sizing: border-box;
}
Ретро-браузеры этого не поймут, так что ломать там ничего не надо. Никаких дополнительных изменений не требуется (ну, мне нужно добавить краткую информацию о политике конфиденциальности из-за закона GDPR, который у нас есть в ЕС).
Если вы хотите проверить эту страницу самостоятельно, она опубликована на 1999.mihau.co, и вы можете найти код в репозитории Github.
Последние слова
Этот небольшой, простой веб-сайт занял у меня гораздо больше времени, чем я первоначально предполагал, и это не потому, что я плохо оцениваю задачи (ну, иногда я так и делаю, но на этот раз это не моя вина). Возможности Internet Explorer 5, по сравнению с современными браузерами, конечно, намного-намного меньше, но это было похоже на знакомый мне мир. Netscape Navigator 4.51 был совершенно другой вселенной. У него были очень ограниченные возможности манипулирования DOM и обработки событий, а CSS казался полностью сломанным (вы можете найти все ошибки, описанные здесь).
Но, стоп. Я уже много жаловался на это. Я поляк, поэтому жалобы у меня в ДНК, но этого достаточно. Давайте попробуем понять некоторые вещи здесь.
Во-первых, это был 1999 год. Я считаю, что даже в начале 2000-х макеты таблиц и атрибуты для стилизации все еще были более популярны, чем CSS. Да и само содержание было важнее внешнего вида. JavaScript? Относительно новый и не стандартизованный. Это придумал Netscape, Microsoft реализовала собственную версию с другими API и большими возможностями. И вообще, тогда Flash стал популярнее.
Во-вторых, 4.51 не был основным выпуском, а Internet Explorer 5 был. Я твердо верю, что Netscape улучшил и исправил многое в Navigator v5 (выпущенном в 2000 году). Ну, я не проверял, но, может быть, я попробую однажды.
В любом случае, несмотря на все разочарования, вызванные сломанным браузером Netscape, это все же было приятное путешествие во времени. Теперь я могу вернуться в будущее и жить долго и счастливо со всеми этими JS-фреймворками и браузерами, которые обновляются чаще, чем я выношу мусор.
Спасибо за ваше время. Вот и все.
