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
100
jQuery
nostalgia
4
440
Other Decks in Programming
See All in Programming
AI Agent系IDEを使って 開発生産性を爆アゲする
ouchi2501
1
100
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
120
DROBEの生成AI活用事例 with AWS
ippey
0
140
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
400
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
300
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
180
ARA Ansible for the teams
kksat
0
170
Rails アプリ地図考 Flush Cut
makicamel
1
130
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
Software Architecture
hschwentner
6
2.1k
Formの複雑さに立ち向かう
bmthd
1
900
Featured
See All Featured
A Tale of Four Properties
chriscoyier
158
23k
Facilitating Awesome Meetings
lara
52
6.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Building Adaptive Systems
keathley
40
2.4k
Agile that works and the tools we love
rasmusluckow
328
21k
It's Worth the Effort
3n
184
28k
Building Your Own Lightsaber
phodgson
104
6.2k
How GitHub (no longer) Works
holman
314
140k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Producing Creativity
orderedlist
PRO
344
40k
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