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
130
The evolution of CSS - 2
nostalgia
1
100
jQuery
nostalgia
4
440
Other Decks in Programming
See All in Programming
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Domain-Driven Transformation
hschwentner
2
1.9k
Formの複雑さに立ち向かう
bmthd
1
720
DROBEの生成AI活用事例 with AWS
ippey
0
130
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Writing documentation can be fun with plugin system
okuramasafumi
0
120
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
Featured
See All Featured
Fireside Chat
paigeccino
34
3.2k
A Philosophy of Restraint
colly
203
16k
The Cult of Friendly URLs
andyhume
78
6.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Statistics for Hackers
jakevdp
797
220k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.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 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