Evolution of CSS

Last modified by Ecaterina Moraru on 2013/12/06 16:17
Slides

Failed to execute the [groovy] macro. Cause: [The execution of the [groovy] script macro is not allowed in [incubator:Presentation.PresentationSheet]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

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?

What is CSS?

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

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
    http://en.support.files.wordpress.com/2011/09/css-selectors-lrg.png

Source: MDN CSS, WP CSS

A simple syntax doesn't make an easy language

  Hugo Giraudel, CSS is easy... syntactically, 2013

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)

Web Without CSS

Source: motherfuckingwebsite

How it evolved?

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 12CSS 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)

Status Levels:             

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

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 29Selectors Level 3 REC
2011, Sep 29CSS Namespaces Module REC
2012, Jun 19Media Queries REC
2013, Nov 07CSS Style Attributes REC

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

https://mdn.mozillademos.org/files/3623/CSS_Modules_and_Snapshots.png

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

Source: Eric Meyer (Sept 2012)

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

Techniques

Layout

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

Using: <table> elements

td {
 border: 0;
 width: 50%;
}
<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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Reference: MDN

Using: <div> elements

<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>
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.
  • Being a generic container it needs additional styling
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.

Reference: MDN

Method: Float

  • Using float: left   
div {
 float: left;
 width: 50%;
}
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.
  • 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

Method: Positioning

  • Using position: absolute  
  • Properties: position, z-index
.parent {
 position: relative;
}

div.second {
 position: absolute;
 right: 0;
 top: 0;
 width: 50%;
}
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.

Reference: MDN

Method: Display (inline-block)

  • Using display: inline-block, block, inline  
div {
 display: inline-block;
 width: 50%;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit ... </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 labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Problem: spacing between blocks
  • Can be combined with vertical-align property

Reference: MDN, designshack

Method: Display (table-cell)

  • Using display: table-cell  
div {
 display: table-cell;
 width: 50%;
}
<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>
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.
  • Needs to be used in conjunction with table and table-row

Reference: MDN

Method: Columns

  • Extends Block Layout Mode  
  • Properties: columns, column-count, column-width, column-gap, etc.
div {
 column-count: 2;
}
<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>
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.

Reference: W3C, MDN, Opera

Method: Flexible box

  • Using display:flex, flex-direction, align-items, order   
.parent {
 display: flex;
}

div {
  width: 50%;
}
<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>
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.

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

Method: Flexible box

Source: flexyboxes

Method: Grid Layout

  • Currently supported just by IE10 with -ms- prefix   
.parent {
 display: grid;
 grid-template: "1 2";
}

div.first {
  grid-area: "1";
}

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

Other Layout Modules:
Regions  
Exclusions and Shapes  

Reference: W3C, Gillenwater, hugogiraudel

Evolution: Layout Mode

  1. Remove the need for additional markup
  1. Targeting semantic markup and styling
  1. Choosing the most flexible method
  1. Choosing the most accessible method
  1. Some methods chosen because of browser compatibility
  1. Some methods have slower browser rendering
  1. Some methods are specially designed to do a certain thing

Reference: Gillenwater

Variables ++

Turing completeness: HTML + CSS 3 + HUMAN

  • 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

Turing completeness: HTML + CSS 3 + HUMAN

111 110 101 100 011 010 001 000  Pattern rules
 0   1   1   0   1   1   1   0  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;
}

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

Reference: W3C, MDN, :root

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

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

Reference: Apache

Method: Preprocessors

  • Alternatives:
    • LESS
      • Dynamic stylesheet language in JavaScript
    • Sass
      • Scripting language coded in Ruby
  • Languages that extends CSS:
  • Compiles into regular CSS syntax

Method: Preprocessors

  • 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 */
@for $i from 1 through 3 {
 .item-#{$i} { width: 2em * $i; }
}
  • 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

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;
}
.clearfix:after,
.clearfloats:after {
 clear: both;
}

Reference: Junco Skin

Evolution: Variables ++

  1. Maintainability, Reusability
  1. Save time (nesting, mixins)
  1. Powerful functionality, simplifying some aspects
  1. Making the language more complex
  1. Syntax more/less faithful to traditional CSS
  1. Third-party dependencies
  1. Threat to replace the standard? 

Reference: iamvdo, kaelig

Why it needed to evolve?

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.

http://farm5.staticflickr.com/4120/4864418222_8e632534b3_o.jpg
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

Questions?

http://farm8.staticflickr.com/7221/7007767964_f6ac05f9e4_b.jpg

Source: opensourceway What did I miss covering?

Thank you

http://farm4.staticflickr.com/3185/4560243838_d0bd28345a_b.jpg

Source: MadLab about.me/evalica