A rather geeky/technical weblog, est. 2001, by Bramus
Despite being over 20 years old, there’s signs that CSS might be going through the same tumultuous teenage years that JavaScript just went through. Flexbox! Grid! CSS-in-JS! In 2019, CSS is finally dyeing its hair pink and getting a tattoo just like it’s always secretly wanted. Parenting books won’t help much with this one, but …
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. …
<picture> element
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 Custom …
Continue reading “Reducing motion with the <picture> element”
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 …
Continue reading “Indicating focus to improve accessibility”
Using box-shadow, it’s possible to create a pixels on screen: See the Pen Pixel Art 3: Side-by-Side Box-Shadow by Jacque (@jschrag) on CodePen. As you can define multiple box-shadow entries – comma-separated – it’s possible to draw multiple pixels on screen … Creating Pixel Art with CSS →
Good news! Firefox 69 will support subgrid. As Rachel Andrew explains: In terms of new syntax, and new things to learn, this is a very small change for web developers who have learned grid layout. A grid defined as a subgrid is pretty much the same as a regular nested grid, albeit with its own …
The folks at Igalia has been recently working on the implementation of CSS Containment in Chromium – which already shipped in Chrome 52, back in 2016 – by providing some fixes and optimizations based on the standard. Their post forms a nice intro on the subject: The main goal of CSS Containment standard is to …
Sarah Drasner (@sarah_edo), now at Netlify, created a handy tool to visually create CSS Grid Layouts. Handy if you’re not all to familiar with it, yet. CSS Grid Generator →CSS Grid Generator Source (GitHub) →
Fun little quiz, testing your CSS Selectors knowledge. Well Aimed: How well do you know CSS Selectors →
:nth-child(), and orderTobias Ahlin: On the surface it seems fairly easy to create a masonry layout with flexbox; all you need to do is set flex-flow to column wrap and voilà, you have a masonry layout. Sort of. The problem with this approach is that it produces a grid with a seemingly shuffled and obscure order. Flexbox …
Continue reading “CSS masonry with flexbox, :nth-child(), and order“