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 - 2
Search
Mattia Larentis
February 05, 2013
Programming
1
110
The evolution of CSS - 2
Mattia Larentis
February 05, 2013
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
nostalgia
4
310
jQuery
nostalgia
4
440
Other Decks in Programming
See All in Programming
RDoc meets YARD
okuramasafumi
4
160
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
980
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
130
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
220
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
100
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
790
rage against annotate_predecessor
junk0612
0
140
testingを眺める
matumoto
1
130
MLH State of the League: 2026 Season
theycallmeswift
0
200
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
390
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
GraphQLとの向き合い方2022年版
quramy
49
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Statistics for Hackers
jakevdp
799
220k
GitHub's CSS Performance
jonrohan
1032
460k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Building Adaptive Systems
keathley
43
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
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 in 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
@border: 1px; @color: #111; @red: #842210;
.my-class { color: @color; border-left: @border; border-right: @border; }
.my-class { color: #111; border-left: 1px; border-right: 1px; }
OPERATIONS
.my-class { color: (@color + #030); border-right: (@border * 2);
}
.my-class { color: #114411; border-right: 2px; }
MIXIN
.border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius;
-o-border-radius: @radius; border-radius: @radius; }
.my-class { .border-radius(2px); } .another-class { .border-radius; }
.my-class { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px;
border-radius: 2px; }
.another-class { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px;
border-radius: 5px; }
NESTING
.my-class { h1 { font-weight: bold; } p { font-size:
12px; a { text-decoration: none; &:hover { color: @red; } } } }
.my-class h1 { font-weight: bold; } .my-class p { font-size:
12px; } .my-class p a { text-decoration: none; } .my-class p a:hover { color: #842210; }
Questions?!?
Mattia Larentis http://larentis.eu
[email protected]
@spiritualguru github.com/nostalgiaz