28 thoughts to “Why Is CSS So Weird?”

  1. I love this ! Explaining the principles behind browser decisions and helping us to understand the why is invaluable. When you said `CSS is designed not to loose content and not cause harm`, it explained the default behavior of overflow so well, I will never ever forget it. Teaching the why is so powerful, it just makes sense. More content like this please. Thank you !

  2. Lovely video this. I thought you did a great job at explaining the "why" part of the question and by placing everything into historical context it helps to explain it in a way that makes a lot of sense.

  3. Nice video! For me it's also a strawman argument in a way that it doesn't address the core issues I'm facing daily with CSS. I think styling things can be a better experience: removing the cascading aspect to not tie DOM structure to style, not having specificity or !important, generalizing the variables to something more intuitive and scalable, having means to limit the scope of rules, removing semantics / layouts overlap (a button and a div should be the same from a CSS standpoint)…

  4. Super well articulated and interesting lesson on the behaviour and history CSS. Must watch for anyone looking to understand styling in the browser.

  5. This is so great. The analogy with script/stage directions makes perfect sense – directors will do what they think is best to present the work for their audience with the actors and circumstances they work with. Browsers will do their best to display the content on the device and viewport they have for the audience of that content.

  6. Thank you for this awesome presentation, even though I already know all this, it was really nice seeing it summed up in such a brilliant way and explained on a one go. Thank you!

  7. Really appreciate the time you invested into making this. Would love to see similar content on other standards of the web. Sometimes in the hurry to get something done we forget to learn about the details of what was driving the people who made the decisions.

  8. This video is so so great. It perfectly nails down things I've been trying to explain to designers and (non front-end) developers for more than a decade. The InDesign comparison, the print press metaphors, everything is perfect. Thank you so much Miriam and the Mozilla team for this.

  9. A very well made explainer video that every front-end developer should watch. CSS has been actively evolving since it started with a number of tags you can actually memorize. With the advent of devices attached to the web it is not too difficult to see why CSS has been seen as weird or to some degree as insane. CSS is crazy beautiful and I hope it adheres to its original intent and let engineers be reminded what it is whenever they are in doubt.

  10. A small comment, your example of how the old site works with modern browsers doesn't apply to what you are saying. Actually a better example would be to open a modern site in a very old browser, they you will see the ignore 'feature' working.

  11. I've been doing web dev since 1999 and this video is missing some important points and misrepresenting a few of the others. The W3C recognized early on that HTML attributes were ill-suited to manage presentation, so an external standard would be necessary. 9 separate specs were offered and the unpleasant truth is that CSS was merely the least worst of the bunch, chosen because everyone was familiar with Microsoft Word's stylesheet character/paragraph/section formatting/inheritance model so they knew it was already feasible to implement.

    The real weirdness of CSS is that of the 3 web technologies, it's the only one developers can't extend and it came with a sizeable number of holes in what any graphic designer would expect from it. Tortured combinations of selectors were necessary to achieve some basic things like vertical centering, drop caps, side by side text columns, etc. and variables critical to theming systems were unavailable. While it's matured for these examples and others, it's still limited to what the spec allows and its strict unidirectionality hobbles design logic: for example, the very table-based formatting that CSS was intended to replace wasn't possible because table formatting cascades in both directions whereas CSS is only top-down: instead of rethinking this, every πšπšŠπš‹πš•πšŽ element was recreated as an equivalent property value for πšπš’πšœπš™πš•πšŠπš’.

    A few important corrections: CSS doesn't "suggest" anything; where the browser doesn't obey the selector is only where doing so contradicts a higher order rendering directive. CSS is completely able to "lose" content: πšπš’πšœπš™πš•πšŠπš’:πš—πš˜πš—πšŽ; doesn't reposition or hide content, it literally removes it from the document having implications for assistive technology. And it has enough overflow/clipping/positioning properties to visually hide content.

  12. QuedΓ© pendiente de lo que decΓ­a durante los 15 minutos, eso es raro. Pulgar para arriba Morzilla Dev, buen contenido.

Leave a Reply

Your email address will not be published. Required fields are marked *