Can I email is like Can I use but specifically for email: which HTML and CSS features are supported by which mail client? They also provide a scoreboard, ranking mail clients based on their support among the 70 HTML and CSS features listed on Can I email. Can I email… Support tables for HTML and […]
Really nice CSS Grid demo by Olivia NG. It’s a magazine containing twelve pages on The Avengers: CSS Grid: Magazine Layouts → 💁♂️ Other nice CSS Grid Demos by Olivia include a Floor Plan and an Excel Spreadsheet
ℹ️ This is a reply to Johan Ronsse’s post “Overengineered Packages?”. Be sure to read it first. After having posted about the class-names package, Johan turned to Twitter to state that the package overengineered. In a follow-up blogpost he argues that: At the moment I feel like it’s only invented because of a deeper problem: […]
By randomly changing the opacity and adding a little text-shadow, one can create this old typewriter effect: Makes good use of currentColor for the shadow, so it can be applied on any coloured text. Old Typewriter Text Effect → 💁♂️ Don’t confuse this effect with a typing carousel which types the letters one-by-one.
Nice work by Tatiana Mac, in which she recreated “Kandinsky zum 60. Geburtstag” by Herbert Bayer using CSS Grid. For comparison, here’s the original: Kandinsky Geburstag Invite on CodePen →
As just announced (on stage) at CSS Day by Heydon himself: If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS. […]
Great trick by Brad Frost, in which he combines prefers-reduced-motion? with the <picture> element <picture> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <img src="animated.gif alt="brick wall" /> </picture> Yes, that actually works! Reducing motion with the <picture> element → 💫 When taking prefers-reduced-motion into account in your CSS code, it becomes really powerful when combined with CSS Variables
Great article by Hidde. It totally rhymes with my Building Better Forms™ by not taking away affordances post. It’s a common, but fairly easy-to-fix accessibility issue: lack of indicating focus. In this post I will explain what we mean by focus and show you how focus outlines make your site easier to use. Indicating focus […]