|
16 posts total
 New blog post: “Splash Colour Mixin” https://blog.kizu.dev/splash-colour-mixin/ Two days ago, I published a new article. In that article, I presented a way to prototype native #CSS mixins with what we have in CSS today. Three days ago, Lu Wilson published an experimental colour format: Splash. When I read about it, I immediately saw what I’d want to do with it: prototype a mixin. @nicolaschevobbe BTW, a tiny bug report: when there is not enough vertical space, it does not overflow well :D I wrote a new article: “Indirect Cyclic Conditions: Prototyping Parametrized CSS Mixins” https://kizu.dev/indirect-cyclic-conditions/ In my quest to push forward what is possible with custom properties in #CSS, I discovered another application of cyclic dependencies. Combined with a prior technique based on custom cascade layers, we are now even closer to something that resembles native CSS mixins. 
Show previous comments
@kizu Thanks! What a xmas gift! Looking forward to explore your techniques in the coming days. ”Please do not apply this technique in production“ – well… we'll see about that 😅   @kizu Okay I had to read the examples a couple times but now I understand it (the quote from the spec helped — who'd have thought! :D). This is really, really clever, and interesting. Thank you for sharing, and happy holidays! It is fun when some browsers style things differently based on the presence of an HTML comment between two text nodes.  @kizu Ooohhh, that's interesting (/worrisome). What specifically are we talking about? Different whitespace collapsing or text wrapping? Or are some browsers treating the text nodes on either side as separate objects for flex/grid layout on the parent? @kizu another fun fact, chrome styles <h1> smaller when it is inside an <article>, <section>, <aside>, or <nav>. Love to have the daily notes in Obsidian, where I can write shitposts that no one will ever read. If I will ever start a newsletter, I will deliberately add typos, mistakes, blunders, and so on. If you can’t edit something — embrace it. 🎂 🎉 Happy birthday CSS!! On December 17, 1996, @w3c published the first standard for #CSS, and issued a press release entitled "CSS1 offers fast, easy way to manage web site look and feel", with quotes from @timbl @bert and Håkon Lie 🎁 Today's a great day to catch up on 12 Days of Web! The first 3 posts are available. I won't spoil topics, but many good tidings to the authors: If you love logic and did not yet play Baba is You (@BabaIsYou, https://hempuli.itch.io/baba, also available in other places like app store, steam, switch, etc.), I cannot recommend it enough. One of the best puzzle games ever. Literally, my favorite game. Solving the levels in it is probably the closest feeling I had to me discovering new CSS techniques and interactions. If you are keen to learn how to think out of the box, this is THE game to play. It can be very difficult, but 100% worth it.  it IS one of the best games out there. If not THE best puzzle game. Clean, pure, simple and has depth. 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
Mentioned in the post:
- @TodePond (Splash!)
- @leaverou (contrast-color!)
- Oriol Brufau (`round()`!)
- @mia and @OddBird (mixins! sponsor them!)
@kizu
Made two attempts at okclh.
First one: this has no greys, but gradients be pretty. Though lacks colors like bright yellow.
https://codepen.io/Merri/pen/PwYKzpr
Second one: here the closer each number is to being the same then the resulting color is more grey.
https://codepen.io/Merri/pen/WbeExdr
Code is messy, logic is probably bonkers, but at least selection of colors is nice.