A rather geeky/technical weblog, est. 2001, by Bramus
What happens when you combine the fact that part after the : for CSS Custom Properties doesn’t need to be valid CSS with window.getComputedStyle()? You get a way of passing data – including Arrays, Objects, and even JSON – from CSS to JavaScript. Psst… Hey kid… Did you know you can pass data from your …
Continue reading “Pass Data from CSS to JavaScript with CSS Variables”
Ahmad Shadeed is at it again(*), this time with a guide on Overflow in CSS: In CSS, we can have control over an element when its content is too big to fit in. The property for that is overflow, which is a shorthand for overflow-x and overflow-y properties. For this article, I will give an …
clip-path
Reminds me of Eric Meyer’s Flexible Captioned Slanted Images in which he combines Flexbox and CSS clip-path. In that implementation Eric did have to correct the margins to fix the gap between the items. With the grid implementation this looks like to be no problem.
Sebastian his website supports Webmentions. To show these on his website he used a tad of JS to display them underneath each page. Not being 100% happy with that flow, he sought a better way to implement these … After some tinkering, I came up with an alternative: a cron-based GitHub Action that queries webmention.io …
Continue reading “Webmentions on a static site with GitHub Actions”
Handy tool by Michelle Barker: A little tool to generate compound grids. Enter the number of columns for each of your grids, and they’ll be magically merged into a compound grid. Use the output in your grid-template-columns property when using CSS Grid for layout. Compound Grid Generator →
Lighthouse 6 is the first major release of the popular auditing tool since May 2019, introducing critical changes that will impact everyone relying on the scoring. This article explains the changes in the upcoming Lighthouse 6.0.0 and its scoring algorithm. Lighthouse changes how Performance Score is calculated →
Adam Rackis has written an extensive article on React Suspense for CSS-Tricks: This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We’ll look at how to integrate routing and data loading with Suspense in React. React Suspense in Practice → 📽 If …
Max Stoiber: We should ban margin from our components. Hear me out. By banning margin from all components you have to build more reusable and encapsulated components. I think the message is a bit more nuanced though: margins of course still are allowed and used throughout your CSS, but if you want to allow a …
Josh W. Comeau, on embracing modern image formats to ship less bytes to browsers. As not all browsers understand all image formats (Apple/Safari for example doesn’t support .webp, an image format developed by Google) he resides to the picture element with various sources set. <picture> <source srcset="/images/cereal-box.webp" type="image/webp" /> <source srcset="/images/cereal-box.jp2" type="image/jp2" /> <img src="/images/cereal-box.jxr" …
Adrian Roselli: It is not uncommon that I raise an accessibility or usability issue with a client’s design or implementation and am met with either “But Google does this”, or “But Apple does this.” Mostly it is the default response to any issue I raise, but it is far worse when it is a reaction …