Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The evolution of CSS
Search
Mattia Larentis
December 10, 2012
Programming
4
310
The evolution of CSS
A quick trip from the birth of css to the present day
Mattia Larentis
December 10, 2012
Tweet
Share
More Decks by Mattia Larentis
See All by Mattia Larentis
Going isomorphic with Django and React
nostalgia
0
520
django loves gulp
nostalgia
0
160
orrfuscation
nostalgia
0
140
The evolution of CSS - 2
nostalgia
1
110
jQuery
nostalgia
4
440
Other Decks in Programming
See All in Programming
Swift Concurrency - 状態監視の罠
objectiveaudio
2
540
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
What's new in Spring Modulith?
olivergierke
1
160
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
Catch Up: Go Style Guide Update
andpad
0
230
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
15
5k
CSC305 Lecture 04
javiergs
PRO
0
270
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
460
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Scaling GitHub
holman
463
140k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Unsuck your backbone
ammeep
671
58k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
A designer walks into a library…
pauljervisheath
209
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
870
GraphQLとの向き合い方2022年版
quramy
49
14k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
It's Worth the Effort
3n
187
28k
The Language of Interfaces
destraynor
162
25k
Transcript
Mattia Larentis - @spiritualguru the evolution of css
a long time ago...
1980s
Nerdz
CERN
Share documents
HTML HyperText Markup Language
tags!
paragraphs titles bulleted lists
1993
people began to talk about STYLE
W3C World Wide Web Consortium
CSS Cascading Style Sheet
1996
version 1.0
None
from 1998 to 2004
version 2.0
new Browsers
None
None
None
WIN
TODAY
version 3.0
New Features
Border Radius 2D Transforms Box Shadow RGBA Colors
but...
CSS SUCKS
Problems
vars
nesting
performance
is there a solution?
YES!
preprocessing
A system written is another language that adds lots of
tasty goodies that don’t exists natively, while still spitting out something a browser can understand
{LESS} The dynamic stylesheet language.
Sass Syntactically Awesome StyleSheets
stylus Expressive, dynamic, robust CSS
None
ok... but... why?
it will make you CSS DRY
it will save your time
it will make your code easy to maintain
it will make your CSS more organized
it’s fun
talk is cheap, show me the code
START
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js"> </script>
IMPORT
@import “vars”;
VARS
@red: #ff0000;
OPERATIONS
@dark_red: @red - #666;
MIXIN
.border-radius(@size) { border-radius: @size; }
NESTING
div { a { &:hover { // code here! }
} }
div a:hover { // code here! }
IF... ELSE
@if light($c) > 30% { color: #000; } @else {
color: #fff; }
FOR
@for $i from 1px to 10px { .border-#{i} { border:
$i solid blue; } }
Questions?!?
Mattia Larentis www.larentis.eu
[email protected]
@spiritualguru github.com/nostalgiaz