|
6 posts total
 New blog post: “My Mastodon Starter Pack” https://blog.kizu.dev/my-mastodon-starter-pack/ Sometimes, I invite someone to join #Mastodon, and I end up sharing the same links and information repeatedly. Following the “manual until it hurts” #IndieWeb practice, after repeating the same things a few times, it is time to “automate” it. Well, in this case, just put everything into one blog post, I guess. I wrote a new article: “Possible Future CSS: Tree-Counting Functions and Random Values” https://kizu.dev/tree-counting-and-random/ Many exciting things were added to #CSS specs over the years, but some have yet to be implemented by browser engines. In this article, I spotlight two features from Level 5 of the CSS Values and Units Working Draft, describe how we can prototype them with what we have in CSS today, and provide several interactive demos of their use cases. Note: currently, it might not work in mobile Safari. I spent a few hours trying things, the latest dev deploy of my site worked, but the prod one does not. If you cannot open it by the link about in Safari, a workaround that works for me (but still slow) is to go to https://kizu.dev directly and then go to the article. Will investigate later again, but oh well. Sorry. As usual, the credits: - @argyleink, Jonathan Neal, Giorgio Pretto, Sebastian Malton & Oriol Brufau for CSSWG issues related to `sibling-index()` and `sibling-count()`. - @tabatkins & Benjamin De Cock for CSSWG issues related to `random()`. - Michal Čaplygin for an issue about tree-counting functions in Open Props. - @heydon, @leaverou & @me for Quantity Queries. - @leaverou and Alex Walker for the articles on cicada principle. - @kevinpowell for his talk at CSS day. [1/2] New post: “Captured Custom Properties”. https://blog.kizu.dev/captured-custom-properties/ In a few of my latest #CSS experiments and articles, I used one naming pattern for registered custom properties that I think worth highlighting in a separate blog post. This pattern allows us to create a set of generic custom properties, covering a wide set of use cases for computing and storing their values. As usual, credits: - @5t3ph for her article about @property. My new post: “Querying the Color Scheme”. https://blog.kizu.dev/querying-the-color-scheme/ Media queries are nice, but for many things, we don’t even need them: there is this great #CSS property `color-scheme`, which allows us to make various things adapt to the current color scheme. We can even set it on a per-element basis. This post describes how we can use registered custom properties and style queries to read the current value of a `light-dark()` color for styling any non-color properties as well.
Show previous comments
@kizu I feel the same way about the linked issue proposing to change how `prefers-color-scheme` to work. I think I’d have to rewrite some of my CSS mental models if that were to change. Seems less harmful to either use the style query approach you’ve demonstrated or for that to develop into its own specific query. Also, seems like style query support for at least some non-custom properties worth revisiting.  @kizu ha, i was working on a post about color-scheme too. this just means i have to write fewer things 😁 and totally agreed on the media queries behavior: media queries should reflect the user's preference, not the author's (even if that's set in HTML). https://front-end.social/@mayank/112763009752291121  @kizu oooh I love your new (?) aside components! have you talked about those already? New post: “Cap-Height Vertical Align”. https://blog.kizu.dev/cap-height-align/ The new year is here, and, with it, a season where people put out their CSS wishlists for the future. One thing caught my attention in @tylersticka’s list: an ability to vertically align to the middle of the font’s cap-height. I am thrilled to report that there are at least two relatively ok workarounds available in the most recent browsers, courtesy of the new `cap` unit!
Show previous comments
 (oops, forgot to put hashtags for the post's announcement: #CSS and #Typography — here you go!) For years, what I was mindlessly doing instead: applying a negative margin with “random” values of 0.2em-0.3em for cases like this, which, coincidentally, almost the same! Intuitively, and by testing, I was pleased with these values all this time, but having a proper method on one hand, and a confirmation that this type of adjustment results in what the fallback ends up being in the end is nice, haha. Last boost: oh, I just thought that to work around the adblock-blocking, something in Firefox or the uBlock Origin was just slow, but that is, in fact, just an added timeout for 5s just for Firefox on YouTube. Good job, Google! I've recently started to listen to the Internet History Podcast (thanks, @Schepp for the recommendation), and oh how similar these tactics are to what MS did employ in the 90s. Don't be evil — be chaotic evil, I guess. |
Gregory's Server
Credits, as usual:
- @mia (front-end.social!)
- @anze3db (fedidevs!)
- @joerocca (followers by instance!)
- @cheeaun (Phanpy!)
- @tapbots (Ivory!)
- @elk (Elk!)
- @aardrian (“My Approach to Alt Text”)
- @FediTips (Tips!)