Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
141 lines (122 sloc) 5.95 KB
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The IE3 Challenge</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<style>
body {
background: black;
}
</style>
</head>
<body>
<header>
<table>
<tr>
<td><img src="img/mario.gif" alt="Dancing Mario and Luigi"></td>
<td><h1>The IE3 Challenge</h1></td>
<td><img src="img/mario.gif" alt="Dancing Mario and Luigi"></td>
</tr>
</table>
</header>
<hr color="lime">
<main>
<section class="page2">
<div>
<div class="blend">
<h2>Some backstory</h2>
<div class="overlay"></div>
</div>
<img class="lg-title" src="img/title1.gif" alt="Some backstory">
<p>One fine day in March, Hui Jing came up with a hare-brained scheme to build a progressively enhanced website that should run on Internet Explorer 3. Why IE3? Because it was the first commercial browser to support CSS.</p>
<p>It was also probably the only way to get hardware expert and retro-computing connoisseur, Yeo Kheng Meng, to ever be involved with Talk.CSS. Kheng Meng will prepare all the requisite hardware, and Hui Jing will write the code. Hui Jing also decided not testing beforehand doubles the excitement.
<p>What could go wrong?</p>
</div>
</section>
<hr color="cyan">
<section class="page3">
<div>
<div class="blend">
<h2>Let's talk about IE3</h2>
<div class="overlay"></div>
</div>
<img class="lg-title" src="img/title2.gif" alt="Let's talk about IE3">
<p>Internet Explorer 3 was released on August 13, 1996 and began serious competition with Netscape Navigator in the first browser war. It runs on Windows 3.1, Windows 95, Windows NT 3.51 and Windows NT 4.0.</p>
<p>Even though it was purported to support CSS, we soon learn that <em>support</em> is a subjective term.</p>
</div>
</section>
<hr color="fuchsia">
<section class="page4">
<div>
<div class="blend">
<h2>CSS in IE3</h2>
<div class="overlay"></div>
</div>
<img class="lg-title" src="img/title3.gif" alt="CSS in IE3">
<ul>
<li class="horror">Class as a selector is supported</li>
<li class="horror">ID as a selector is not supported</li>
<li class="horror">Contextual selectors are supported</li>
<li class="horror">Internet Explorer does not apply styles to text marked by implied tags</li>
<li class="horror">Anchor pseudo-classes are supported</li>
<li class="horror">Typographical pseudo-elements are not supported</li>
</ul>
</div>
</section>
<hr>
<section class="page5">
<table>
<tr>
<td>
<p class="item1">Lack of support for a number of CSS features limits the amount of "cascading" required of Internet Explorer.</p>
<ul class="item2">
<li>Importing style sheets with <code>@import</code> is not supported</li>
<li>The special attribute <code>important</code> is not supported</li>
<li>Internet Explorer has no documented means of specifying a user style sheet</li>
</ul>
<p class="item3">In addition to these deficiencies, Internet Explorer 3.0 seems <span class="pulse">altogether incapable of cascading</span>.</p>
</td>
<td>
<p class="item4">For instance, it will not combine (and duly cascade) styles included in either multiple <code>style</code> blocks, or a combination of a linked style sheet and one or more <code>style</code> blocks.</p>
<p class="item5">Internet Explorer 3.01 (and presumably any subsequent versions of Internet Explorer 3.0) uses a simplified version of the CSS1 formatting model which lacks borders and padding.</p>
<p class="item6">In versions of Internet Explorer 3.0 prior to version 3.01, margins are not inherited. In those versions, margins values are always interpreted relative to the canvas, and not relative to any margin for any parent element.</p>
</td>
</tr>
</table>
</section>
<hr>
<section class="page6">
<div>
<div class="blend">
<h2>References</h2>
<div class="overlay"></div>
</div>
<img class="lg-title" src="img/title4.gif" alt="References">
<ul>
<li class="notes"><a href="http://www.kompx.com/en/internet-explorer-3.htm">Internet Explorer 3</a></li>
<li class="notes"><a href="http://www.citycat.ru/doc/HTML/IExplorer.30/ie30html.htm">Complete List of HTML Tags</a></li>
<li class="notes"><a href="http://www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html">HTML Tags: Past, Present, Proposed</a></li>
<li class="notes"><a href="https://www.w3.org/TR/REC-CSS1/">Cascading Style Sheets, level 1</a></li>
<li class="notes"><a href="http://endoframe.com/css/ie3.html">Support for Cascading Style Sheets, Level 1 in Microsoft Internet Explorer 3.0, Win32 version</a></li>
<li class="notes"><a href="https://www.w3.org/Style/CSS/msie/">CSS support in MS IE 3.0</a></li>
<li class="notes"><a href="http://www.alanwood.net/unicode/explorer_older.html">Setting up Windows Internet Explorer 3 and 4 for Multilingual and Unicode Support</a></li>
<li class="notes"><a href="https://archive.webstandards.org/css/opera/">Opera's Top 10 CSS Problems</a></li>
</ul>
</div>
</section>
<!--[if !IE]> -->
<audio controls class="annoying">
<source src="audio/tetoroika.mp3" type="audio/mpeg">
</audio>
<!-- <![endif]-->
</main>
<hr>
<footer>
<p><span>Anyhowly made by Chen Hui Jing</span></p>
</footer>
<bgsound src="audio/tetoroika.mid" loop="infinite">
</body>
</html>
You can’t perform that action at this time.