Ideas
- Use Kevin’s article as an introduction
- Peter Griffin closing blinds GIF
- CSS looking different on different browsers
Talk
- When I was in school, we did a course called airport design. It promised to teach us all sorts of things about aviation and airport design which was really fascinating and cool to me so I was very excited. First week of class, we heard nothing of airports, we learnt about weather and wind patterns and the windrose and understanding wind in all sorts of ways, boring, But okay that was just the first week. Second week, we did nothing about aviation, we learnt about soil composition and various aspects of geology. At this point I was getting irritated but maybe the next week would be better. It wasn’t! We went through more than 5 weeks out of a 12 week semester doing all kinds of things that was not aviation. Looking back at the end of the semester, I still appreciate those weeks spent learning all sorts of random things which at the time seemed like they had nothing to do with why we were there. Because all those things helped us to understand something really important about engineering.
- The goal of this talk is not to give you CSS tips and tricks. There are many places on the internet that can give you that.
- My goal is to show you two things:
- CSS is weird
- CSS is too simple
- It can be made more complex and more capable (as evidenced by things like SASS etc) but it is intentionally being kept simple
- Things always end up looking different
- No matter how well you write your CSS, you can be assured of one thing; things will look different for someone somewhere
- Okay, but things still don’t work as I expect
- Styles break other styles, when you fix one thing it breaks another, overflow is weird, flow is weird, heights are weird
- CSS is hard because we have no control over the output
- We have to tell the browser our intended output and then depending on a tonne of variables it will do the best it can to give that to the user.
- But the user could be on a tonne of different devices, with different screen sizes, resolutions, orientations, different color gamuts, different browsers, different browser settings, different operating systems and more.
- With all that in play, we can’t have control over the output, the user does.
- …but that’s intentional
- The Rule of Least Power
- The web has to support an incredibly wide range of devices, screen sizes, input methods, network speeds, user preferences, and more. Meeting these diverse needs requires carefully balancing power and control. As you mentioned, the Rule of Least Power favors less powerful languages that make it harder to create complex systems, but are easier to analyze, extend and subset. CSS follows this by being a declarative styling language, not a full programming language.
- The web is different from the printed page
- Graceful Degradation and Progressive Enhancement
- Graceful degradation and progressive enhancement are key tenets - building baseline functionality that works universally, then layering on enhancements for browsers that support them. CSS allows old and new browsers to render the same content, just with different levels of fidelity in the styling. Flexbox and grid layouts degrade gracefully to normal flow on older browsers.
- Do no harm principle
- Other languages work more on absolutes, you tell it to do a think and it does it or, of course, it fails. CSS doesn’t fail, if the browser doesn’t understand a line of CSS, it just skips it and keeps on going with the rest.
- Backward compatibility
- Backwards compatibility is paramount given the web's massive scale. We can't break existing websites. Adding new CSS selectors and properties is easy, but removing or changing existing behavior is extremely difficult. When mistakes are made, we're stuck with them for a long time (see the box model hack for IE6).
- Favoring speed, simplicity and universality over pixel-perfect control. The web is not the printed page and that's ok.