4. “ 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
5. 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
6. “
A simple syntax doesn't make an easy language ”
— Hugo Giraudel, CSS is easy... syntactically, 2013
6
7. 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
8. 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
10. 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
11. “
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
12. 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
13. 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
14. 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
15. 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
18. 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
19. 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
20. 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
21. 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
22. 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
23. 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
24. 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
25. 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
26. 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
28. 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
29. 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
31. 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
33. 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
34. 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
35. 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
36. 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
38. 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
39. 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
41. 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
42. “
The only constant is change ”
— Isaac Asimov
My Own View
1978
Source: NasaMarshall
43. 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