CategoryCSS

April 1, 2021 — By systemizing the fundamentals of typography and space, and leaning into the inherent fluidity of the web, a free new CSS tool called Utopia offers an alternative to breakpoint-driven design. This shared language between design and development streamlines communication and encourages the creation of bespoke constraints for your projects to ensure consistent and harmonious designs. Read more…

March 22, 2021 — In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. We sincerely hope that these tools and techniques will prove to be useful in your day-to-day work — and most importantly help you avoid some time-consuming, routine tasks. Read more…

March 15, 2021 — In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. This time Iris Lješnjanin brings you CSS Generators: from CSS shadows to easing gradients to CSS overlays to CSS doodles. Read more…

March 11, 2021 — Ideally, a CSS auditing tool would provide some insights about how heavily CSS implact rendering performance, and which operations lead to expensive layout recalculations. It could also highlight what properties don’t affect the rendering at all (like Firefox DevTools does it), and perhaps even suggest how to write slightly more efficient CSS selectors. In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers to get their work done better and faster. Starting out with a few tools for getting to the bottom of CSS. Read more…

February 23, 2021 — A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported aspect-ratio property in combination with object-fit provides a remedy to this headache of the past! In this article, Stephanie Eckles will show you how to use these properties, in addition to creating a responsive gradient image effect for extra flair. Read more…

February 9, 2021 — In this episode, we’re talking about HTML controls. Why are they so hard to style, and how might that change in the future? Drew McLellan talks to Microsoft’s Stephanie Stimac and Melanie Richards to find out. Read more…

February 8, 2021 — We use abstractions and conventions to hide away the tricky and error-prone parts, which in turn makes it easier for everyone who needs to do the same task. The ideas Steven Frieson shares here should be actionable in most applications depending on your styling solution and browser support. Migrating to use this system is not very risky since stacking contexts are already scoped individually; you can migrate one context as it already exists at a time. Read more…

February 2, 2021 — On your list of places where people might access your web app, Teams is probably number “not-on-the-list”. But it turns out that making your app accessible where your users are already working has some profound benefits. In this article, Tomomi Imura and Daisy Chaussee will take a look at how Teams makes web apps a first-class citizen, and how it enables you to interact with those apps in completely new ways. Read more…

February 1, 2021 — The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects, too. Some of the really handy powers CSS gives you might have slipped you by, so in this article, Andy Bell will take a look into masonry layout, :is selector, clamp(), ch and ex units, updated text decoration, and a few other useful CSS properties. Read more…

January 12, 2021 — Let’s make 2021… fast! An annual front-end performance checklist, with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques. Read more…