A brief history of the Web and Javascript: Part 3
CSS, pre-processors and UI frameworks
Hi everyone,
This is the third installment in this series, where we forget JavaScript for a moment and take a brief look at the history and evolution of CSS, as well as the tools and frameworks I personally use.
If you are new to the newsletter: I write for people that want to understand tech and create/architect great apps.
Have any questions? Let me know in the comments.
Enjoy…
Part 1: How and why the web was created.
Part 2: How JavaScript became what it is today. Read to understand the complex landscape of JavaScript frameworks and tools.
Part 3: CSS, pre-processors and UI frameworks.
Part 4: A guide for choosing a Frontend framework.
What is CSS, when did it come out, and what problems did it solve?
Before Cascading Style Sheets (CSS), every browser implemented their own way of styling web pages. Styling was linked to browsers rather than the documents themselves, and the styling itself was limited and would work differently in each browser. CSS was proposed to separate the structure from the presentation and to standardize styling such that you could use one styling language that worked the same in all browsers. At least that was the vision, but it was not that simple.
CSS was first proposed by Håkon Wium Lie in 1994 (at the Mosaic and the Web conference), with the first official release of CSS1 coming out in 1996. Several other style sheet languages were proposed but discarded.
While browsers started implementing parts of the CSS specification (like IE 4 and Netscape 4.x), the support was incomplete and contained bugs, and CSS could therefore not be fully adopted. It was not until the end of the 1990s that some browsers (like IE 5) started achieving close to full implementation of the specification, including parts of CSS 2 which was released in 1998.
However, even if IE 5 implemented over 99% of the CSS specification, it still had bugs and some incorrect implementations. IE 5.x for windows, for example, had a flawed CSS box model compared to the specification. In addition, when bugs were later fixed, some web pages that used to work stopped working. There were also inconsistencies across browsers as some features were implemented differently in each.
These inconsistencies made it difficult for web developers to design a webpage that would look the same in all browsers. To deal with these inconsistencies, developers had to create workarounds, also known as CSS hacks and CSS filters. Individual browsers also implemented their own prefixes to some CSS parameters to avoid web pages breaking in future updates:
-moz- for Mozilla
-webkit- for Safari
-o- for Opera
-ms- for Internet Explorer and Edge
Example:
.some-class {
background: -moz-linear-gradient(..)
background: -webkit-linear-gradient(..)
background: -o-linear-gradient(..)
background: -ms-linear-gradient(..)
background: linear-gradient(..)
(The major browser vendors are moving away from vendor prefixes in favor of other methods such as @supports feature queries.)The slow CSS adoption of some browsers also caused these browsers to get a bad reputation among developers. Yes, I am talking about Internet Explorer. Prior to IE 10, IE even supported special comment syntax such that developers could import different CSS stylesheets depending on the version of IE that was used. This way, you could provide compatibility to old browsers with old implementations.
Remember this? Happy days:
<link href="all_browsers.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]> <![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
SOURCE: https://en.wikipedia.org/wiki/CSSBrowser compatibility
In order to ensure consistency, It was important to test the website in different browsers. Tools such as BrowserStack started to appear (2011), making this easier.
And to provide compatibility for older browsers, which had old CSS engine implementations, people started creating polyfills with JavaScript. Essentially, a polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.
These days, the popular browsers have mostly up-to-date CSS implementations, and browser-specific CSS or polyfills are mostly not needed. To check what browsers implements a feature you want to use you can check out caniuse.com. For example, check out the page for Flexbox compatability here.
CSS Preprocessors
Syntactically Awesome StyleSheets (Sass) appeared in 2006, created by Natalie Weizenbaum and Chris Eppstein, aimed to extend and improve the CSS. Sass is a pre-processor language. For CSS this means that Sass compiles your Sass code into CSS. Sass by itself cannot be rendered in the browser.
Sass provides a bunch of useful features:
Variables
Nesting
Loops
Arguments
Mixins
There are other pre-processor CSS tools out there as well, but Sass is clearly the most popular.
UI Frameworks
Similar to how there are JavaScript frameworks that helps people save time writing JavaScript, there are UI frameworks that helps people saving time writing CSS. A UI framework is intended to provide pre-prepared CSS libraries (and sometimes some JS features) that can be imported and used in web development project
The most famous, and one of the oldest, is the Bootstrap UI framework, which first came out in 2011. Important features of bootstrap include:
A base stylesheet with basic styling (normalizing)
Classes for layout (grid, breakpoints, containers, etc.).
Sass for a modular and customizable experience.
Ready-made components (saves you lots of time).
JavaScript plugins for popups, tooltips, and more.
Icons.
Themes.
While Bootstrap is popular, there are many other UI frameworks out there. Others include Tailwind CSS and Bulma.
Recommendations
If you want to learn more about CSS, take a look at this guide. Or browse CSS-Tricks. Or just find a guide, there are lots of great guides out there for learning CSS.
Here is my recommendation on what tools to use for UI development:
I recommend to use Sass in most projects. However, if your project is very simple, just use plain old CSS, then you don’t have to care about running the Sass pre-processor in the background, and you will have less dependencies while developing.
As for the UI framework, Bootstrap is easy to use, well maintained, and provides great looking components that you can just plug into your website or app. I have used Bootstrap in many projects, and the base stylesheet is useful even for small projects. Tailwind CSS is also a good option (as of this writing) if you want more control of exactly how things will look. Or, if you don’t want to have to learn a framework, just use plain Sass/CSS, it works fine too.
Sources
Large parts of this post are inspired by the Wikipedia page on CSS, but adapted for readability and a focus on contextualizing modern CSS tools.
Thanks for reading!
If you have any questions or comments, just let me know below :)
- Eric