Why CSS Was Invented (Håkon Wium Lie)

Why CSS was inventedHåkon Wium Lie

[email protected]

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!