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
290
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
490
django loves gulp
nostalgia
0
160
orrfuscation
nostalgia
0
130
The evolution of CSS - 2
nostalgia
1
97
jQuery
nostalgia
4
420
Other Decks in Programming
See All in Programming
Fast JSX: Don't clone props object #28768
yossydev
1
200
AppRouter Panel Talk
yosuke_furukawa
PRO
1
490
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
210
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
560
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
190
敵対的ポイフル
futabato
0
140
Domain-Driven Transformation
hschwentner
2
1.5k
見た目から始める生産性向上
ikumatadokoro
10
1.5k
Site Reliability Engineering for GMO
pyama86
9
1.1k
使ってみよう Azure AI Document Intelligence
kosmosebi
2
370
SIMD Parallel Programming with the Vector API
josepaumard
0
240
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.3k
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
66
14k
Designing for Performance
lara
601
67k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Designing the Hi-DPI Web
ddemaree
276
33k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Building Adaptive Systems
keathley
32
1.9k
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