CSS history and facts worth knowing

CSS Was Proposed in 1994 and Ignored for Two Years

Håkon Wium Lie proposed Cascading Style Sheets on October 10, 1994, while working at CERN alongside Tim Berners-Lee. The proposal was largely ignored by browser vendors for two years. Netscape and Microsoft were busy adding proprietary HTML tags like BLINK and MARQUEE instead.

CSS1 was officially published by the W3C in December 1996. Internet Explorer 3 was the first browser to support any version of CSS, in August 1996, but the implementation was so buggy that developers mostly avoided it. Useful CSS support did not arrive until Internet Explorer 5 in 1998.

The Box Model Almost Broke the Web

When CSS was first implemented, Internet Explorer and standards-compliant browsers disagreed on a fundamental thing: what does 'width' mean? IE used what is now called border-box sizing, where width includes padding and border. Netscape used content-box sizing, where width is just the content area.

This mismatch caused layouts to look completely different between browsers throughout the late 1990s and early 2000s. The 'IE box model bug' was one of the defining frustrations of web development for a decade. CSS3 eventually added box-sizing: border-box to let developers choose, and today most teams apply it globally to everything via a universal selector reset.

Flexbox Took 6 Years to Finalize

The Flexbox specification was first proposed in 2009. It went through three completely different syntax versions before landing on the current syntax in 2012 and reaching stable browser support in 2015. If you have ever seen old tutorials that use display: box or display: flexbox instead of display: flex, those are the earlier drafts.

During those six years, developers used various prefixed versions: -webkit-flex, -moz-flex, -ms-flexbox. Writing a Flexbox layout that worked across browsers required a list of seven or eight property declarations that all did the same thing.

CSS Variables Are More Powerful Than Preprocessor Variables

Sass and Less variables get compiled away at build time. CSS custom properties, which are what 'CSS variables' actually are, exist at runtime. This means you can change a CSS variable with JavaScript, set different values in media queries, and inherit them through the DOM like any other CSS property.

:root {
  --color-primary: #3b82f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #60a5fa;
  }
}

The dark mode switch happens without any JavaScript. The variable resolves at render time based on system preference. Sass cannot do this because it runs at compile time.

The Cascade in CSS Is Not Just About Specificity

Most developers know that specificity determines which rule wins when two selectors target the same element. Fewer know the full cascade order: origin and importance, then specificity, then source order.

Origin refers to where the styles come from: the browser's default stylesheet, user stylesheets (which people with accessibility needs sometimes set), and the author's stylesheet (your CSS). Styles marked !important in user stylesheets beat !important in author stylesheets, which is by design. The spec deliberately protects users who need to override author styles for accessibility reasons.

CSS Layers, introduced in 2022, added a fourth axis: layer order. Layers let you explicitly declare which group of styles should win independently of specificity, which makes managing third-party styles, resets, and component libraries significantly more predictable.

---

Sources

• CSS proposal history: Håkon Wium Lie, Cascading HTML style sheets: a proposal (1994) - w3.org
• CSS1 publication: W3C, CSS Level 1 Recommendation (December 1996) - w3.org/TR/CSS1
• IE box model bug: Eric Meyer, CSS: The Definitive Guide; also Aaron Gustafson, CSS Box Model Explained - quirksmode.org
• Flexbox specification history: W3C CSS Flexbox Module Level 1 changelog - w3.org/TR/css-flexbox-1
• CSS Custom Properties: MDN Web Docs, Using CSS custom properties - developer.mozilla.org
• CSS Cascade Layers: Miriam Suzanne, Cascade Layers Explainer (2022) - css.oddbird.net