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
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
550
Sheets API使ってみた
toshi0383
2
140
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.2k
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
910
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
390
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
290
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
VS Code をプロダクトにどう取り込むか
onomax
1
520
SIMD Parallel Programming with the Vector API
josepaumard
0
210
Elm 0.19.0 Changes
bkuhlmann
0
490
Featured
See All Featured
Designing for Performance
lara
602
67k
Side Projects
sachag
451
41k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
17
1.6k
Optimising Largest Contentful Paint
csswizardry
11
2.4k
Product Roadmaps are Hard
iamctodd
45
9.7k
How STYLIGHT went responsive
nonsquared
92
4.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
32
6k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Building Adaptive Systems
keathley
32
1.9k
We Have a Design System, Now What?
morganepeng
44
6.8k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
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