Blogger

by: Daniel Schwarz Tue, 16 Dec 2025 17:03:46 +0000 Welcome to the first ever What’s !important, a roundup of the best CSS and web development news from the last two weeks. If you’re pressed for time (who isn’t?) or you just can’t stand missing out on anything CSS-related, this is the place to recap: the best CSS/web dev articles from around the web, interesting announcements and quick-read links that we shared, the best of what Chrome, Firefox, and Safari have recently shipped, and more, probably. Let’s dig in! HTMHell Advent Calendar 2025 Manuel Matuzović has created this pretty hellish (all in good fun) HTMHell Advent Calendar 2025 made up of 24 HTML-focused articles — basically, there’s one every day until Christmas Day. Obviously, we’re already 16 fantastic articles in, so you’re in for a real treat with 8 more articles to come. The highlight for me so far is the article on Invoker Commands, which as of this week are supported in all web browsers, so it’s a double win! WebKit flags ::target-text WebKit did a little write-up on ::target-text. And I’m glad they did because I had never heard of it, even though Sunkanmi has an excellent write-up on it here at CSS-Tricks as well. Target text is the text that search engines sometimes highlight when taking you to a web page, but we can actually highlight text ourselves when sending links to other people. ::target-text selects this text so that we can style it, and it’s supported by all web browsers — who knew? Stop using JavaScript to solve CSS problems Chizaram Ken walks us through the latest CSS tricks that we can perform to reduce our reliance on JavaScript, and why we’d want to do that. With CSS growing faster than it’s ever grown before, I think we’ll be seeing a lot more of these articles. We have granular control over hyphenation @eva.town over at Bluesky said that it’d be nice to be able to set hyphenation rules preventing words like “lighter” from hyphenating as “light-er” — but @knowler.dev pointed out that we can, sort of. The hyphenate-limit-chars property (still waiting for Safari support) enables us to specify the preferred minimum number of characters on either side of the hyphen, which is good enough, I suppose? Which color format should we be using? @nadyavoynich.com asked this question, but honestly I still don’t know. Some very good points were made about human-readable formats and color depth, and I’ve kind of settled on oklch(). But some UI design tools don’t even support HSL, so? CSS Wrapped 2025 and State of HTML 2025 It’s that time of the year. We’ve had Spotify’s Wrapped, PlayStation’s Wrap-Up, Duolingo’s Year-in-Review — now it’s time for CSS Wrapped 2025, all of the latest and greatest things that Chrome did with CSS (and HTML) this year, and State of HTML 2025, which is about HTML in general. Cool conversations, fun demos, and new browser features In case you missed any of our Quick Hits, here are the latest CSS/web dev announcements and links that we’ve shared: This Bluesky post by @heyo53 got us thinking about whether it’s okay to style scrollbars (since people rarely interact with them physically these days, I personally just use scrollbar-width: none) Bramus put together a demo visualizing the different values for position-area and explained how to handle inside corners Finally, our top picks for the best CSS and HTML features shipped by web browsers in the last couple of weeks: Chrome 143 Anchored container queries, which I briefly talked about in an article on container queries Firefox 146 contrast-color(), which ensures optimal color contrast between two colors (or at least it will once it leverages CSS Color 6) text-decoration-inset, which enables control over the position and size of text decorations @scope, which makes defining new CSS scoping contexts a baseline feature (this, frankly, is the highlight of my year) @custom-media, which is basically custom properties but for media queries, is being trialed Safari 26.2 random() generates a random number in CSS, but unfortunately it’s not supported anywhere else yet. sibling-index() and sibling-count() get the position and number of siblings respectively (we’re only waiting for Firefox support now). field-sizing enables adaptive sizing for input fields (again, hurry up Firefox). command and commandfor, now baseline and my pick for best HTML feature of the year, are HTML attributes for invoking certain JavaScript events declaratively. hidden=until-found, also baseline now, for hiding elements until found by find-in-page. Also, we’ve never been able to set cursor on pseudo-elements such as ::before and ::after, but thankfully we can now! Remember, you can catch us again in two weeks — happy holidays! What’s !important #1: Advent Calendars, CSS Wrapped, Web Platform Updates, and More originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

by: Sourav Rudra Tue, 16 Dec 2025 16:40:07 +0530 Proposed legislation would make it illegal to use VPNs for accessing geo-blocked content.

by: Neville Ondara Tue, 16 Dec 2025 15:27:52 +0530 Classic Linux tools are always there, but eBPF is the natural upgrade as it looks directly in the kernel. Once you start using these tools, it’s hard to imagine managing Linux systems without them.

by: Chris Coyier Mon, 15 Dec 2025 18:00:51 +0000 This is an appreciation post for the Cloud Four Blog. It’s one of those must-subscribes. I find myself adding almost every post they put out to my archive of posts to dig into. So since I’m overflowing with them a bit, and there is a hot-off-the-presses one, I figured I’d share that and a bunch of favorites. In Responsive Letter Spacing, Tyler Sticka covers a scenario where you want to tighten up letter-spacing, but be smart about it. At big font sizes, some tightening looks good (I put it on my own starter) but at smaller font sizes, it harms readability. Using em is a good start as it scales with the font size automatically, but then it’s better to reduce it as it gets smaller. Fortunately Tyler found a great way to do it with clamp(). * { letter-spacing: clamp( -0.05em, calc((1em - 1rem) / -10), 0em ); } Great minds think alike as I was thinking about the UI/UX pattern of one-time password inputs lately too. Tyler again here tackles it his own way in Simple One-Time Passcode Inputs. We agree: don’t actually make it multiple <input /> elements, as tempting as that is from a styling perspective. There is simply too much JavaScript required to make that work nicely (which can easily break down) and you otherwise get for free if you don’t do that. Instead, use the proper set of attributes on an input for it: <input type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6"> Then just style it with CSS to make it look however you want. That is, apply the input mask with styles alone. I was just bemoaning the loss of JPEG XL the other day, but in On Container Queries, Responsive Images, and JPEG-XL a couple years back, Jason Grigsby was already in grief. Container Queries, one of the great CSS revelations of our time, is spiritually connected to responsive images in that they want to do the most-appropriate thing with the information available on how they are displayed on the page. You’d think they would get along and share information, but you’d be wrong. We could evolve the syntaxes to help, and probably should, but it’s intereseting that JPEG-XL, and image format, was actually somewhat designed to help with this and would have been a serendipitous gift for web developers, if we actually were able to use it. Speaking of images, I think we all know we’re not really supposed to be using GIF anymore as the performance sucks and we can replicate it with video. I tend to like the video approach, but there are significant drawbacks to be aware of: Tyler looked at alternatives and there are some really strong contenders in the form of newfangled image formats. But (surprise surprise) the browser support story is dicey. Gerardo Rodriguez talks about Testing HTML Light DOM Web Components: Easier Than Expected! Good to know, really. Testing here meaning load up the component in a browser-like environment and make sure what you expect to be there in the DOM is there and interacting with it does what you expect. It’s not like you can’t test Web Components that use the Shadow DOM, but in practice it’s an annoying barrier that you have to manually account for in many places, and other tools need to be aware of and work with as well. Nice to have so uch example code here to reference. OK fine one more. This is a nice demo of a common web app interaction. It’s a good reminder that we really need to implement “bulk actions” in more places on CodePen properly.

by: Geoff Graham Mon, 15 Dec 2025 17:55:55 +0000 Andy Clarke with a brand-new resource. It generates the sort of fun typography that Andy commonly uses in his own work that’s geared towards cartoon headings. There are a number of configurable options for font, color, stroke, letter spacing, and shadows. And it spits out the CSS for you to copy-paste. What if you want to individually style each letter? Well, there’s no such thing as :nth-letter in CSS at the moment. There are, however, tools that will wrap each character in a separate <span>, the most tradition one being SplitText.js. But Andy decided to make a tool for that — called Splinter.js — as well because he saw opportunities to enhance the accessibility of the generated markup to help prevent some assistive tech from choking on the spans. (GSAP’s version also does a good job of this.) Som instead of: <h2> <span>H</span> <span>u</span> <span>m</span> <!-- etc. --> </h2> …we get ARIA-spiced markup: <h2 data-split="toon" aria-label="Hum Sweet Hum"> <span class="toon-char" aria-hidden="true">H</span> <span class="toon-char" aria-hidden="true">u</span> <span class="toon-char" aria-hidden="true">m</span> </h2> And it supports line breaks! Toon Title Text Generator originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

by: Sourav Rudra Mon, 15 Dec 2025 22:27:43 +0530 Snapscope makes it easy to scan any Snap package for security issues.

by: Temani Afif Mon, 15 Dec 2025 16:19:23 +0000 A list of rounded images that slightly overlap each other is a classic web design pattern. You are for sure wondering what the novelty we are bringing here is, right? It has been done countless times. You are right. The main idea is not complex, but the new thing is the responsive part. We will see how to dynamically adjust the overlap between the images so they can fit inside their container. And we will make some cool animations for it along the way! Here is a demo of what we are creating. You can resize the window and hover the images to see how they behave. And yes, the gap between the images is transparent! The following demo is currently limited to Chrome and Edge, but will work in other browsers as the sibling-index() and sibling-count() functions gain broader support. You can track Firefox support in Ticket #1953973 and WebKit’s position in Issue #471. CodePen Embed Fallback We’ll get even deeper into things in a second article. For now, let’s re-create this demo! Responsive List of Avatars Using Modern CSS Horizontal Lists (You are here!) Circular Lists (Coming this week) The initial setup We start with the HTML, which is a set of image elements in a parent container: <div class="container"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <!-- etc. --> </div> Declaring flexbox on the container is all we need to line the images up in a single row: .container { display: flex; } We can make the images circles with border-radius and squish them close together with a little negative margin: .container img { border-radius: 50%; margin-right: -20px; } .container img:last-child { margin: 0; } Nothing fancy so far. I am using an arbitrary value for the margin to create an overlap: CodePen Embed Fallback The cut-out effect We’ll need the mask property to cut the images and create the transparent gap between them. Making the gap transparent is very important here as it makes the component look better — but it’s also more challenging to code since the cut-out needs to consider the next (or previous) element in a way that prevents one image from obscuring the other. mask: radial-gradient(50% 50% at calc(150% - 20px), #0000 100%, #000); This mask creates a circular shape with the same dimensions as one of the images — a radius equal to 50% in both directions — and its center point will be the midpoint of the next element (calc(150% - 20px)). Without the overlap, the center of the next element is at 50% (center of the actual element) + 100%. But due to the overlap, the next image is closer, so we reduce the distance by 20px, which is the value used by the margin. This cut the image from the right side. If we want the cut-out on the left side, we move the circle in the other direction: 50% - 100% + 20px. Drag the slider in the next demo for a visualization of how this works in both directions. I am removing the border-radius from the center image to illustrate the circular shape. CodePen Embed Fallback We apply this to all the images, and we are good to go. Notice that I am using a couple of CSS variables to control the image size and gap between the images. .container { --s: 120px; /* image size*/ --g: 10px; /* the gap */ display: flex; } .container img { width: var(--s); border-radius: 50%; margin-right: -20px; /* Cut-out on the right side */ mask: radial-gradient(50% 50% at calc(150% - 20px), #0000 calc(100% + var(--g)),#000); } /* Cut-out on the left side */ .container.reverse img { mask: radial-gradient(50% 50% at calc(-50% + 20px), #0000 calc(100% + var(--g)),#000); } .container img:last-child { margin: 0; } .container.reverse img:first-child, .container:not(.reverse) img:last-child { mask: none; } Pay additional attention to the .reverse class. It switches the direction of the cut-out from right (the default) to left instead. CodePen Embed Fallback What we have is already good. It works fine and you can use it, but it could be more interactive. The overlap look nice but wouldn’t be better if we could enlarge it on smaller screens to help conserve space, or perhaps even remove it altogether on larger screens where there’s plenty of room to show the full images? Let’s make this more interactive and responsive. The responsive part Let’s imagine the total size of the images exceeds the size of the .container. That results in an overflow, so we need to assign a negative margin to each image to absorb that space and ensure all the images fit in the container. It looks like we need some JavaScript to calculate the excess of space and then divide it by the number of images to get the margin value. And probably put this logic inside a resize listener in case the container change its size. I am kidding, of course! We can solve this using modern CSS that is small and maintainable. If we were to express what we need mathematically, the formula of the margin should be equal to: margin-right: (size_of_container - N x size_of_image)/(N - 1); …where N is the number of images, and we are dividing by N - 1 because the last image doesn’t need a margin. We already have a variable for the image size (--s) and we know that the width of the container is 100%: margin-right: (100% - N x var(--s))/(N - 1); What need to solve for is N, the number of images. We could use a rigid magic number here, say 10, but what if we want fewer or more images in the container? We’d have to update the CSS each time. We want a solution that adapts to whatever number of images we throw at it. That’s where the new sibling-count() function comes in real handy. It’s going to be the best approach moving forward since it automatically calculates the number of child elements within the container. So, if there are 10 images in the .container, the sibling-count() is 10. margin-right: calc((100% - sibling-count() * var(--s))/(sibling-count() - 1)); Resize the container in the demo below and see how the images behave. Again, sibling-count() support is limited at the moment, but you can check it out in the latest Chrome or Safari Technology Preview. CodePen Embed Fallback It’s quite good! The images automatically adjust to fit in the container, but we can still improve this slightly. When the container size is large enough, the calculated value of margin will be positive and we get big spaces between the images. You probably want to keep that behavior, but in my case, I want the image to remain as close as possible. To do this, we can set a maximum boundary to the margin value and make sure it doesn’t get any bigger than 0: margin-right: min((100% - sibling-count() * var(--s))/(sibling-count() - 1), 0px); We can also re-use the the gap variable (--g) to maintain a space between items: margin-right: min((100% - sibling-count() * var(--s))/(sibling-count() - 1), var(--g)); If you’re wondering why I am using the min() function to define a max boundary, read this for a detailed explanation. In short: you’re effectively setting a maximum with min() and a minimum with max(). The responsive part is perfect now!! CodePen Embed Fallback What we’re missing is the cut-out effect we made with mask. For that, we can re-use the same margin value inside the mask. CodePen Embed Fallback Oops, the images disappeared! We have the same code as the previous section, but instead of the arbitrary 20px value, we used the last formula. .container img { --_m: min((100% - sibling-count() * var(--s))/(sibling-count() - 1), var(--g)); margin-right: var(--_m); mask: radial-gradient(50% 50% at calc(150% + var(--_m)), #0000 calc(100% + var(--g)),#000); } Can you guess what the issue is? Think a moment about it because it’s something you may face in other situations. It’s related to percentages. With margin, the percentage refers to the container size, but inside mask, it considers another reference, which means the values aren’t equal. We need to retrieve the container size differently, using container query units instead. First, we register the .container as a CSS “container”: .container { container-type: inline-size; } Then, we can say that the container’s width is 100cqi (or 100cqw) instead of 100%, which fixes the layout issue: CodePen Embed Fallback Tada! The position and the mask adjust perfectly when the container is resized. The animation part The idea of the animation is to fully reveal an image on hover if there is an overlap between items, like this: How do we remove the overlap? All we do is update the variable (--_m) we defined earlier to zero when an image is hovered: .container img:hover { --_m: 0px; } That takes out the margin and removes the cut-out effect as well. We actually might want a little bit of margin between images, so let’s make --_m equal to the gap (--g) instead: .container img:hover { --_m: var(--g); } CodePen Embed Fallback Not bad! But we can do better. Notice how pushing one image away from another causes an image at the end to overflow the container. The bottom list (the row with the cut-out on the left) is not as good as the top list because the mask is a bit off on hover. Let’s first fix the mask before tackling the overflow. The issue is that I am using margin-right for the spacing while the cut-out effect is on the left. It works fine when we don’t need any animation but as you can see, it’s not quite good in the last demo. We need switch to a margin-left instead on the bottom row. In other words, we use margin-right when the cut-out is on the right, and margin-left when the cut-out is on the left. .container:not(.reverse) img { mask: radial-gradient(50% 50% at calc(150% + var(--_m)), #0000 calc(100% + var(--g)), #000); margin-right: var(--_m); } .container.reverse img { mask: radial-gradient(50% 50% at calc(-50% - var(--_m)), #0000 calc(100% + var(--g)), #000); margin-left: var(--_m); } .container:not(.reverse) img:last-child, .container.reverse img:first-child { mask: none; margin: 0; } Great, now the cut-out effect is much better and respects both the left and right sides: CodePen Embed Fallback Let’s fix the overflow now. Remember the previous formula where we split the excess of space across N - 1 elements? (size_of_container - N x size_of_image)/(N - 1) Now we need to exclude one more element in the equation, which means we replace the N with N - 1 and replace the N - 1 with N - 2: (size_of_container - (N - 1) x size_of_image)/(N - 2) However, that extra excluded element still takes up space inside the container. We need to account for its size and subtract it from the container size: ((size_of_container - (size_of_image + gap)) - (N - 1) x size_of_image)/(N - 2) I am considering the size plus a gap because a margin that is equal to the gap is set on a hovered image, which is additional spacing we need to remove. We simplify a bit: (size_of_container - gap - N x size_of_image)/(N - 2) We know how to translate this into CSS, but where should we apply it? It should be applied on all the images when one image is hovered (except the hovered image). This is a great opportunity to write a fancy selector using :has() and :not()! /* Select images that are not hovered when the container contains a hovered image */ .container:has(:hover) img:not(:hover) { /**/ } And we plug the formula into that: .container:has(:hover) img:not(:hover) { --_m: min((100cqw - var(--g) - sibling-count()*var(--s))/(sibling-count() - 2), var(--g)); } CodePen Embed Fallback Check that out — no more overflow on hover in both directions! All we are missing now is the actual animation that smoothly transitions the spacing rather than snapping things into place. All we need is to add a little transition on the --_m variable: transition: --_m .3s linear; If we do that, however, the transition doesn’t happen. It’s because CSS doesn’t recognize the calculated value as a proper CSS length unit. For that, we need to formally register --_m as a custom property using the @property at-rule: @property --_m { syntax: "<length>"; inherits: true; initial-value: 0px } There we go: CodePen Embed Fallback Cool, right? Having a smooth change for the mask and the position is quite satisfying. We still need to fix a small edge case. The last element in the top list and the first one in the bottom list don’t have any margin, and they are always fully visible, so we need to exclude them from the effect. When hovering them, nothing should happen, so we can adjust the previous selector like below: .container:not(.reverse):has(:not(:last-child):hover) img:not(:hover), .container.reverse:has(:not(:first-child):hover) img:not(:hover) { --_m: min((100cqw - var(--g) - sibling-count()*var(--s))/(sibling-count() - 2),var(--g)); } Instead of simply checking if the container has a hovered element, we restrict the selection to the elements that are not :last-child for the first list and not :first-child for the second list. Another cool selector using modern CSS! Here is the final demo with all the adjustments made: CodePen Embed Fallback Conclusion I hope you enjoyed this little exploration of some modern CSS features. We re-created a classic component, but the real goal was to learn a few CSS tricks and rely on new features that you will definitely need in other situations. In the next article, we’ll add more complexity and cover even more modern CSS for an even more satisfying pattern! Stay tuned. Responsive List of Avatars Using Modern CSS Horizontal Lists (You are here!) Circular Lists (Coming this week) Responsive List of Avatars Using Modern CSS (Part 1) originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

by: Abhishek Prakash Mon, 15 Dec 2025 18:17:21 +0530 Over the span of the past 15 years, Ubuntu started several projects. Not all of them are active today. And yet, they live in our memory.

by: Sourav Rudra Mon, 15 Dec 2025 12:20:21 +0530 New policy targets low-quality AI-generated code while still allowing AI as a learning tool.

by: Roland Taylor Mon, 15 Dec 2025 10:22:39 +0530 If you recognized yourself in a few of these points, that doesn’t mean Linux isn’t for you. In fact, you can count it as an invitation. It just means you’ve spent a long time in an ecosystem that treats you more like a product than a participant.

by: Theena Kumaragurunathan Sun, 14 Dec 2025 09:17:30 +0530 A moderation system that leans on automation just knocked legitimate tech tutorials and even entire channels offline. The appeals felt automated, too. Creators are powerless against opaque enforcement and the incentives that should favor craft and trust are tilting toward noise.

by: Roland Taylor Sat, 13 Dec 2025 09:27:34 +0530 NTFSPlus is a fresh implementation of the classic in-kernel ntfs driver. Can it end the current NTFS woes for Linux users?

by: Daniel Schwarz Fri, 12 Dec 2025 14:38:18 +0000 I’ll admit, when container queries first shipped back in 2022, I didn’t really pay attention. I mean, why container size queries when we already have media queries? Why container style queries when custom properties inherit anyway (they don’t work with standard properties… yet)? Their use cases seemed like edge cases to me, enabling us to do things that we could already do but in a different way. Here’s a container size queries demo by Kevin Powell. As a note, all major browsers support size queries in the following demo, but other demos in this article may require the latest Chrome. CodePen Embed Fallback Container style queries (with the new range syntax) demo by, uh, me: CodePen Embed Fallback And more recently, we’ve seen a couple more types of container queries pop up. Container Scroll-State Queries Container scroll-state queries came along with their unique capabilities — the ability to find out whether a container is scrollable, or is scroll-snapped to a scroll target, or has position: sticky and is ‘stuck.’ Literally, as I’m writing this, Chrome announced scrolled support, which is a bit different to scrollable. Container scroll-state queries demo by our very own Geoff Graham: CodePen Embed Fallback And that’s not all we’ve got… Anchored container queries The latest container query feature is anchored container queries, which enable us to query fallback positions. Imagine that you anchor-position a tooltip caret to the left side of a tooltip, but then there’s no room to display the tooltip, so you flip it to the opposite side of whatever triggers it using position-try-fallbacks: flip-inline. Well, an anchored container query can detect when the tooltip position is flipped so that we can also flip the tooltip caret to the opposite side of the tooltip. CodePen Embed Fallback What else? So, it got me thinking, how far can we really go with container queries? There are dozens of media queries now, so what if there were dozens of container queries as well? What could we use them for? Get any computed value Recently I was exploring the current and future methods of getting the value of a CSS property and using it with another property, and as you can imagine, container size queries were mentioned since they unlock container query units. I mean, have you ever added a wrapper element or defined an existing one as a container just to access container query units? <parent> { /* Gimme container query units! */ container-type: inline-size; <child> { width: 100cqi; } } Now, I don’t love container queries as a means of getting values because the syntax can be a bit long-winded for that (longer than the example above, and size queries in particular are a bit quirky), but the fact that we can use them to do a little more than querying is testament to how versatile they are as a feature. As an alternative, I suggested a CSS function called compute(), where if you wanted the height of something (or the “something” of anything), we could steal it from another element like this: <parent> { <child> { /* Computed height of <child> */ property: compute(height, self); /* Computed height of the parent */ property: compute(height, inherit); /* Computed height of #abc element */ property: compute(height, #abc); } } This would save us from having to implement a container size query just to use its container query units, and would also apply to all properties. Besides, a container size query wouldn’t help us to acquire the un-computed declared value that we actually typed out. For that, the inherit() function has been proposed and Roma even shows us how to use it in Chrome Canary. To add, I really like the keyword approach and would love to see more keywords like currentColor (e.g., currentBackgroundColor has been proposed). Still, if container queries could be extended to get the value of any CSS property, I definitely wouldn’t say no to that! The flexibility to pass properties/values between elements is way too enticing. Query any CSS property This feature has actually been on the slate since container style queries were first proposed, but there’s no telling when it will arrive. This container style query upgrade will enable us to query the (un-computed/declared) value of any CSS property instead of just custom properties (although you won’t be able to ‘get’ and use those values, at least as far as I know). Any CSS property? Uh, doesn’t that make all of the other container queries redundant? Not quite, no. Container scroll-state queries detect snapping and stickiness, for which there are no pseudo-classes — but maybe there should be? They also detect scrollability, since, for example, overflow: scroll and overflow: visible doesn’t mean that the content is actually overflowing, only that we’re allowed to scroll the container if it does. Finally, anchored container queries don’t query the position-try-fallbacks value, they detect when, for example, the position-area is flipped. So, you know, they do a whole bunch of stuff, and that’s why this upgrade for container style queries won’t replace them. In fact, I can totally see dozens of new container query features hitting the web within the next few years. So, what else could container queries do? Before container queries were even a thing, great ideas were being put forward. Of course, some of them actually became container queries whereas others are still just that — great ideas that haven’t gone anywhere (again…yet?). Adam Argyle suggested some interesting things that would later become scroll-state queries, in addition to being able to query whether something’s on-screen, wrapping, or ellipsing, which I’d love to see. Adam also suggested being able to count child nodes, an idea that later became sibling-count() and sibling-index(), although I’d still like to see the container query approach. In a similar vein, Matthew Dean pointed out that some container queries could instead or also be pseudo-classes, which I agree with. Matthew also suggested that container queries could be used to query whether a flex container is wrapped, and which row/column of a flexbox/grid container we’re in. I’m confident that we’ll see these ideas realized at some point, either as container queries or as some other syntax. Heck, since it’s December, I’ll make it my prediction for 2026: container queries will rule 2026. What else do you want container queries to do? References Learn container queries with interactive examples (Ahmad Shadeed) Detect fallback positions with anchored container queries from Chrome 143 (Una Kravets) Play With Inherit Function (Roma Komarov) On Inheriting and Sharing Property Values (Daniel Schwarz) Browser support for current and future container queries (CanIUse) What Else Could Container Queries… Query? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

by: Sourav Rudra Fri, 12 Dec 2025 19:42:52 +0530 After years of development, System76's Rust-based desktop delivers.

by: Abhishek Prakash Fri, 12 Dec 2025 16:31:28 +0530 I have been exploring the options to offer replayable playgrounds to complement the text and video learning resources. Is this something you would be interested in? Personally, I prefer trying things on my own machine but these playgrounds also help a learner jump straight into a pre-configured environment to focus on a specific task. Let me know what you think of it.       This post is for subscribers only Subscribe now Already have an account? Sign in