Gregory's Server
|
We implemented a new value for `background-clip` called `border-area`. It lets you use CSS fill a border with a background image or gradient. This article explains how it works, and shows up the possibilities in 7 demos.
Show previous comments
 @jensimmons I saw this come up on the WebKit RSS feed earlier - great article! The examples and the way you progressively explain each property are really helpful in understanding how to use it! @jensimmons I don't agree that the default should be `background-origin: border-box`. If you are using regular borders, you want the background to fit the padding box to avoid extra cropping. As of Chrome 131 you have more options to style `<details>` and `<summary>`. You can now use the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses. Hopefully other browsers will implement these changes as well soon too, because these additions have been long overdue. 😊 @bramus While nowhere as fancy as your details demo, I did something clever with details that I have never seen before. I am building a file browser. It works surprisingly well. (codepen was my raw POC) https://codepen.io/joeworkman/pen/RwXdbGQ/c0348fa2d91df1e62d7f31297c67c9bf?editors=1100 A while ago @paul_irish and I tweaked the Chrome DevTools Performance Timeline to make it more easy for you to spot + debug non-composited animations. - Non-composited animations are marked with red triangles @paul_irish Most common reason why an animation can’t be composited is that you are animating a property that cannot be composited (such as `height`, or a custom property), but there are also other reasons such as using an `animation-composition` that is not `replace`. Available from Chrome 131 onwards. Chicago Kare by Duane King A Faithful Reproduction of the Bitmap Version of the Chicago Typeface Created by Susan Kare for Apple Computer in 1984. @codepen @chriscoyier FYI: There is no currency mentioned on the CodePen receipts. This info – along with the already mentioned amount + description – is required for such a receipt to be a legal proof of payment. Supercharge Web UX with View Transitions (2024.10.18 @ React Brussels) > Slides + recording of the talk “Supercharge Web UX with View Transitions” I gave at @BrusselsReact 2024 https://www.bram.us/2024/11/17/supercharge-web-ux-with-view-transitions-react-brussels/  Finally more options for styling the `<details>` element, for example, to animate its opening. @bramus's article has all the details: https://developer.chrome.com/blog/styling-details. 🪗  @tomayac @bramus I was just updating the summary page on MDN today with a styling example: https://github.com/mdn/content/pull/36691 guess we'll need to update it again ;) Vacation Responder: ON. See y’all in a week from now 👋 #GoneDiving (To those interested: I’m doing a liveaboard in Egypt with Emperor Divers. The itinerary includes Brother Islands, Daedalus Reef, Elphinstone, and a bunch of reefs in between) ✨ New post “Baseline status of a web platform feature on a Hugo website” https://pawelgrzybek.com/baseline-status-of-a-web-platform-feature-on-a-hugo-website/ Inspired by @stefan @swithinbank and @developers work recently announced by @rachelandrew For years, I've been hoping for more of the paged media specifications to come to browsers. In the next version of Chrome (131, now in beta) the ability to create your own header and footer content for printed content is here! Find out more in this post.  @rachelandrew Thank you for the useful post. I'm looking forward to know more about the overflow handling of margin boxes and the print media styles cascade relations.  @rachelandrew I love & sympathise with the tip about using the bug tracker in the article. Open source lyfe.  @dbushell I’ve been enjoying your writing a lot for the last few months, so let me return the favor with my own CSS catch-up writing I did a few months ago :blob_cat_peek: https://thomasorus.com/new-css-that-can-actually-be-used-in-2024.html 👀 Crbug 40211832 – “Implement at-rule for use with @supports.” This is going to make CSS feature detection so much easier! 🤩 🎉 See https://brm.us/at-rule for details on what it is and how to use. (The CL landed in main and should be in tomorrow’s Chrome Canary build. You need to enable the Experimental Web Platform features flag to try it) @bramus 🎉 I’ve been waiting for this one to start landing in browsers for a while. Very excited to have it soon(ish)  ⚒ New Engineering blog post on scroll badge! Have you ever spent ages trying to figure out which element is actually scrolling on a page? #ChromeDevTools added a new scroll badge to help you spot them easier! In this blog post, Ionuț and I will walk us through the feature and the technical implementation behind the scenes. 📜 https://developer.chrome.com/blog/swe-devtools-scroll-badge When one of the PMs plans a meeting to discuss 2025 roadmapping with you, and you prepare a two-page doc with things you want to see get added to the web platform … Looking at this GIF on The Big Screen™ I now notice the raccoon ain’t exactly smiling … looks like he’s up to something bad. Yikes! Let me assure you though: I am smiling 🤩 (Also: _what does_ a smiling raccoon look like? 🦝) @dietrich Bug Report: I'm seeing `undefined` as the URL in the most recent @intenttoship posts. @bramus @dietrich @intenttoship Yeah, for Blink-related ItS, as I noted here: Looking at the source on GitHub, it looks like it's using @tomayac 's blog as the source? But it's probably outdated. And the instance of Mastodon that it uses is going to close too 😞 I published a new version of my experimental Chrome Dark Mode Toggle extension. On top of a per-origin override, you can now set a Chrome-wide preference to have your OS in Dark Mode but all sites in Light Mode (or vice versa). Sites can also request an override, thanks to the Web Preferences API. See https://brm.us/chrome-dark-mode-toggle for more details. If you would like to have this UA-wide dark/light mode preference (that is independent of the system setting) built into Chrome itself, go give https://issues.chromium.org/issues/40116544 an upvote by hitting the star icon in the top right corner. |
