Where does CSS come from?

Where does
CSS come from?
Rachel Andrew CSSConf EU 2017
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017

1996Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017

Don't break
the web!

Where does CSS
come from today?

Specs originate from ...
☞ Browser vendors
☞ Other CSS User Agents (UAs for print, EPUB etc.)
☞ Companies such as Adobe
☞ From the CSS Working Group itself

CSS Grid
A new spec is born

7 April 2011
First Public Working Draft1
1
CSS Grid Layout, First Public Working Draft

CSS Advanced Layout Module
15 December
20052
2
https://www.w3.org/TR/2005/WD-css3-layout-20051215/

A Working Draft
A snapshot of the state of a speciﬁcation at a particular date.

The Editor's Draft
The current document in progress. This may be signiﬁcantly
diﬀerent to the most recent Working Draft.

Experimental
implementations
If you like CSS these are fun to play with!

❝A great deal of the content delivered on the Bloomberg Terminal
is actually rendered using web technologies such as JavaScript,
HTML and CSS [...] For years, we have sponsored Igalia to
implement and land advancements in the Chromium project and
its JavaScript engine, V8, and participated in the standards-creation
processes that deﬁne how these tools will operate in the future.❞
☞ https://www.techatbloomberg.com/blog/bloombergs-2016-open-
source-contributions-5-top-projects/

The gutter problem

.grid {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
}

.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
}

By using experimental implementations,
the web design and development community
can inﬂuence specs

Browsers implement
alongside spec development

Browser flags vs. Vendor prefixes
☞ Flexbox: experimental implementation shipped using vendor
prefixes.
☞ CSS Grid: experimental implementation behind browser flags

CSS Grid Candidate
Recommendation
29 September 20163
3
https://www.w3.org/TR/2016/CR-css-grid-1-20160929/

Candidate Recommendations
❝A Candidate Recommendation is a document that W3C believes
has been widely reviewed and satisﬁes the Working Group’s
technical requirements. W3C publishes a Candidate
Recommendation to gather implementation experience.4
❞
4
https://www.w3.org/2005/10/Process-20051014/tr#maturity-levels

Next step: Proposed Recommendation
Requires two independent interoperable implementations of each
feature

at-risk features

March 2017

Can this be
implemented?

What priority are
implementors giving it?

Does this make
sense to authors?

Will this
break anything?

If some CSS seems
weird
Doing a bit of digging and ﬁnding out why it is that way can help
your understanding of that property.

You can help to inﬂuence the direction of CSS
➀ Ask for features to be implemented in browsers
➁ Use and write about new browser features
➂ Share your ideas and feedback with the CSS Working Group
➃ Log bugs with speciﬁcations and with browsers

Take part in developing
the web platform
Share your ideas and feedback with the CSS Working Group

The CSS Working Group
☞ GitHub: https://github.com/w3c/csswg-drafts
☞ Twitter: https://twitter.com/csswg
☞ Current Work: https://www.w3.org/Style/CSS/current-
work.en.html

Show your use case when suggesting a feature
☞ what problem will this feature solve?
☞ are authors already working around this in some way?
☞ why are those existing methods problematic?

Log spec issues
CSS speciﬁcations have bugs too! Raise those as Issues on the CSS
WG GitHub at github.com/w3c/csswg-drafts/issues/.

Raise issues with browsers
Log any interoperability issues you see between browsers.
☞ Edge: https://developer.microsoft.com/en-us/microsoft-edge/
platform/issues/
☞ Firefox: https://bugzilla.mozilla.org/
☞ Chrome: https://bugs.chromium.org/p/chromium/issues/list
☞ Safari: https://bugs.webkit.org/buglist.cgi?
component=CSS&product=WebKit

Your dev superpower
Creating a Reduced Test Case.
☞ https://rachelandrew.co.uk/archives/2017/01/30/reporting-
browser-bugs/
☞ https://developer.mozilla.org/en-US/docs/Mozilla/QA/
Reducing_testcases
☞ https://webkit.org/test-case-reduction/

Contributing to CSS
is an amazing way to
learn about CSS

Where does
CSS come from?

Thank you!
https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
Find me at:
☞ https://rachelandrew.co.uk
☞ https://grabaperch.com
☞ http://gridbyexample.com
☞ https://twitter.com/rachelandrew

Where does CSS come from?

Recommended

Recommended

More Related Content

Similar to Where does CSS come from?

Similar to Where does CSS come from? (20)

More from Rachel Andrew

More from Rachel Andrew (20)

Recently uploaded

Recently uploaded (20)

Where does CSS come from?