A presentation at Fronteers Conference 2017 in in Amsterdam, Netherlands by Stephen Hay
A Ghost Story as told by Stephen Hay at Fronteers 2017 @stephenhay of CSS
A Christmas Carol in Prose, Being a Ghost-Story of Christmas
Ghost of
CSS Past
Photo by Alper Çu ğ un: https://www.flickr.com/photos/alper/1403915234/
Photo by Alper Çu ğ un: https://www.flickr.com/photos/alper/1403915234/ AARGGH! My left hand is gone!
Photo by Bart: https://www.flickr.com/photos/acbo/1470718525/
OH NO! There goes my Template Layout spec!
Photo by RobertG NL: https://www.flickr.com/photos/blueace/2847704261
Photo by RobertG NL: https://www.flickr.com/photos/blueace/2847704261
CSS Hacks
Ingenuity
https://alistapart.com/article/slidingdoors
“Rounded corners”
2012
Layout
Media queries and responsive design
Design systems and components
Developer tools
Preprocessors
Photo by RobertG NL: https://www.flickr.com/photos/blueace/2847704261
Functionally Cool Style Sheets
FuCSS Functionally Cool Style Sheets
A lot has happened in 10 years. Multiple backgrounds, animations, transitions, filters, variables, calc(), more selectors, etc.
Ghost of
CSS Present
source: HTTP Archive
source: HTTP Archive
Fighting against CSS
https://acss.io/
https://acss.io/
What problem are we solving?
50 lies programmers believe, #20 https://tommorris.org/posts/9317 CSS can be “object-oriented” or “functional” rather than a declarative rules language with a moderately complex inheritance model.
We seem to want CSS to be a programming language.
Our concerns have shifted from techniques to processes.
Ghost of
CSS Yet to Come
Ghost of
CSS Yet to Come
The basics are in place. Layout (Responsive) Images Colour Typography Motion
www.w3.org/Style/ CSS/current-work
CSS and developer tools will be more frequently used as design tools.
Here’s the real challenge:
From techniques to processes, from processes to people. Respect and collaboration.
We need to remember that all of this is by people, for people, and about people.
All of the real problems are people problems.
Someone on Twitter, demonstrating skilful debate and formidable social prowess.
Someone on Twitter, demonstrating skilful debate and formidable social prowess.
Try this: defend your opponent’s position and see what you learn from it.
Learn from each other. Keep it fun!
0 10 20 30 40 50 HTML CSS JavaScript Browsers Standards Performance Type/fonts Responsive / Mobile Accessibility SVG Other 10 years of Fronteers talks
I declare myself the victor of this conference and I’m going to celebrate in Amsterdam.
Thank you. @stephenhay
for free. You
can too.