The growing up of CSS
Håkon Wium Lie
haakon@wiumlie.no
@wiumlie
Håkon Wium Lie
haakon@wiumlie.no
@wiumlie
<h1>Headline</h1>
h1 {
font-size: 14px;
color: red;
}
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
border-radius: 40px
border-radius
border-radius: 40px
border-radius
border-radius: 150px / 50px
border-radius
border-radius: 60px 0 / 60px 0;
border-radius
background: linear-gradient(to right, yellow, red)
linear-gradient
background: linear-gradient(to right, yellow 40%, red 60%)
linear-gradient
background: linear-gradient(45deg, yellow 40%, red 60%)
linear-gradient
background: linear-gradient(45deg, yellow 50%, red 50%)
linear-gradient
background:
repeating-linear-gradient(45deg, yellow 0px, yellow 10px, red 10px, red 20px);
linear-gradient
Andale Mono Arial Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet 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
Broadcast Titling
font-family: Cardiff
Cardiff
font-family: Direction
Direction
From: "Siebrand Mazeland (WMF)" <smazeland@wikimedia.org> Date: Wed, 14 Dec 2011 18:49:19 +0100 Sender: wikitech-l-bounces@lists.wikimedia.org To: wikitech-l@lists.wikimedia.org, mediawiki-i18n@lists.wikimedia.org Subject: [Wikitech-l] Report on WebFonts deployment On Monday December 12 at 18:00 UTC we deployed the extension WebFonts[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 WebFonts now. WebFonts was not deployed on Malayalam and Tamil projects. The reason for this was that community members had requested us not to. We are confident that in time, the communities will request that WebFonts is enabled on their projects.
<img src=coat-of-arm.svg>
img { transition: 1s }
img:hover { transform: rotate(-360deg) }
<div class=...> <div>aaaaaaa</div> <div>bbbbbbb</div> <div>ccccccc</div> </div>
div.abspos { position: relative; top: 0em; height: 40px }
div.abspos div { position: absolute; top: 0 }
div.abspos div:nth-child(2) { left: 120px }
div.abspos div:nth-child(3) { left: 240px }
div.table { display: table }
div.table div { display: table-cell }
div.float div { float: left }
div.flexbox { display: flex }
div.multicol {
columns: 3;
column-gap: 0;
}
div.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 20px;
}
Current browsers consider the computer screen to be the primary presentation target, but HTML ... has the potential of supporting many output media, e.g. paper, speech and braille.
@page {
size: 7in 9.25in;
margin: 25mm;
@bottom-right { content: counter(page) }
}
