A few new CSS features you might have missed
Thursday, November 5, 2009, 14:00 PST
W3C Technical Plenary, Santa Clara, CA
Slides at http://dbaron.org/talks/
Features more commonly talked about
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
box-shadow,
text-shadow,
column-rule,
column-count,
border-radius,
transform
border-image
border-image
border-image
-moz-border-image: url(border-curve.png) 300 300 300 300 / 2em stretch stretch
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
font-size-adjust
Old: the blockquote element
New: the blockquote element
font-size-adjust: 0.45
Media Queries: old use of @media
@media screen, projection {
body { background: black;
color: yellow; }
}
@media print {
body { background: white;
color: black; }
}
Media Queries
@media (min-width: 22em) {
div#mqnav { float: left; width: 10em; }
div#mqnav .item { display: block; }
div#mqmain { margin-left: 11em; }
}
Schedules
Reservations
Train Status
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
width: min-content
width: -moz-min-content
Hello
This has some generally-short text in it.
johnsmith@industrialwidgets.com is a long address
(Can use on
min-width and
max-width too.)
width: max-content
width: -moz-max-content
Hello
This has some generally-short text in it.
johnsmith@industrialwidgets.com is a long address
(Can use on
min-width and
max-width too.)
width: fit-content
width: -moz-fit-content
Hello
This has some generally-short text in it.
johnsmith@industrialwidgets.com is a long address
(Can use on
min-width and
max-width too.)