Evolution of CSS

Evolution of CSS
Part 1: History, Layout, Variables ++

Ecaterina Moraru — 7 December 2013 —

Agenda
· What is CSS?
· How the language evolved?
· Some techniques and their usage:
· Layout
· Variables ++
· Why it needed to evolve?

2

“ Cascading Style Sheets (CSS) is a style sheet

language used for describing the presentation
semantics (the look and formatting) of a document
written in a markup language.
Its most common application is to style web pages
written in HTML and XHTML, but the language can
also be applied to any kind of XML document,
including plain XML, SVG and XUL. ”
— Wikipedia

4

Syntax
· The property is an identifier that defines which feature is considered
· The value describe how the feature must be handle by the engine
· A property and value pair is called a declaration
· Declarations are grouped in blocks
· Each block is preceded by a selector
· The pair selector-declarations block is called a rule

Source: MDN CSS, WP CSS

5

“

A simple syntax doesn't make an easy language ”
— Hugo Giraudel, CSS is easy... syntactically, 2013

6

Why is CSS !important?
· Separation of concerns (structure, presentation, behavior)
·
·
·
·
·

Easier to maintain sites
Share style sheets across pages
Helps pages load faster
Tailor pages to different environments
Separation of development roles (designer, developer)

· Handles the styling of the interface
· Not using just text, but adding beautiful effects
· Replaces images with native features
· Layout
· With CSS you can achieve anything (most of things)
7

Web Without CSS

This is a motherfucking website.
And it's fucking perfect.

Seriously, what the fuck else do you want?
You probably build websites and think your shit is special. You think your 13 megabyte paralax-ative home page is going to get you some fucking
Awwward banner you can glue to the top corner of your site. You think your 40-pound jQuery file and 83 polyfills give IE7 a boner because it
finally has box-shadow. Wrong, motherfucker. Let me describe your perfect-ass website:
Shit's lightweight and loads fast
Fits on all your shitty screens
Looks the same in all your shitty browsers
The motherfucker's accessible to every asshole that visits your site
Shit's legible and gets your fucking point across (if you had one instead of just 5mb pics of hipsters drinking coffee)

Well guess what, motherfucker:
You. Are. Over-designing. Look at this shit. It's a motherfucking website. Why the fuck do you need to animate a fucking trendy-ass banner flag
when I hover over that useless piece of shit? You spent hours on it and added 80 kilobytes to your fucking site, and some motherfucker jabbing at it
on their iPad with fat sausage fingers will never see that shit. Not to mention blind people will never see that shit, but they don't see any of your
shitty shit.
You never knew it, but this is your perfect website. Here's why.

It's fucking lightweight

Source: motherfuckingwebsite

History
The CSS specifications are maintained by W3C's CSSWG
1990, Jan

HTML proposed by Tim Berners-Lee

1999, Dec 24 HTML 4.01 Recommendation
2013, Aug
06

HTML 5 Candidate Recommendation (13+ WD since Jan 2008)

1994, May

CSS proposed by Håkon Wium Lie and Bert Bos

1996, Dec 17 CSS 1 Recommendation
1998, May 12 CSS 2 Recommendation
1999, Jun

CSS 3 earliest drafts

2011, Jun 07

CSS 2.1 Recommendation (WD 2002, CR 2004, WD 2005, CR
2007, CR 2009, WD 2010, PR 2011)
10

“

Rather than attempting to shove dozens of
updates into a single monolithic specification, it
will be much easier and more efficient to be able to
update individual pieces of the specification.
Modules will enable CSS to be updated in a more
timely and precise fashion, thus allowing for a
more flexible and timely evolution of the
specification as a whole... ”
— W3C, 2012

11

History
· Unlike a large single specification, CSS 3 is divided into modules
· Due to the modularization, different modules have different stability and
statuses
· Each module (50+) can level up independently
2011, Jun 07

CSS Color Module Level 3 REC

2011, Sep 29 Selectors Level 3 REC
2011, Sep 29 CSS Namespaces Module REC
2012, Jun 19

Media Queries REC

2013, Nov 07 CSS Style Attributes REC

12

History
· The term CSS 3 refers to everything published after CSS 2.1
· There's no such thing as CSS 4, but there are level 4 modules

Source: Visual.ly, Chris Mills, quirksmode, Wikipedia, W3C, MDN

meyerweb.com

CSS Module Timelines
Cascading
Style Sheets
Level 2
Revision 1
(CSS 2.1)
Specification

W3C

Heat

Gray

Blue

Cascading StyleStyle Sheets,Sheets, revision 1 2Sheets, level 2 revision2level 2 Cascading Style Sheets LevelSpecificationL
Cascading Sheets, level level 2 level level Cascading1Style Sheets, Sheets revision Revision 1 (CSS Style 2 Revision 1
Cascading StyleStyle Sheets,Cascading Style Sheets, level 1revision 1 2 1 Sheets Cascading Sheets Leve
Cascading 2 Cascading2 revision 1 Cascading Style
revision 1 Style revision
Cascading Style Cascading 2.1) Style Sheets
Level
Cascading Style Sheets
Level 2 Revision 1 (CSS

CSS Style
Attributes

Syntax of CSS CSS rules of CSS rules attribute "style" attribute
Syntax of rules in HTML's "style" in HTML's
Syntax in HTML's "style" attribute

Media Queries

Media Queries Queries
Media Queries
Media
Media Queries

CSS Mobile
Profile 2.0
Selectors
Level 3

Themes

Media Queries MediaMedia Queries
Queries Queries Queries
Media
Media

CSS Mobile Profile 1.01.0
CSS Mobile Profile Profile 1.0
CSS Mobile Mobile Profile 1.0
CSS
CSS3 module:module: module: W3C selectors
CSS3 W3C selectors
CSS3 module: W3C selectors
CSS3 W3C selectors
Selectors

CSS Styling Attributes Level 1
CSS Style Attributes

CSS Mobile ProfileCSS Mobile Profile 2.0 2.0
CSS Mobile Profile 2.0 Profile
2.0CSS Mobile
Selectors

Selectors Level 3 Level 3
Selectors

Selectors Level 3

Selectors
Level 4

Selectors Level 4

CSS
Conditional
Rules Module
Level 3

CSS Conditional Rule

CSS Variables
Module Level
1
CSS Values
and Units
Module Level
3
CSS Color

Source: Eric Meyer (Sept 2012)

CSS3 module: Values and Units

CSS3 ValuesCSS3 Values and Units
and Units

CSS Values and Unit

Evolution: Specifications
· There is nothing wrong with HTML 4.1 and CSS 2.1 but, everything else
evolved
· People started to use the standards for things they weren't intended for
· Browsers implemented new features
· New browsing devices appeared
· HTML 5 and CSS 3 were designed to:
·
·
·
·

Be backwards compatible
Compete with plugin tech
Add more efficient, powerful features
Be as accessible as possible
15

Layout Mode
· The layout mode determines the position, the size and the order of boxes
based on the way they interact with their siblings and ancestor boxes
· Layout:
· Block — designed for documents (float, multiple columns)
· Inline — designed for text
· Table — designed for tables
· Positioned — designed for positioning elements (without much
interaction with other elements)

· Flexible box — designed for complex pages that can be resized
· Grid — designed for elements relatively to a fixed grid

Source: MDN, etemad

18

Using: <table> elements
CSS 1

td {
border: 0;
width: 50%;
}

< HTML 4
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud</td>
<td>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
</tr>
</table>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
Reference: MDN

RESULT

exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.

19

Using: <div> elements
HTML
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
quis nostrud</div>
<div>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut DEFAULT RESULT
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

· Being a generic container it needs additional styling

Reference: MDN

WANTED RESULT

exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.

20

Method: Float
· Using float: left

REC
CSS 1

div {
float: left;
width: 50%;
}

exercitation ullamco laboris nisi ut
aliquip ex ea commodo
consequat.

RESULT

· No float: center
· It needs additional markup to clear the float or CSS 3's :after selector
.clearfix { clear: both; }
Reference: MDN, Clearfix, Alternatives, since 2003

CSS 1
21

Method: Positioning
· Using position: absolute

REC

· Properties: position, z-index
.parent {
position: relative;
}

CSS 2.1

div.second {
position: absolute;
right: 0;
top: 0;
width: 50%;
}
Reference: MDN

RESULT

commodo consequat.

22

Method: Display (inline-block)
· Using display: inline-block, block, inline

REC
CSS 2.1

div {
display: inline-block;
width: 50%;
}

HTML
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit ... </div>

exercitation ullamco laboris nisi
ut aliquip ex ea commodo
consequat.

RESULT

· Problem: spacing between blocks
· Can be combined with vertical-align property
Reference: MDN, designshack

23

Method: Display (table-cell)
· Using display: table-cell

REC
CSS 2.1

div {
display: table-cell;
width: 50%;
}

HTML
quis nostrud</div>

RESULT

commodo consequat.

· Needs to be used in conjunction with table and table-row
Reference: MDN

24

Method: Columns
· Extends Block Layout Mode

CR

· Properties: columns, column-count, column-width, column-gap, etc.
CSS 3

div {
column-count: 2;
}

HTML
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

Reference: W3C, MDN, Opera

RESULT

commodo consequat.

25

Method: Flexible box
· Using display:flex, flex-direction, align-items, order

CR
CSS 3

.parent {
display: flex;
}
div {
width: 50%;
}

HTML
quis nostrud</div>

RESULT

commodo consequat.

Reference: W3C, MDN, Opera, html5please, bocoup, css-tricks, Gillenwater, echoplex, sketchingwithcss, since 2009

26

Method: Flexible box

flexbox playground and code generator

1

2

3

flex container
display:
flex-direction:

flex
row

?
flex-wrap:

nowrap

?
justify-content:

flex-start

?
align-items:

flex-start

?
align-content:

stretch

?

flex items
Source: flexyboxes

Method: Grid Layout
· Currently supported just by IE10 with -ms- prefix

WD
CSS 3

.parent {
display: grid;
grid-template: "1 2";
}
div.first {
grid-area: "1";
}
div.second {
grid-area: "2";
}

Other Layout Modules:
Regions WD
Exclusions and Shapes
Reference: W3C, Gillenwater, hugogiraudel

WD
28

Evolution: Layout Mode
1. Remove the need for additional markup
·
2. Targeting semantic markup and styling
·
3. Choosing the most flexible method
·
4. Choosing the most accessible method
·
5. Some methods chosen because of browser compatibility
·
6. Some methods have slower browser rendering
·
7. Some methods are specially designed to do a certain thing
·
Reference: Gillenwater

29

Turing completeness: HTML + CSS 3 + HUMAN
· Programming languages are Turing complete
(can simulate a Turing machine)

· CSS 3 is Turing complete because it can program a Rule 110 automaton
· Execution is done with HTML structure and user interaction (or JS)
· By itself it can generate 1 iteration of the state-machine
· There is no programmatic way to use the output as input or to loop
· CSS is designed to be a declarative language, not an imperative one
· It's missing the variables, functions and control structures (if, for, while)

Reference: stackoverflow 1, 2, reddit, Simple jsfiddle, JS jsfiddle

31

Turing completeness: HTML + CSS 3 + HUMAN

111 110 101 100 011 010 001 000
0
1
1
0
1
1
1
0

Pattern rules
Source

Method: CSS Variables
· In CSS the concept of time-changing values is not present yet
· The purpose is to have reusable values throughout the style
· Notion of cascading variables (10 April 2012)
:root {
var-contrast-color: #d67128;
var-default-margin: 10px;
}

WD
CSS 3

div {
color: var(contrast-color);
margin-right: calc(var(default-margin) * 2);
}

Reference: W3C, MDN, :root

33

Method: Apache Velocity
· Java-based template engine, started in 2000
· Templates are parsed and rendered, not compiled
· Uses $variables and #macros
#set ($linkColor = '#528BA1')
#macro (css3_boxSizing $value)
#set ($browserVariants = ['-moz-', '-webkit-', ''])
#foreach ($bvar in $browserVariants)
${bvar}box-sizing: $value;
#end
#end
#template('colorThemeInit.vm')

VELOCITY

CSS

div {
color: $linkColor;
#css3_boxSizing('border-box')
}
Reference: Apache

34

Method: Preprocessors
· Alternatives:
· LESS
· Dynamic stylesheet language in JavaScript
· Sass
· Scripting language coded in Ruby
· Languages that extends CSS:
·
·
·
·
·
·
·

Variables
Nesting
Mixins (LESS: Guarded Mixins)
Extend / Inheritance
Functions & Operations
Control Directives (Sass only)

Compiles into regular CSS syntax

35

· Functions which transform colors, manipulate strings, do maths, etc.
lighten(@color, 10%); /* returns a color 10% lighter than @color */
saturate(@color, 10%); /* returns a color 10% more saturated than @color */

LESS

· Control Directives
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}

SASS

· Mixins lets you make groups of CSS declarations that you want to reuse
· Extends lets you share a set of CSS properties from one selector to
another
Reference: tutsplus, designshack, css-tricks

36


Source: github, less2css

· Use :extend to minimize the output, especially when re-using
.clearfix class for other elements
· Map customized sections of a library (Bootstrap) to you classes
· Using :extend(.clearfix all) will target nested selectors
.clearfloats:extend(.clearfix all) {}

LESS

input.button, .buttonwrapper button, .buttonwrapper a {
.btn;
.btn-primary;
}
.clearfix:after,
.clearfloats:after {
clear: both;
}
Reference: Junco Skin

CSS

38

Evolution: Variables ++
1. Maintainability, Reusability
·
2. Save time (nesting, mixins)
·
3. Powerful functionality, simplifying some aspects
·
4. Making the language more complex
·
5. Syntax more/less faithful to traditional CSS
·
6. Third-party dependencies
·
7. Threat to replace the standard?
·
Reference: iamvdo, kaelig

39

Why it needed to evolve?
· Created for simple text now it needs to accommodate complex
application development
· Language consistency
· Missing use cases from specifications
· Less unsemantic markup
· Better built in accessibility
· Less Flash / Photoshop / JavaScript
·
·
·
·
·

Esthetic effects
Form validation
Animations
Web Fonts
etc.

41

“

The only constant is change ”
— Isaac Asimov
My Own View
1978

Source: NasaMarshall

Evolution Constants
· Reuse
· Separation of concerns
· Performance
· Cross Browser
· There are a billion ways to do one thing
· Diversity
· Best practices
· Standards
· CSS allows you to work in the open
· Review code with Firebug
· Share techniques
· Community collaboration
43

Questions?

Source: opensourceway

What did I miss covering?

Thank you

Source: MadLab

about.me/evalica

Evolution of CSS

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Evolution of CSS (20)

More from Ecaterina Moraru (Valica) (14)

Recently uploaded (20)

Evolution of CSS