why css was invented (håkon wium lie)
TRANSCRIPT
HTML<h1>Headline</h1>
• simple structure• universal semantics• media-independent• open standard
CSSh1 {
font-size: 14px;color: red;
}
• simple• presentational• media-dependent• open standard
HTML & CSS<h1>Headline</h1>
h1 {font-size: 14px;color: red;
}
• simple• open standards
CSS properties
Some text
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
CSS3
border-radius: 40px
border-radius
border-radius: 40px
border-radius
border-radius: 150px / 50px
border-radius
border-radius: 60px 0 / 60px 0;
border-radius
CSS3 transitions
<img src=coat-of-arm.svg>img { transition: 1s }img:hover { transform: rotate(-360deg) }
Webfonts
Microsoft's Core fonts
Andale Mono ArialComic Sans MSCourier New GeorgiaImpact Times New RomanTrebuchet MS Verdana
@import url(http://www.princexml.com/fonts/steffmann/index.css);font-family: Angel
Angel
font-family: Becker Inline
Becker Inline
font-family: Broadcast Titling
BroadcastTitling
font-family: Cardiff
Cardiff
font-family: Direction
Direction
From: "Siebrand Mazeland (WMF)" <[email protected]>Date: Wed, 14 Dec 2011 18:49:19 +0100Sender: [email protected]: [email protected], [email protected]: [Wikitech-l] Report on WebFonts deployment
On Monday December 12 at 18:00 UTC we deployed the extensionWebFonts[1] to 40 wikis in 11 Indic languages and Wikimedia Incubator-- all wikis in Assamese, Bengali, Gujarati, Hindi, Kannada, Marathi,Nepali, Oriya, (Eastern) Punjabi, Sankrit and Telugu have WebFontsnow. WebFonts was not deployed on Malayalam and Tamil projects. Thereason for this was that community members had requested us not to. Weare confident that in time, the communities will request that WebFontsis enabled on their projects.
Testing
Opera
Apps
Multicolumn layout
Books
body {font: 14pt / 1.4 "Adobe Caslon Pro", serif;font-variant: opentype(dlig, onum);hyphens: auto;text-replace:
"s" "\017F" /* replace s with long s, which looks like f */"\017Ff" "sf" /* revert change where s appears before f */"\017Fi" "si" /* revert change where s appears before i */"\017F\20" "s\20" /* revert change at end of word */"\017F\0A" "s\20" /* revert change at end of word, where newline follows */"\017F\200B" "s\20" /* revert change at end of word, where zero width space follows */"\017F," "s," /* revert change at end of word, where comma follows */"\017F;" "s;" /* revert change at end of word, where semicolon follow */"\017F:" "s:" /* revert change at end of word, where colon follows */"\017F." "s." /* revert change at end of word, where period follows */":" "\2008:"; /* add punctuation space before colon */
}
How long will the web last?
500 years!
