Today's topics

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

	Generic	Print focus	GUI focus
Stable	Selectors 3, Values and units	Multi-column layout	Flexible box layout, Conditional rules
Development	Text	GCPM	Transitions, Animations

Designed for typography, but also used for apps

Used by nearly all Web pages, most e-books, most printed books

Complex specification: 60+ modules, many still in development

CSS structure

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

CSS structure

CSS structure – features

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

CSS has many features. “Feature” isn't a technical term, but it has to do with things that can be tested: each keyword, each kind of selector, each type of value for a property, but also syntax features such as cascading and inheritance. The set of features is still growing, we don't know yet what CSS will eventually consist of.

CSS structure – levels

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Originally we didn't intent CSS to be very big. It was to be a simple language that just about everybody could learn, that delivered good typography, but not necessarily complex layouts.

The current level 2 is close in size to what CSS was supposed to be. That was still much too big for the browsers around 1996, so we split it in two levels.

But in 1998 we had to leave things out of level 2, too. E.g., we replaced template-based grid layout (see css3-layout) by absolute positioning, left out vertical text and some properties related to pagination and books, and decided to postpone the handling of mathematics.

At the same time the implementers and users wanted more (although at a slower speed) and so we decided to take it slowly until 2000 and then add a level 3.

CSS structure – modules

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

CSS became very popular and professional users wanted us to extend it, rather than design a complementary language. (We did make XSLT and XSL-FO, and they are very successful with book publishers, but not with Web designers.) And so CSS level 3 soon became so big that we couldn't write it all in one specification. It would be too big and take too long.

So we decided to split CSS in modules. Eventually the whole of CSS should be defined by modules and the old level 1 and level 2 specifications will be obsolete, because all of their features are described in some module of level 3.

After some modules were finished, we found that people wanted their features to be extended even more, and we decided that it was best to add a level 4, so that we didn't have to make even more modules, but could keep the same name. Thus, e.g., we have started a Backgrounds & Borders level 4 and a Selectors level 4.

CSS structure – 2007

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

But there are very many modules and in the Working Group we keep splitting and rearranging modules whenever some features take more times than others. Modules are primarily for the benefit of the Working Group itself. They are difficult to explain to users.

We decided that users needed something easier. We don't really have the resources to do much for authors (we hope other people will write documentation for them, e.g., on W3C's new WebPlatform.org), but we can do something for one class of users, viz., implementers. We decided to publish a “Snapshot” every once in a while to document the features that were ready to be implemented.

In principle, implementers can implement everything that is a Recommendation or a Candidate Recommendation, but for extra safety our snapshot includes only Candidate Recommendations with which we already had some experience, so that we know they are really stable.

CSS structure – 2010

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

So far we published two snapshots. Their names aren't very attractive, we know. We just called them after the years we wrote them: 2007 and 2010. Maybe we'll come up with something more catchy for the next one…

The 2010 snapshot differs from the 2007 one only by the inclusion of the Media Queries specification. Of the many drafts we published between 2007 and 2010, only that one was stable enough to be added.

The next snapshot may include one or more of the new Values and Units, Backgrounds and Borders, Multi-column, Image Values and Speech, depending on how we evaluate their stability. We haven't decided that yet.

Unfortunately, the demand for new features has been such that we have mostly been writing new, unstable modules and haven't had time to finish the stable ones. So, instead of making a snapshot for 2013 that is hardly bigger than the one for 2010, we might wait until next year…

Selectors

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Selectors

Selectors – principles

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

For CSS, a document is always a tree with two kinds of ordered nodes:

elements
Unicode text (leaf)

Elements have

type (element name)
unordered attributes (≥ 0)
optional unique name (ID)
unordered classes (≥ 0)

Inside and outside the tree

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Selectors select elements and pseudo-elements
- never attributes, comments, letters…
Based on information in the tree (cf. XPath) or outside the tree
- inside: element name, attribute, ordering…
- outside: semantics (:link), history (:visited), interaction (:hover), etc.

CSS has a handful of pseudo-elements, because typographically interesting components do not always correspond exactly to an element in the document: ::first-line for the first line of a paragraph, :first-letter for the first letter letter or letter combination, ::before for a piece of text that doesn't occur in the document but is implied by the mark-up, etc.

De semantics of hyperlinks will maybe be expressed in CSS some day. Hyperlinks are on the edge of semantics and style and it is difficult in this case to keep them separate. In princip;le, the fact that something is a link is semantics, but whether to present the link as a hyperlink, a transclusion, or something else is style…

XLink and HLink have been attempts to capture the semantics in XML, so that other technologies, such as CSS, could build on it. But they haven't been very successful. Opera has proposed CSS properties ('-o-link').

New in level 3

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

XML Namespaces x|y
Following siblings E ~ F
Text-matching ~= ^= $= *= |= (for attributes)
Pseudo-classes for trees :root :nth-child() etc.
Pseudo-class for hyperlink-targets :target
Pseudo-classes for forms :enabled :disabled :checked
Negation :not()

Sibling elements

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

E ~ F
an element F that has elder sibling E

<div>
  <h1 id=french>French...</h1>
  <p>...
  <p>...
  <p>...
</div>
<div>
  <h1 id=english>English...</h1>
  <p>...
  <p>...
  <p>...
</div>

#french ~ p {
  font-weight: bold;
  color: #077;
  font-size: 1.4em;
  padding-left :1em;
}

Attribute selectors

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

E[foo]
an element E that has an attribute called foo

img[alt] {
  border: 10px rgb(147,103,94) solid;
  border-radius: 10px;
}

Negation selectors

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

E:not(s)
an element E that doesn't match s

img:not([alt]) {
  border: 10px rgb(147,103,94) solid;
  border-radius: 10px;
}

Attribute contains text

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

E[foo*="bar"]
an element E with an attribute foo that contains the text “bar”

a[href*="glossaire"] {
  color: gray;
}

Attribute begins with text

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

E[foo^="bar"]
an element E with an attribute foo whose value starts with the text “bar”

a[href^="http:"] {
  color:#6996d3;
  padding-left:1em;
  text-decoration:none;
}

Attribute ends with text

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

E[foo$="bar"]
an element E that has an attribute foo whose value ends with the text “bar”

a[href$=".pdf"]::after {
  content:url(pictopdf.gif)
  vertical-align: -20px;
}

First child

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

E:first-child
an element E that is the first child of its parent

th:first-child {
  border-left: none;
  text-align: left }
th:nth-child(1) {            /* same! */
  border-left: none;
  text-align: left }

Last element of a certain type

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

E:last-of-type
an element that is the last element of type E in its parent

th:last-of-type{
  border-bottom:2px solid red
}

The n'th child / every n'th child (1/2)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

*:nth-child(2n+4)
every second child starting with the 4th (i.e., children 4, 6, 8, 10, etc.)

td:nth-child(2n + 4) {
  background:rgba(29, 53, 91, .3);
}

Note: no space between the “2” and the “n”!

The n'th child / every n'th child (2/2)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

The n in an + b stands for all whole numbers ≥ 0 (i.e., 0, 1, 2,…)

If a or b is 0, you can omit that part:

:nth-child(0n+7) → :nth-child(7)
:nth-child(3n+0) → :nth-child(3n)

Negative numbers are allowed (and sometimes useful):

:nth-child(2n-5) same as :nth-child(2n+1)
:nth-child(-n+3) only children 1, 2 and 3 (!)

Even and odd

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

E:nth-child(odd)
same as nth-child(2n+1)

E:nth-child(even)
same as nth-child(2n+2)

td:nth-child(odd){
  background:orange;
}

Empty elements

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

:empty
an empty element (no text, no children)

th:empty, td:empty{
  background:rgba(253,143,149, .5);
}

The target of the current URL

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

:target
the element that is pointed at by the current URL, e.g..:

http://example.org/doc#fragment

From the demo:

:target { border:4px gold solid }

If you follow a link to somewhere in the middle of another document, then you can give the element that you jumped to a special style by means of ':target'.

Of course, you can also jump within the same document, e.g., from the table of contents to a section. Some tricks rely on jumping within a document to change the style of the document with every click, such as showing and hiding tabbed cards. (But hopefully one day we'll have ways to do such style changes directly, without the limitations of this trick.)

Check marks

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

:checked
the element is a checkbox that has been checked

input:checked + label {
  font-weight: bold }

Other selectors for forms: :enabled, :disabled :indeterminate

Selectors exercise

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

How would you make a document that allows you to switch which of two texts is visible?

Hint: you can do this with :target and ~, or with :checked and ~ (What is the advantage of :checked over :target in this case?)

Answer

Multi-column layout

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Multi-column layout

Two ways to use `columns`

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Two ways to use columns:

Give the number of columns: columns: 3
Give the desired column width: columns: 20em
The real width may be more, if the element's width isn't a multiple of the column width.

Gaps: `column-gap`

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

From the demo:

P.a {
  column-gap: 3em;
  column-rule: 1em solid red }
P.b {
  column-gap: 1em;
  column-rule: 2em solid lightgreen }

The rule is centered in the gap and does not increase the gap!

Unbalanced columns

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

If an element has a fixed height, columns can be filled in two ways:

column-fill: balance
divide the text over all columns
column-fill: auto
fill each column to the maximum height, starting from the first

In both cases it is possible that there is too much text. In that case, extra columns are added on the right side, outside the element's box. Whether they are visible depends on the value of overflow.

Text that spans columns

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

From the demo:

HTML:

<H2>Column-span:none</H2>
<P>Lorem ipsum dolor...
<P>Nulla sagittis, odi...
<H2>Column-span:all</H2>
<P>Lorem ipsum dolor...
<P>Nulla sagittis, odi...

CSS:

body {columns: 18em}
h2 {column-span: all}

Numbers (column-span:3) may come in CSS level 4

New column, widows & orphans

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

H2 {page-break-after: avoid}

(break-after is the new name for page-break-after, but not yet supported everywhere)

div {
  widows: 1;
  orphans: 1 }

The normal value for both is 2

Status

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Opera 11, 12 – small bugs
AHFormatter 5, 6 – (not tested)
Prince 8 – no column-span
IE 10 – (not tested)
Safari, Firefox, Chrome – experimental, no break-*
PDFreactor 5 – experimental

For older browsers you can try columnizer (if the user has JavaScript turned on)

Transitions

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Transitions

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Lets style changes, such as for :hover or :focus happen slowly

li#transition {
  transition: 1s;
}

(transition is actually a shorthand property)

May 2013: Firefox ok, Opera ok, Safari with prefix, Chrome ok, IE ok

Transition property

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Step 1: Specify which properties should transition slowly

transition-property: all;
transition-property: none;
transition-property: background-color;
transition-property: background-color,
  height, width;

(Normally not necessary, because default = all)

Transition-duration

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Step 2: Specify how long the transition should take

transition-duration: 2s;
transition-duration: 4000ms;
transition-duration: 4000ms, 8000ms;

Note: usuallly transition-duration on its own is sufficient, because the default for transition-property is all

Transition-timing-function

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Step 3: Speed at every moment of the transition

transition-timing-function: ease;
transition-timing-function: ease, linear;
transition-timing-function:
  cubic-bezier(0.6, 0.1, 0.15, 0.8);

Default: ease

Cubic bezier

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

ease is the same as cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear is the same as cubic-bezier(0.0, 0.0, 1.0, 1.0)

Timing function

cubic-bezier(0.6, 0.1, 0.2, 0.7)

Cubic bezier

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Define your own timing function

:nth-child(1):hover {
  transition-timing-function: 
   cubic-bezier(0.3, -0.3, 0.7, 1.3) }

Delayed transitions

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Step 4: The transition can optionally be delayed

transition-delay: 5s;
transition-delay: 4000ms, 8000ms;
transition-delay: -5s;  /* start early */

Start “early” means that the transition skips the first part.

Examples

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Demos:
Transforms for hover and focus

Online:
animatable
blur menu
polaroid table

Conditional rules

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Conditional rules

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

The module defines:

@media (but not the Media Queries)
- Device characteristics
- Nothing new since level 2
@supports
- UA capabilities
API for @media and @supports

Syntax 1

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Test for a supported property and value

@supports ( display: flex ) {
  body, #navigation, #content { display: flex }
  #navigation { color: gray }
  ...
}

The rules are only applied by a UA that knows the property display and the value flex

Syntax 2

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Test voor a property or value that is not supported

@supports not ( display: flex ) {
  body, #navigation, #content { display: box }
  ...
}

The rules are applied by a UA that does not know the property display or the value flex

Syntax 3

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Combinations with AND and OR

@supports (display: outside) or
    (color: hsl(0,100%,100%)) {...}
@supports (display: outside) and
    (color: hsl(0,100%,100%)) {...}

AND, OR and NOT can be combined arbitrarily, but only with explicit parentheses:

((color: red) or (color: #f00)) and
 ((margin: auto) or (padding: auto))

Syntax 4

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

The @supports may also be nested.

@supports (columns: 2) {
 @supports (background-size: 100% auto) {
  ... }
 @supports (float: top} {
  ... }
}

Demo

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

From the demo:

@supports (display: flex) {
  .supports.flex {display: block}
}

Values and units

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Values and units

Values and units – contents

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

initial and inherit
Old units (px, cm, mm, em, ex, pc, in, s, ms…)
New units (vh, vw, vmin, vmax, rem, ch…)
calc(...) – expressions
toggle(...) – not the inherited value
attr(...) – copy the value of an attribute

Explicit inheritance: `inherit`

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

(Level-2 feature)

a:visited {color: inherit}

The color of the parent, whatever it is

Reset to the initial value: `initial`

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

From the demo:

div.back { font-size: initial }

(May 2013: Safari ok, Konqueror OK, Chromium ok, Firefox ok, Opera no)

(In fact, for 'font-size' there are two other ways to achieve the same: 'medium' and '1rem'.)

Expressions: `calc()`

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

For calculations ( + - * / ) that depend on the current rendering

From the demo:

p.framed {
  border: 10px solid gold;
  padding: calc(2em - 10px) }
p.unframed {
  padding: 2em }

The two boxes have the same width

Calc() syntax

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

„+” and „-” must have spaces on both sides

Only values of the same type can be added: calc(1em + 2s) is wrong

Division (/) only by numbers: calc(100% / 10em) is wrong

Division by 0 is evidently not possible

(May 2013: FF ok, IE ok, Opera no, Safari 5 no, Safari 6 with prefix, Chrome ok)

Values out of range

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

The -1em is ignored here and the result is 2em:

div {
 padding: 2em;
 padding: -1em  /* ignored, must ≥ 0 */ }

but not here:

div {
 padding: 2em;
 padding: calc(0px - 1em) /* accepted */ }

(-1em is still impossible, the nearest valid value, 0, is used)

The '-1em' is caught as an error when the syntax is checked and the line is simply ignored. But calc() values can only be checked for the correct type (length, number, time…). The value depends, in general, on the element it is used on, and thus no attempt is made to check it except for division by 0. (Division by zero can be checked, because it only involves numbers, never units.)

The end

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

http://www.w3.org/Talks/2013/1001-CSS-Lyon

W3C

To Lead the Web to its full potential

To Anticipate the Trends

To Increase your company value

Join W3C

http://www.w3.org/Consortium/join

or contact: Bernard Gidon <bgidon@w3.org>

W3C

Pour Développer le potentiel du Web

Pour Anticiper les évolutions technologiques

Pour Augmenter la valeur et visibilité de votre organisation

Rejoigner le W3C

http://www.w3.org/Consortium/join

ou contacter : Bernard Gidon <bgidon@w3.org>

Bert Bos <bert@w3.org>
GPG fingerprint: 7744 0204 52A5 14D9 147D 2A13 2D7A E420 184B 5BA4

CSS, une petite selection

mini-tutoriel CSS 3

Today's topics

CSS structure

CSS structure – features

CSS structure – levels

CSS structure – modules

CSS structure – 2007

CSS structure – 2010

Selectors

Selectors – principles

Inside and outside the tree

New in level 3

Sibling elements

Attribute selectors

Negation selectors

Attribute contains text

Attribute begins with text

Attribute ends with text

First child

Last element of a certain type

The n'th child / every n'th child (1/2)

The n'th child / every n'th child (2/2)

Even and odd

Empty elements

The target of the current URL

Check marks

Selectors exercise

Multi-column layout

Two ways to use columns

Gaps: column-gap

Unbalanced columns

Text that spans columns

New column, widows & orphans

Status

Transitions

Transitions

Transition property

Transition-duration

Transition-timing-function

Cubic bezier

Cubic bezier

Delayed transitions

Examples

Conditional rules

Conditional rules

Syntax 1

Syntax 2

Syntax 3

Syntax 4

Demo

Values and units

Values and units – contents

Explicit inheritance: inherit

Reset to the initial value: initial

Expressions: calc()

Calc() syntax

Values out of range

The end

Two ways to use `columns`

Gaps: `column-gap`

Explicit inheritance: `inherit`

Reset to the initial value: `initial`

Expressions: `calc()`