The future of CSS
The future of CSS
Håkon Wium Lie
howcome@opera.com
20 years!
- Oct 10: CSS proposed
- Oct 13: Netscape Navigator announced
HTML
<h1>Headline</h1>
- simple structure
- universal semantics
- media-independent
- open standard
CSS
h1 {
font-size: 14px;
color: red;
}
- simple
- presentational
- media-dependent
- open standard
HTML & CSS
<h1>Headline</h1>
h1 {
font-size: 14px;
color: red;
}
font-size: 40px
font-size
font-style: italic
font-style
font-family: serif
font-family
background: #fe7
background
border: 0.1em solid black
border
border: 0.1em solid #486
border-color
border: 0.1em dotted #486
border-style
border: 0.3em inset #46F
border-width
border: 0.5em outset #F46
border-width
text-shadow: 10px 10px black
text-shadow
text-shadow: 5px 5px 5px #F79
text-shadow
text-shadow: 0px 0px 20px orange; color: white
text-shadow
border-radius: 40px
border-radius
border-radius: 40px
border-radius
border-radius: 150px / 50px
border-radius
border-radius: 60px 0 / 60px 0;
border-radius
box-shadow: 20px 20px gray;
box-shadow
box-shadow: 20px 20px 10px #993;
box-shadow
box-shadow: 0px 0px 20px 10px #993;
box-shadow
box-shadow: 0px 0px 20px 10px #993 inset;
box-shadow
<img src=coat-of-arm.svg>
img { transition: 1s }
img:hover { transform: rotate(-360deg) }
Seoul
li { transition: 0.5s }
li:hover {
letter-spacing: 10px;
transform: rotate(10deg);
color: red
}
Multicol: Responsive by design
How long will the web last?