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
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
SpringBoot3.4の構造化ログ #kanjava
irof
3
1k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
570
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
660
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
ML.NETで始める機械学習
ymd65536
0
210
Spring gRPC について / About Spring gRPC
mackey0225
0
230
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
150
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
GoとPHPのインターフェイスの違い
shimabox
2
200
Featured
See All Featured
It's Worth the Effort
3n
184
28k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
500
Optimizing for Happiness
mojombo
376
70k
Fireside Chat
paigeccino
34
3.2k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Code Reviewing Like a Champion
maltzj
521
39k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Facilitating Awesome Meetings
lara
52
6.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
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