SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
1.
Where does
CSS come from?
Rachel Andrew CSSConf EU 2017
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
2.
1996Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
3.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
4.
Don't break
the web!
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
5.
Where does CSS
come from today?
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
6.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
7.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
8.
Specs originate from ...
☞ Browser vendors
☞ Other CSS User Agents (UAs for print, EPUB etc.)
☞ Companies such as Adobe
☞ From the CSS Working Group itself
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
9.
CSS Grid
A new spec is born
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
10.
7 April 2011
First Public Working Draft1
1
CSS Grid Layout, First Public Working Draft
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
11.
CSS Advanced Layout Module
15 December
20052
2
https://www.w3.org/TR/2005/WD-css3-layout-20051215/
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
12.
A Working Draft
A snapshot of the state of a specification at a particular date.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
13.
The Editor's Draft
The current document in progress. This may be significantly
different to the most recent Working Draft.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
14.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
15.
Experimental
implementations
If you like CSS these are fun to play with!
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
16.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
17.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
18.
❝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 define how these tools will operate in the future.❞
☞ https://www.techatbloomberg.com/blog/bloombergs-2016-open-
source-contributions-5-top-projects/
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
19.
The gutter problem
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
22.
By using experimental implementations,
the web design and development community
can influence specs
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
23.
Browsers implement
alongside spec development
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
25.
CSS Grid Candidate
Recommendation
29 September 20163
3
https://www.w3.org/TR/2016/CR-css-grid-1-20160929/
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
26.
Candidate Recommendations
❝A Candidate Recommendation is a document that W3C believes
has been widely reviewed and satisfies 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
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
27.
Next step: Proposed Recommendation
Requires two independent interoperable implementations of each
feature
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
28.
at-risk features
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
29.
March 2017
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
30.
Can this be
implemented?
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
31.
What priority are
implementors giving it?
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
32.
Does this make
sense to authors?
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
33.
Will this
break anything?
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
34.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
35.
If some CSS seems
weird
Doing a bit of digging and finding out why it is that way can help
your understanding of that property.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
36.
You can help to influence 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 specifications and with browsers
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
37.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
38.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
39.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
40.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
41.
Take part in developing
the web platform
Share your ideas and feedback with the CSS Working Group
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
42.
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
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
43.
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?
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
44.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
45.
Log spec issues
CSS specifications have bugs too! Raise those as Issues on the CSS
WG GitHub at github.com/w3c/csswg-drafts/issues/.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
46.
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
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
47.
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/
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
48.
Contributing to CSS
is an amazing way to
learn about CSS
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
49.
Where does
CSS come from?
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017
50.
Rachel Andrew | @rachelandrew | Slides & Resources https://rachelandrew.co.uk/speaking/event/cssconfeu-2017