1 private link
See also CSS tricks
A small tool to compute your fluid typography
An evergreen CSS course and reference to level up your web styling expertise.
It might seem that such selectors would be a speed problem. However, the selector matching performance is fast. The CSS declarations are so friendly to compression algorithms that the effort required to optimise a CSS selector is usually better spent working on other parts of your application with a greater return on investment.
Don’t use runtime CSS-in-JS if you care about the load performance of your site. Simply less JS = Faster Site. There isn’t much we can do about it. But if you want to see some numbers, continue reading.
Not sure about you, but I often wonder how to build a carousel component in such a way that you can easily dump a bunch of items into the component and get a nice working carousel — one that allows you to scroll smoothly, navigate with the dynamic buttons, and is responsive
"`content-visibility`: the new CSS property that boosts your rendering performance", Una Kravetz (@una), Vladimir Levin
content-visibilityenables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. It also allows for faster interactions with the on-screen content.
Un précis de vocabulaire pour se rappeler des termes CSS.
A wonderful pen by Vincent Valentin
[…] who could define a CSS version? The CSS working group doesn’t seem to feel it has time for it.
No class names, no frameworks, just semantic HTML and you're done. Simple, reusable components, for a clean looking design that doesn't get in the way.
The prefers-reduced-data media feature is used to detect if the user has a preference for being served alternate content that uses less data for the page to be rendered.
In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on occasion and finally consider techniques that we can employ to mitigate them.
To make sure your animations don’t cause performance issues, consider the impact of animating a given CSS property. Avoid layout recalculations and minimize repaints. Where you can, stick to changing transforms and opacity.
A visual way to understand CSS specificity. Change the selectors or paste in your own.
Some solutions to common layouting issues
"I hope that this post has extended your vision on web performance beyond the well known barrier app vs network, and that this help you to rethink or improve your app architecture."