Evolution of CSSPart 1: History, Layout, Variables ++

Ecaterina Moraru — 7 December 2013 —

Agenda

What is CSS?

How the language evolved?

Some techniques and their usage:

LayoutVariables ++

Why it needed to evolve?

·

·

·

··

·

2

What is CSS?

Cascading Style Sheets (CSS) is a style sheetlanguage used for describing the presentationsemantics (the look and formatting) of a documentwritten in a markup language.

Its most common application is to style web pageswritten in HTML and XHTML, but the language canalso 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 declarationDeclarations are grouped in blocksEach block is preceded by a selectorThe 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 sitesShare style sheets across pagesHelps pages load fasterTailor pages to different environmentsSeparation of development roles (designer, developer)

Handles the styling of the interface

Not using just text, but adding beautiful effectsReplaces images with native featuresLayout

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 fuckingAwwward 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 itfinally has box-shadow. Wrong, motherfucker. Let me describe your perfect-ass website:

Shit's lightweight and loads fastFits on all your shitty screensLooks the same in all your shitty browsersThe motherfucker's accessible to every asshole that visits your siteShit'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 flagwhen 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 iton 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 yourshitty shit.

You never knew it, but this is your perfect website. Here's why.

It's fucking lightweightSource: motherfuckingwebsite

How it evolved?

History

The CSS specifications are maintained by W3C's CSSWG

1990, Jan HTML proposed by Tim Berners-Lee1999, Dec 24 HTML 4.01 Recommendation2013, Aug06

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

1994, May CSS proposed by Håkon Wium Lie and Bert Bos1996, Dec 17 CSS 1 Recommendation1998, May 12 CSS 2 Recommendation1999, Jun CSS 3 earliest drafts2011, 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 ofupdates into a single monolithic specification, it

will be much easier and more efficient to be able toupdate individual pieces of the specification.

Modules will enable CSS to be updated in a moretimely and precise fashion, thus allowing for a

more flexible and timely evolution of thespecification 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 andstatuses

Each module (50+) can level up independently

2011, Jun 07 CSS Color Module Level 3 REC2011, Sep 29 Selectors Level 3 REC2011, Sep 29 CSS Namespaces Module REC2012, Jun 19 Media Queries REC2013, 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

CSS Module Timelines Themes W3C Heat Gray Blue

meyerweb.com

CascadingStyle SheetsLevel 2Revision 1(CSS 2.1)SpecificationCSS StyleAttributesMedia QueriesCSS MobileProfile 2.0SelectorsLevel 3SelectorsLevel 4CSSConditionalRules ModuleLevel 3CSS VariablesModule Level1CSS Valuesand UnitsModule Level3CSS Color

Cascading Style Sheets, level 2 revision 1Cascading Style Sheets, level 2 revision 1Cascading Style Sheets, level 2 revision 1Cascading Style Sheets, level 2 revision 1Cascading Style Sheets, level 2 revision 1Cascading Style Sheets, level 2 revision 1Cascading Style Sheets, level 2 revision 1Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) SpecificationCascading Style Sheets Level 2 Revision 1 (CSS 2.1) SpecificationCascading Style Sheets Level 2 Revision 1 (CSS 2.1) SpecificationCascading Style Sheets Level 2 Revision 1 (CSS 2.1) SpecificationCascading Style Sheets Level 2 Revision 1 (CSS 2.1) SpecificationCascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

Syntax of CSS rules in HTML's "style" attributeSyntax of CSS rules in HTML's "style" attributeSyntax of CSS rules in HTML's "style" attribute CSS Styling Attributes Level 1CSS Style Attributes

Media QueriesMedia QueriesMedia QueriesMedia Queries Media QueriesMedia QueriesMedia QueriesMedia QueriesMedia Queries

CSS Mobile Profile 1.0CSS Mobile Profile 1.0CSS Mobile Profile 1.0CSS Mobile Profile 1.0 CSS Mobile Profile 2.0CSS Mobile Profile 2.0CSS Mobile Profile 2.0CSS Mobile Profile 2.0

CSS3 module: W3C selectorsCSS3 module: W3C selectorsCSS3 module: W3C selectorsCSS3 module: W3C selectorsSelectors Selectors Selectors Level 3Selectors Level 3 Selectors Level 3

Selectors Level 4

CSS Conditional Rules Module Level 3

CSS3 module: Values and Units CSS3 Values and UnitsCSS3 Values and Units CSS Values and Units Module Level 3

Source: Eric Meyer (Sept 2012)

Evolution: Specifications

There is nothing wrong with HTML 4.1 and CSS 2.1 but, everything elseevolved

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 compatibleCompete with plugin techAdd more efficient, powerful featuresBe as accessible as possible

·

·

·

·

·

····

15

Techniques

Layout

Layout Mode

The layout mode determines the position, the size and the order of boxesbased on the way they interact with their siblings and ancestor boxes

Layout:Block — designed for documents (float, multiple columns)Inline — designed for textTable — designed for tablesPositioned — designed for positioning elements (without muchinteraction with other elements)Flexible box — designed for complex pages that can be resizedGrid — designed for elements relatively to a fixed grid

·

·····

··

Source: MDN, etemad 18

Using: <table> elements

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

CSS 1

<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>

< HTML 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.

RESULT

Reference: MDN 19

Using: <div> elements

Being a generic container it needs additional styling

<div>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</div><div>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

HTML

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 nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

DEFAULT RESULT

·

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

WANTED RESULT

Reference: MDN 20

Method: Float

Using float: left REC

No float: centerIt needs additional markup to clear the float or CSS 3's :after selector

·

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

CSS 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi utaliquip ex ea commodoconsequat.

RESULT

·

·

.clearfix { clear: both; } CSS 1

Reference: MDN, Clearfix, Alternatives, since 2003 21

Method: Positioning

Using position: absolute REC

Properties: position, z-index

·

·

.parent { position: relative;}

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

CSS 2.1

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.

RESULT

Reference: MDN 22

Method: Display (inline-block)

Using display: inline-block, block, inline REC

Problem: spacing between blocks

Can be combined with vertical-align property

·

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

CSS 2.1

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit ... </div><div>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisiut aliquip ex ea commodoconsequat.

RESULT

·

·Reference: MDN, designshack 23

Method: Display (table-cell)

Using display: table-cell REC

Needs to be used in conjunction with table and table-row

·

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

CSS 2.1

<div>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</div><div>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.

RESULT

·Reference: MDN 24

Method: Columns

Extends Block Layout Mode CR

Properties: columns, column-count, column-width, column-gap, etc.

·

·

div { column-count: 2;}

CSS 3

<div>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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.

RESULT

Reference: W3C, MDN, Opera 25

Method: Flexible box

Using display:flex, flex-direction, align-items, order CR ·

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

CSS 3

<div>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</div><div>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.

RESULT

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

Method: Flexible box

flex container

display: flex

flex-direction: row

flex-wrap: nowrap

justify-content: flex-start

align-items: flex-start

align-content: stretch

flex items

flexbox playground and code generator

1 2 3

?

?

?

?

?

Source: flexyboxes

Method: Grid Layout

Currently supported just by IE10 with -ms- prefix WD

Other Layout Modules: Regions WD Exclusions and Shapes WD

·

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

div.second { grid-area: "2";}

CSS 3

Reference: W3C, Gillenwater, hugogiraudel 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

Variables ++

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-machineThere 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

Pattern rulesSource

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

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) WD

·

·

·

:root { var-contrast-color: #d67128; var-default-margin: 10px;} div { color: var(contrast-color); margin-right: calc(var(default-margin) * 2);}

CSS 3

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

VELOCITY

#template('colorThemeInit.vm')

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

CSS

Reference: Apache 34

Method: Preprocessors

Alternatives:LESS

Dynamic stylesheet language in JavaScriptSass

Scripting language coded in Ruby

Languages that extends CSS:

VariablesNestingMixins (LESS: Guarded Mixins)Extend / InheritanceFunctions & OperationsControl Directives (Sass only)

Compiles into regular CSS syntax

··

··

·

·

······

·35

Method: Preprocessors

Functions which transform colors, manipulate strings, do maths, etc.

Control Directives

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 toanother

·lighten(@color, 10%); /* returns a color 10% lighter than @color */saturate(@color, 10%); /* returns a color 10% more saturated than @color */

LESS

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

SASS

·

·

Reference: tutsplus, designshack, css-tricks 36

Method: Preprocessors

Source: github, less2css

Method: Preprocessors

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) {}

input.button, .buttonwrapper button, .buttonwrapper a { .btn; .btn-primary;}

LESS

.clearfix:after,

.clearfloats:after { clear: both;}

CSS

Reference: Junco Skin 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?

Why it needed to evolve?

Created for simple text now it needs to accommodate complexapplication development

Language consistency

Missing use cases from specifications

Less unsemantic markup

Better built in accessibility

Less Flash / Photoshop / JavaScriptEsthetic effectsForm validationAnimationsWeb Fontsetc.

·

·

·

·

·

·

····· 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 thingDiversityBest practicesStandards

CSS allows you to work in the openReview code with FirebugShare techniquesCommunity collaboration

·

·

·

·

····

····

43

Questions?

What did I miss covering?Source: opensourceway

Thank you

about.me/evalicaSource: MadLab