• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Evolution of CSS
 

Evolution of CSS

on

  • 1,157 views

Talk at Winter Web Workshop, 7-8 Dec 2013, Iasi, Romania

Talk at Winter Web Workshop, 7-8 Dec 2013, Iasi, Romania

Statistics

Views

Total Views
1,157
Views on SlideShare
732
Embed Views
425

Actions

Likes
1
Downloads
7
Comments
1

4 Embeds 425

http://www.xwiki.com 421
http://translate.googleusercontent.com 2
http://plus.url.google.com 1
http://xwikicom-new.devxwiki.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Evolution of CSS Evolution of CSS Presentation Transcript

    • 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
    • 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 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
    • 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 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
    • 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 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 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 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 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 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%; } 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. 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%; } 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. 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> <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. 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 <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 RESULT exercitation ullamco laboris nisi ut aliquip ex ea 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 <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 Reference: W3C, MDN, Opera RESULT exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 25
    • Method: Flexible box · Using display:flex, flex-direction, align-items, order CR CSS 3 .parent { display: flex; } div { width: 50%; } HTML <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 RESULT exercitation ullamco laboris nisi ut aliquip ex ea 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
    • 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-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
    • 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 */ 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
    • 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) {} 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?
    • 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