2023-06 ¶
2023-06 Modern CSS in Real Life by chriscoyier (Co-Founder of CodePen) ¶
-
https://front-end.social/@chriscoyier (Co-Founder of CodePen)
Hey! Chris Coyier here. This is a blog-itized version of a presentation I created. It started life as a Keynote file which I presented in person at RenderATL in June of 2023.
I put a lot of work into it!
I’m so grateful to everyone who came and saw it. But you can’t beat the reach of websites! I decided I should get some more mileage out of it by sharing it here in an adapted form. I suppose you should read through this as if you’re watching a 45 minute presentation.
By any measure, CSS has gotten a lot better in recent years.
It’s gotten more useful features, better interoperability between browsers, and become easier to learn thanks to a concerted push toward making CSS a cohesive system free of quirks and hacks.
What matters though is the real world. Real websites. Real impact on the things we make and the people who use them.
It’s working.
2023-06-21 Cascade Layers are useless* ¶
if you don‘t understand the problems they solve and use them in combination with other solutions that tackle the same challenges albeit less elegantly and with the downside of limiting you in taking full advantage of selectors, one of the coolest features in CSS, and if you ignore the fact that they can help you organise and manage your own and third-party code.
I’ve heard several people say they’ve tried Cascade Layers but didn’t see any changes, so they dropped them again. That can also easily happen to you when you structure your CSS in layers for the first time.
I can explain why.
2023-06-18 The New CSS ¶
If you attended this year’s CSS Day in Amsterdam, however, or watched the videos via the live stream, like I did, you might have noticed that this time, something feels different.
This time, the changes coming to CSS are so fundamental on so many levels that it almost feels like a singularity.
There is now the CSS before and the CSS after the early 2020s.
Want to select the parent of an element? Not possible because of how the browser parses CSS? Well, now it is, with :has().
Want to adjust an element based on the dimensions of its container? Not possible because it might create endless loops? Well, it is now, thanks to container queries and the accompanying new length units.
Each of those features in itself is an incredibly useful and long-awaited addition to CSS and the Web platform.
Together with other modern features like custom properties, min(), max(), or clamp(), sizing keywords like min-content, max-content, and fit-content, you can create flexible and robust components and layouts like never before.
The very foundations of how we understand and write CSS have changed radically .
2023-06-09 Modern CSS For Dynamic Component-Based Architecture #CSSDay ¶
The language of CSS has had an explosion of new features and improvements in the last few years.
As a result, feature parity between browsers is at an all-time high, and efforts are being made to continue releasing features consistently and synchronously among evergreen browsers.
Today, we will explore modern project architecture, emphasizing theming, responsive layouts, and component design. We’ll learn about features to improve code organization and dig into layout techniques such as grid and container queries.
Finally, we’ll review real-world examples of context-aware components that use cutting-edge CSS techniques.
You’re sure to be inspired to expand your CSS skills and ready to create scalable, future-friendly web projects.
CSS Reset Additions ¶
CSS Reset Additions ( https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/#css-reset-additions )
Project Architecture ¶
CSS Nesting ¶
Native CSS nesting began to be supported in Chromium 112, Safari 16.5, and very newly in Firefox Nightly so stable support should be shortly behind.
For those who have used a preprocessor like Sass or LESS, native nesting will be familiar, but it does have some unique rules.
CSS Cascade Layers ¶
2023-06-09 Here are my slides from #CSSDay Modern CSS For Dynamic Component-Based Architecture ¶
Here are my slides from #CSSDay
Thanks for sticking with me to the end! 😅
2023-06-09 The language of CSS has had an explosion of new features and improvements in the last few years ¶
The language of CSS has had an explosion of new features and improvements in the last few years. As a result, feature parity between browsers is at an all-time high, and efforts are being made to continue releasing features consistently and synchronously among evergreen browsers.
Today, we will explore modern project architecture, emphasizing theming, responsive layouts, and component design. We’ll learn about features to improve code organization and dig into layout techniques such as grid and container queries.
Finally, we’ll review real-world examples of context-aware components that use cutting-edge CSS techniques.
You’re sure to be inspired to expand your CSS skills and ready to create scalable, future-friendly web projects .
2023-06-08 CSS Day #CSSDay ¶
2023-06-02 Quel est le point commun entre : Paged.js + le #colophon des documents + des livres de @cfeditions + un article de 2023 de @arthurperret + la typographie via @polylogue ? ¶
https://framapiaf.org/@ThierryStoehr/110474896969159498
Quel est le point commun entre : Paged.js + le #colophon des documents + des livres de @cfeditions + un article de 2023 de @arthurperret + la typographie via @polylogue ?
C’est @julieblanc et son superbe travail sur Paged.js et sur sa thèse, soutenue le 7 juin : https://phd.julie-blanc.fr/
Le tout avec du #format ouvert avec « l’utilisation des technologies du web » (donc et dont HTML, CSS, Javascript notamment).
Et aussi des questions passionnnantes — mises en avant dans le Résumé de la thèse.