Timelines of the web

Progressive enhancement. Marking up (and styling) an interactive timeline that looks good in a modern browser and still works in the first ever web browser.
<li class="h-event y1968">
<a href="https://en.wikipedia.org/wiki/NLS_%28computer_system%29" class="u-url">
<time class="dt-start" datetime="1968-12-09">1968</time>
<abbr class="p-name" title="oN-Line System">NLS</abbr>
</a>
</li>
.y1968 {
left: calc((1968 - 1959) * (100%/30) - 5em);
}
.y2014 {
right: calc((2019 - 2014) * (100%/30) - 5em);
}
Progressive enhancement. Marking up (and styling) an interactive timeline that looks good in a modern browser and still works in the first ever web browser.
Hello WorldWideWeb.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store