CSS: The Boring Bits
-
Upload
peter-gasston -
Category
Technology
-
view
3.422 -
download
1
description
Transcript of CSS: The Boring Bits
Peter Gasston@StopsAtGreen
CSS3:The boring bits.
X
Boring things*The Matrix Revolutions
The Lord of the Rings filmsColdplay
Apple vs Android
*Removed images of dubious provenance
Exciting CSS
.bar { filter: sepia(0.5); }
Filters.foo { filter: grayscale(1); }
background-image: cross-fade( url('foo.png'), url('bar.png'), 50%);
cross-fade()
An interesting paradox:The more boring a CSS feature is, the
more excited I get when someone does something cool with it.
Backgrounds& Borders
http://dev.w3.org/csswg/css4-background/
background-position: h n v n;background-position:right 20px bottom 10%;
Four values allows more flexible placing of background images.
border-corner-shape: foo;border-corner-shape: bevel;
border-clip: [x y];border-clip: [visible invisible];border-clip: 10px 1fr 10px;
Custom border shapes; clip the border to show the areas you want.
@namespace "http://www.w3.org/1999/xhtml"; @namespace svg "http://www.w3.org/2000/svg";
Namespaces
http://www.w3.org/TR/css3-namespace/
a { color: #F00; }svg|a { color: #00F; }
@font-face { font-family: foo; src: url('foo.woff'); unicode-range: U+31-33;}
unicode-range
http://www.w3.org/TR/css3-fonts/#unicode-range-desc
<meta name="viewport" content="width=320">
Device Adaptation
http://dev.w3.org/csswg/css-device-adapt/
@viewport { width: 320px; }
@viewport { foo: bar;}
@media screen and (max-width:320px) { @viewport { foo: baz; }}
Values
http://www.w3.org/TR/css3-values/
body { font-size: 10px; }h1 { font-size: 2.4em; }h1 span { font-size: 0.9167em; }h1 span { font-size: 2.2rem; }
rem
The rem unit is always relative to the root font-size, not that of its parent as em is.
vh, vw, vmin
100vw
div { width: 25vw; }
vh = viewport height, vw = viewport width, vmin = either vh or vw, whichever is smaller. It’s a length measure that’s relative to the viewport, not the parent.
attr(title)attr(data-color color)
attr()
The attr() value will now accept more than strings, as it currently does. You can specify the type to be color, url, number, and more.
div::before { content: 'foo'; }div { content: replaced 'foo'; }
It’s proposed that you be able to replace content in any element, rather than just ::after or ::before.
calc()width: calc(75% - 20px)
cycle()em { font-style: cycle(italic,normal); }
Will cycle through the values depending on inherited values. For example, em will be have font-style: italic if its parent is normal, or normal if its parent is italic.
Selectors
http://dev.w3.org/csswg/selectors4/
:targete { color: #F00; }e:target { color: #00F; }
:target is applied to an internal link which the user has followed; e.g. <a href=”#foo”>
:dir()e:dir(rtl) {}
Used for internationalised sites; rtl, ltr.
:not()e:not(.foo) {}
:nth-child(odd):not(:last-child):nth-*
:matches().foo .bar h1, .foo .bar h2, .foo .bar h3 {}.foo .bar :matches(h1,h2,h3) {}
:any-link:local-link
:link, :visited
:any-link means any link, regardless of its visited state; :local-link is for links on the same domain.
:nth-column():nth-last-column()
:column()
Applied to, for example, tables. Will possible work for grid layouts too.
:future
:past:current
Selectors based on temporal position, such as combined with audio, video, screen readers.
label:hover /for/ inputE /x/ F
A bit complicated this; the x value is an attribute of E which is equal to the id value of F. Best example is <label for=”foo”> <input id=”foo”>
$E > F
The parent selector!!! The element E has styles applied if it contains element F.
:root { data-foo: #F00;}h1 { color: data(foo);}
http://dev.w3.org/csswg/css-variables/
CSS Variables. Uses the data- pattern from the HTML5 data attributes. Scoped by applying to elements.
Boring = Exciting
Still available.Still not boring.
http://thebookofcss3.com