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
100
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
Unity Android XR入門
sakutama_11
0
170
ML.NETで始める機械学習
ymd65536
0
210
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
250
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
React 19アップデートのために必要なこと
uhyo
5
870
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
AI Agent系IDEを使って 開発生産性を爆アゲする
ouchi2501
1
100
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
890
CI改善もDatadogとともに
taumu
0
180
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
98
5.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Writing Fast Ruby
sferik
628
61k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Six Lessons from altMBA
skipperchong
27
3.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A better future with KSS
kneath
238
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Rails Girls Zürich Keynote
gr2m
94
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
360
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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 mattia@larentis.eu @spiritualguru github.com/nostalgiaz