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
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
860
Ruby Parser progress report 2025
yui_knk
1
440
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
540
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
AIコーディングAgentとの向き合い方
eycjur
0
270
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
120
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
320
Laravel Boost 超入門
fire_arlo
3
220
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Side Projects
sachag
455
43k
Faster Mobile Websites
deanohume
309
31k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Producing Creativity
orderedlist
PRO
347
40k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A better future with KSS
kneath
239
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Facilitating Awesome Meetings
lara
55
6.5k
Agile that works and the tools we love
rasmusluckow
330
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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