 📝 New blog post: “Experiment: Automatically trigger a View Transition when a JavaScript Property of an Element changes.” In this post I trick a MutationObserver into observing changes to IDL attributes by syncing the IDL attributes to their Content Attribute counterparts. Did you know it's called the View Transition API (and not the View Transitions API [plural])? Now MDN knows too (https://github.com/mdn/content/issues/37265) so there's no reason to keep using the wrong name. Learn about this and other VT misconceptions in this post: https://developer.chrome.com/blog/view-transitions-misconceptions To be clear: it's only when talking about the API when you should be using the singular form. It's still perfectly fine to say things like “The site uses View Transitions” or “The View Transitions specification”. The Future of CSS: Construct <custom-ident> and <dashed-ident> values with ident() > Uniquely name a bunch elements in CSS in one go! Instead of assigning 100 unique names through 100 declarations, write only 1 and use ident() to construct the names.  @bramus Very much in support of this! I can definitely see uses for this. Question: would this be usable for building URLs that for example use an attribute or a variable? (`background: url(ident("/files/icon/" attr(data-icon) ".svg#hue=" var(--hue, 0)))` (crappy example but I think you get the idea!) I know it's been discussed in the past (perhaps with a new function? I don't recall), and I know that a URL is not an ident, but just feels like they share a similar goal of constructing strings. Safari Technology Preview 210 has some nice features: - `::details-content` (see https://developer.chrome.com/blog/styling-details) - Preview support for Scroll-Driven Animations (see https://scroll-driven-animations.style/) This is only a personal selection. Full changelog: https://webkit.org/blog/16406/release-notes-for-safari-technology-preview-210/ 🔥 Remember Internet Explorer’s Page Transitions? THEY’RE BACK BABY! 👾 Demo: https://ie-page-transitions.netlify.app/ To configure these, use the meta tags from the olden days + load up the library. Works in IE 5.5–7.0, Chrome 126+, and Safari 18.2 (buggy).
Show previous comments
Re-imagine the web with View Transitions > Video from Chrome’s 2024 EOY campaign, highlighting View Transitions. https://www.bram.us/2024/12/16/re-imagine-the-web-with-view-transitions/ @annevk and I worked on a refined proposal to untie scoped element registry from shadow DOM so that you can use a scoped registry without shadow DOM. Your feedback is appreciated:
Show previous comments
 NPM Package of the day: `is-even-ai` > Check if a number is even using the power of ✨AI✨. https://www.npmjs.com/package/is-even-ai 😂 🤣
Show previous comments
 ```ts 
Show previous comments
  Released an improved version that uses the built-in browser dialog.showModal() method - it's just 4.47KB now, 1.1KB minified and gzipped https://github.com/simonw/prompts-js/releases/tag/0.0.3 Spot Non-Composited Animations in Chrome DevTools > The animations track of a performance trace can now tell you if and why an animation was not composited. https://www.bram.us/2024/12/10/spot-non-composited-animations-in-chrome-devtools/ 🗒️ I spent most of November playing with CSS Anchor positioning, here's what happened: https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/ CSS Wrapped 2024 is here! Just like last year, we – the Chrome DevRel team – have published CSS Wrapped, our end of year overview covering many of the new #CSS and Web UI features that landed in Chrome and The Web Platform in 2024. 👉 https://chrome.dev/css-wrapped-2024/ is the place to be! Yesterday we made some limited super early bird tickets available to previous attendees, and they sold out in record time! 😲🙌😊 Regular early bird tickets for Pixel Pioneers Bristol (20 June) are now publicly available: https://pixelpioneers.co/events/bristol-2025#tickets Massive thanks to everyone who has bought a ticket so far, it makes a big difference! 🙏   On day 4 @bramus shows us how to control the viewport resize behavior on mobile. #HTMHellAdventCalendar On day 5 @CSSence teaches us about the positive affects of using semantic HTML on forced colors mode. Frontend News #10 Featuring @jensimmons, @vueschool_io, @hypeddev, @dbushell, @bramus Thanks to @vueschool_io for sponsoring. 🙏 Get your JavaScript Certification: https://cssw.io/javascript-certification-bf
Show previous comments
@Lee_Holmes 👆 this specific meme was spreading faast after the XZ backdoor scandal. I can't see it without thinking how much we deppend on "small" projects like that one anymore. This pic is the best representation of those cases definitely. Blew my mind. #linux #meme #freesoftware #foss #opensource #technology #hacking  @Lee_Holmes TBF, it's not *fully* thankless. I always make sure to properly reference and link it. 🤩 Web Animations Excitement! 🎉 🎉 `Animation.overallProgress` is coming! 🎉 🎉 With it, you can easily and consistently get an animation’s progress, regardless of the timeline being used. Here’s a demo that syncs a Scroll-Driven Animation’s progress to a 3D model’s rotation: https://codepen.io/bramus/full/xbKxRzy (Needs a browser with Scroll-Driven Animations support. Uses `Animation.progress` when available or falls back to some extra code to get the progress) Before this addition, you needed to extract the progress from the animation’s effect. Like so: ```js Ugh. One of the speakers for tonight's devs.gent meetup fell sick and had to cancel. Last-minute I took their place and gave a talk about animating accordions. Always fun talking to a local crowd. 🪗+🐷=🤩 📣 Start linting CSS with ESLint using the brand new eslint/css package! This is a very early edition so feedback is welcome. 🐣 |
Gregory's Server
