Рунет в 2001-2002: как мы верстали для IE5 и Netscape 4
2001 год. Россия. Интернет-аудитория около 4 миллионов человек. Dial-up или ISDN, редко ADSL. Браузеры: Internet Explorer 5/5.5 (около 55% аудитории) и Netscape Navigator 4.x (около 35%). Mozilla 0.9 только что вышел, но имел ничтожную долю.
IE5 и Netscape 4 реализовывали CSS и DOM по-разному. Настолько по-разному, что технически это были два разных языка разметки, замаскированных под один.
Война браузеров: технический взгляд
Конкретные несовместимости, с которыми мы сталкивались ежедневно:
Box model. В IE5 width: 200px включало padding и border - итоговая ширина контента была меньше 200px. В Netscape 4 и по стандарту W3C width: 200px - это только контент, padding и border добавлялись сверху. Один и тот же CSS давал разные размеры в разных браузерах.
/* IE5: итоговая ширина блока = 200px (контент + padding + border внутри) */
/* Netscape 4: итоговая ширина = 200 + 20 + 2 = 222px */
div {
width: 200px;
padding: 10px;
border: 1px solid black;
}
JavaScript DOM. В IE5 для доступа к элементам использовали document.all:
// IE5: работает. Netscape 4: не работает
document.all['myDiv'].style.display = 'none';
// Netscape 4: document.layers для позиционированных элементов
// IE5: не работает
document.layers['myLayer'].visibility = 'hidden';
// Единственный кросс-браузерный вариант 2001 года:
function getElement(id) {
if (document.getElementById) return document.getElementById(id); // W3C
if (document.all) return document.all[id]; // IE
if (document.layers) return document.layers[id]; // Netscape
}
CSS Float. В Netscape 4 float работал настолько нестабильно, что большинство разработчиков просто не использовали его вообще. Таблицы - да. Float - нет.
Как реально верстали
Практика 2001 года: делать два варианта страницы или использовать только гарантированно работающий общий знаменатель.
Вариант 1: Browser sniffing (определение браузера)
// Классический sniffing 2001 года
var isIE = (navigator.appName === "Microsoft Internet Explorer");
var isNN4 = (navigator.appName === "Netscape" && parseInt(navigator.appVersion) === 4);
if (isIE) {
document.write('<link rel="stylesheet" href="styles_ie.css">');
} else if (isNN4) {
document.write('<link rel="stylesheet" href="styles_nn4.css">');
} else {
document.write('<link rel="stylesheet" href="styles_modern.css">');
}
Это считалось плохой практикой даже тогда - но использовалось повсеместно.
Вариант 2: Только таблицы, никаких float и position
Стандартный корпоративный сайт 2001 года:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Transitional, не Strict - потому что нужны устаревшие атрибуты -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<!-- windows-1251, не UTF-8 - стандарт Рунета до ~2005 года -->
<title>ООО Компания - Официальный сайт</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Все отступы через атрибуты body, не CSS -->
<!-- Шапка: 1px таблица как контейнер по центру -->
<table width="780" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<!-- Логотип: GIF с прозрачностью (PNG не работал в IE5 правильно) -->
<img src="images/logo.gif" width="200" height="60" alt="Логотип">
</td>
<td align="right">
<font face="Arial, Helvetica, sans-serif" size="2" color="#666666">
Тел: (495) 123-45-67
</font>
</td>
</tr>
</table>
<!-- Горизонтальный разделитель: не CSS border, а картинка 1px высотой -->
<img src="images/line.gif" width="780" height="1">
<!-- Основной макет: 3 колонки через таблицу -->
<table width="780" border="0" cellpadding="0" cellspacing="0" align="center">
<tr valign="top">
<td width="160" bgcolor="#F0F0F0">
<!-- Левое меню -->
<table width="155" border="0" cellpadding="5" cellspacing="0">
<tr><td><a href="about.php">О компании</a></td></tr>
<tr><td><a href="services.php">Услуги</a></td></tr>
<tr><td><a href="contact.php">Контакты</a></td></tr>
</table>
</td>
<!-- Разделитель колонок: 1px широкая ячейка с цветом фона -->
<td width="1" bgcolor="#CCCCCC"><img src="images/spacer.gif" width="1" height="1"></td>
<td width="619">
<!-- Основной контент -->
<table width="614" border="0" cellpadding="10" cellspacing="0">
<tr><td>
<font face="Arial, Helvetica, sans-serif" size="2">
<?php echo $pageContent; ?>
</font>
</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Обратите внимание на spacer.gif - прозрачный GIF размером 1×1px. Он вставлялся в пустые ячейки таблиц, потому что Netscape 4 схлопывал пустые <td>. Без spacer.gif таблица теряла форму.
Кодировка: windows-1251 vs KOI8-R
В 2001-2002 в Рунете шла война кодировок. Московские сайты - преимущественно windows-1251. Питерские и академические - KOI8-R (стандарт UNIX-систем). Один и тот же текст, открытый в неправильной кодировке, выглядел как нечитаемый набор символов.
// PHP 4: функции для конвертации кодировок
$text_koi = iconv('windows-1251', 'KOI8-R', $text_win);
$text_utf = iconv('windows-1251', 'UTF-8', $text_win);
Переход Рунета на UTF-8 занял несколько лет. Яндекс перешёл на UTF-8 в 2009 году. До этого - windows-1251 был де-факто стандартом.
Переходный момент: IE6 и появление стандартов
Internet Explorer 6, вышедший в августе 2001 года, улучшил поддержку CSS относительно IE5, но добавил свои баги (double margin float bug, peek-a-boo bug). К 2002-2003 годам Netscape 4 окончательно уступил место Mozilla/Firefox.
С Mozilla разработчики впервые получили браузер с корректной реализацией W3C CSS. Верстать стало проще - но IE6, оставаясь доминирующим до 2010 года, требовал постоянных хаков ещё почти десятилетие.
Тот период сформировал у целого поколения разработчиков привычку: тестировать в нескольких браузерах с первого дня, не полагаться на то, что работает в одном. Привычка, актуальная в 2025 году в той же мере - только вместо IE6 сегодня тестируют на разных мобильных браузерах и версиях WebView.