A presentation at c’t webdev in in Cologne, Germany by Rachel Andrew
Learning to love CSS. Rachel Andrew @ c’t webdev Slides & resources https://noti.st/rachelandrew
Doing things on the web since 1996 Co-founder Perch CMS & Notist. Editor in Chief Smashing Magazine. Writer of many books. CSS Working Group Member representing Fronteers. Spec editor Multicol and Page Floats. MDN tech writer. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
From <table> to CSS Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
The ‘Netscape Resize Fix’ Reloaded the browser window on resize, otherwise all positioned elements stacked up top left. Slides & resources https://noti.st/rachelandrew
“He then employed the little-used CSS ‘float’ property to float the content to the desired width:” Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
The job of a web developer was as browser bug wrangler. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Frameworks helped busy teams deal with fragile CSS layout methods. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
The Grid Layout spec Initial implementation in Internet Explorer 10. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
A real layout system at the heart of CSS It’s more than just grid and flex. Slides & resources https://noti.st/rachelandrew
Talking about CSS as a layout system Slides & resources https://noti.st/rachelandrew
• • • • • • • • • Flow Layout Changing the value of display Out of flow elements Block Formatting Contexts Writing Modes Logical, flow-relative properties and values Alignment Sizing Media & Feature Queries Slides & resources https://noti.st/rachelandrew
Understanding display Slides & resources https://noti.st/rachelandrew
Normal Flow Block and Inline Layout Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
CSS is doing work for us, before we write any CSS. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
.example { display: flex; } Slides & resources https://noti.st/rachelandrew
.example { display: grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew
Changing the value of display changes that element and its direct children. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
The two values of display Slides & resources https://noti.st/rachelandrew
.example { display: block grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew
.example { display: inline grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew
The outer display type How the box behaves in the layout - block or inline Slides & resources https://noti.st/rachelandrew
The inner display type The formatting context of the direct children – grid, flex etc. Slides & resources https://noti.st/rachelandrew
Busting out of flow Slides & resources https://noti.st/rachelandrew
position Slides & resources https://noti.st/rachelandrew
.position { position: absolute; } Slides & resources https://noti.st/rachelandrew
float Slides & resources https://noti.st/rachelandrew
.box { background-color: rgb(43,91,128); } Slides & resources https://noti.st/rachelandrew
display: flow-root Slides & resources https://noti.st/rachelandrew
Creating a new Block Formatting Context Slides & resources https://noti.st/rachelandrew
.box { background-color: rgb(43,91,128); display: flow-root; } Slides & resources https://noti.st/rachelandrew
Writing Modes Slides & resources https://noti.st/rachelandrew
writing-mode: horizontal-tb; Inline Dimension Block Dimension Slides & resources https://noti.st/rachelandrew
writing-mode: vertical-rl; Block Dimension Inline Dimension Slides & resources https://noti.st/rachelandrew
Block Start Block Start Block End Block End Slides & resources https://noti.st/rachelandrew
Inline Start Inline End Inline Start Inline End Slides & resources https://noti.st/rachelandrew
Web layout was tied to physical dimensions We think in top, right, bottom, left. Or width & height. Slides & resources https://noti.st/rachelandrew
.example { width: 600px; height: 300px; } Slides & resources https://noti.st/rachelandrew
Logical Properties & Values Slides & resources https://noti.st/rachelandrew
.example { inline-size: 600px; block-size: 300px; } Slides & resources https://noti.st/rachelandrew
inline-size = width block-size = height Slides & resources https://noti.st/rachelandrew
block-size = width inline-size = height Slides & resources https://noti.st/rachelandrew
Physical v. Logical .example { padding-top: 10px; padding-right: 2em; margin-bottom: 2em; } .example { padding-block-start: 10px; padding-inline-end: 2em; margin-block-end: 2em; margin-inline: 1em; } Slides & resources https://noti.st/rachelandrew
.example { border-start-start-radius: 20px; border-start-end-radius: 3em; border-end-start-radius: 2em 4em; border-end-end-radius: 5px; } Slides & resources https://noti.st/rachelandrew
Layout exists in this flow-relative, logical world. Slides & resources https://noti.st/rachelandrew
Box Alignment https://drafts.csswg.org/css-align/ Slides & resources https://noti.st/rachelandrew
Aligning things in the block and inline dimensions. Slides & resources https://noti.st/rachelandrew
Distribution of space and alignment of items within their space. Slides & resources https://noti.st/rachelandrew
Block Start Inline Start Slides & resources https://noti.st/rachelandrew
justify-content In Grid, inline dimension space distribution between tracks Slides & resources https://noti.st/rachelandrew
.example { justify-content: space-between; } Slides & resources https://noti.st/rachelandrew
align-content In Grid, block dimension space distribution between tracks Slides & resources https://noti.st/rachelandrew
.example { align-content: end; } Slides & resources https://noti.st/rachelandrew
In flexbox, we justify on the main axis and align on the cross axis Slides & resources https://noti.st/rachelandrew
justify-content In Flex, main axis space distribution between flex items Slides & resources https://noti.st/rachelandrew
.example { justify-content: flex-end; } Slides & resources https://noti.st/rachelandrew
align-content In Flex, cross axis space distribution between flex lines Slides & resources https://noti.st/rachelandrew
.example { align-content: space-around; } Slides & resources https://noti.st/rachelandrew
For –content properties to do anything, you must have spare space to distribute! Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
.item { justify-self: end; align-self: end; } Slides & resources https://noti.st/rachelandrew
.example { justify-items: end; align-items: end; } Slides & resources https://noti.st/rachelandrew
“[justify-content] does not apply to flex items, because there is more than one item in the main axis.” Slides & resources https://noti.st/rachelandrew
.item { align-self: center; } Slides & resources https://noti.st/rachelandrew
“Prior to alignment via justifycontent and align-self, any positive free space is distributed to auto margins in that dimension.” Slides & resources https://noti.st/rachelandrew
.example div:last-child { margin-left: auto; } Slides & resources https://noti.st/rachelandrew
Let’s stop calling stuff that is in the spec a CSS ‘hack’ Slides & resources https://noti.st/rachelandrew
Safe and Unsafe alignment Avoiding CSS data loss Slides & resources https://noti.st/rachelandrew
.example { display: flex; flex-direction: column; align-items: center; } Slides & resources https://noti.st/rachelandrew
.example { display: flex; flex-direction: column; align-items: safe center; } Slides & resources https://noti.st/rachelandrew
Box Sizing https://drafts.csswg.org/css-sizing-3/ Slides & resources https://noti.st/rachelandrew
What about the Box Model? Slides & resources https://noti.st/rachelandrew
When we had to control the size of each item in a layout, the Box Model was key. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
500px Slides & resources https://noti.st/rachelandrew
30px + 500px + 30px Slides & resources https://noti.st/rachelandrew
5px + 30px + 500px + 30px + 5px Slides & resources https://noti.st/rachelandrew
40px + 5px + 30px + 500px + 30px + 5px + 40px Slides & resources https://noti.st/rachelandrew
What is the inline-size or width of the box? By default, the content-box Slides & resources https://noti.st/rachelandrew
If you want the specified width to include padding and border Set the box-sizing property to border-box. Slides & resources https://noti.st/rachelandrew
.example { box-sizing: border-box; } Slides & resources https://noti.st/rachelandrew
How big is that box? Slides & resources https://noti.st/rachelandrew
In the past everything was a length or a percentage. Slides & resources https://noti.st/rachelandrew
What is the minimum and maximum size of this thing? Slides & resources https://noti.st/rachelandrew
.example { grid-template-columns: min-content max-content; } Slides & resources https://noti.st/rachelandrew
Any content-based sizing is worked out based on these min and max content sizes. Slides & resources https://noti.st/rachelandrew
.example { display: flex; } Slides & resources https://noti.st/rachelandrew
.example > * { flex: auto; } Slides & resources https://noti.st/rachelandrew
.example > * { flex: auto; } Slides & resources https://noti.st/rachelandrew
.example > * { flex: 1; } Slides & resources https://noti.st/rachelandrew
Old browsers. They exist. Slides & resources https://noti.st/rachelandrew
We have a specification. Some of it isn’t implemented yet. Slides & resources https://noti.st/rachelandrew
Lack of support is very different to the buggy support of the past. Slides & resources https://noti.st/rachelandrew
Media & Feature Queries How big is my viewport? Is this a touchscreen? Does this browser support Grid? Respond based on the answers. Slides & resources https://noti.st/rachelandrew
Contributing to the platform Slides & resources https://noti.st/rachelandrew
Anyone can contribute to specifications You don’t need to be an Invited Expert or representative. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Everyone is allowed to contribute You don’t need permission, or to be qualified in some way. Slides & resources https://noti.st/rachelandrew
Read and comment on specification issues https://github.com/w3c/csswg-drafts/issues Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Show use cases As with any software development, real use cases are valuable. Slides & resources https://noti.st/rachelandrew
Contribute examples and diagrams to specifications Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
WICG Discourse https://discourse.wicg.io/ Slides & resources https://noti.st/rachelandrew
It will probably take longer than you think for changes to be made! Patience is required for web platform contributions. Slides & resources https://noti.st/rachelandrew
Raise browser bugs Fix bugs, or request that features are implemented. Slides & resources https://noti.st/rachelandrew
Learn to create a Reduced Test Case Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Test and offer feedback on features behind flags. This is the best time to make changes to a spec. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Web Platform Tests Help us test the web platform Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Many people who work on CSS started by writing tests. Slides & resources https://noti.st/rachelandrew
Comment on spec issues, raise new issues, contribute examples, raise browser bugs, write tests. Slides & resources https://noti.st/rachelandrew
Everything has changed. Slides & resources https://noti.st/rachelandrew
Nothing has changed. We need to work together to protect the open web platform. Slides & resources https://noti.st/rachelandrew
Thank you! @rachelandrew Slides & resources https://noti.st/rachelandrew
The capabilities of CSS in 2020 could not have been imagined when CSS1 was first proposed and adopted into Internet Explorer 3 in 1996. Yet, a website built back then, using the simplest of CSS, will still work today - a testament to the resilience of the language and the desire of those who develop it to not break the web. However CSS sometimes has a bit of a bad reputation as a fragile language that frequently does something other than what you would expect.
Rachel Andrew has been using and teaching CSS since those early days and, in this keynote presentation will take you on a tour of the language as it was then, and as it is today. Discover why some things in CSS seem a little bit strange; how the CSS Working Group are redefining core parts of CSS to make them easier to understand, teach, and use. Find out how the CSS Working Group, browsers, and the web community work together on the language. Learn how contributing to the web platform has been the driving force in Rachel’s career for the last 23 years, and how you can get involved too.
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.
