Gregory's Server
|
4 years after Deno 1.0, the next generation of JavaScript is ready for production at scale. Deno 2 is out today 📣 PSA: `CSSNestedDeclarations` is coming to browsers to improve #CSS Nesting! With this addition, declarations that come after style rules no longer shift up, among other improvements. 📝 https://web.dev/blog/css-nesting-cssnesteddeclarations Available in Chrome 130 + Firefox 132 + Safari Technology Preview 204. Lunchtime, why not watch some videos from State of the Browser 2024 @tylergaw RE: https://tylergaw.com/blog/view-transition-at-rule/ Technically speaking the switch from the meta tag to the at-rule opt-in is not a breaking change because the meta tag (which was always described as a temporary thing) never shipped to stable. It is expected from experimental features that they will change over time, until we (as in: the CSSWG) settle on a syntax that is acceptable to all vendors and is one that meets developer’s needs. @tylergaw As for the `chrome://flags#view-transition` flag no longer being availble: because Same-Document View Transitions have shipped to stable a long time ago, the feature flag is no longer relevant and was therefore removed. You can expect the `chrome://flags#view-transition-on-navigation` flag to also disappear over time, as engineering cleans up code that is no longer necessary. @bramus Oh wow, I didn't put two and two together that the at-role was a replacement for the meta tag, gonna update the post with that. tyty Yeah, I understand the process. "breaking change" was just a bit more concise than; "if you're also a big nerd that's using very wip specs, your stuff no longer works and you need to update it for it to work" @bramus I'm not related to Trello but would you share what this is about since it's pregnant not just affecting Trello? @bramus I really appreciate the effort y’all are making to get the word out about this If you are using `::selection` styles on your website, be sure to read this post. https://developer.chrome.com/blog/selection-styling Easiest way to understand the change is to try the included demo (which I provided) in Chrome 131 and compare that to the old situation. The gist is that: 1. Highlight Styles now inherit _regular_ CSS properties through the pseudo highlight chain, rather than the element chain. This means you can set `main::selection` to set highlight styles for `main` + all its descendants. Before it was only `main` that would get the styles. What happens when companies pay to fund web platform features? The whole web community wins. The latest from Igalia & Bloomberg: Inheritance changes for CSS selection styling JUST ANNOUNCED at BlinkOn 19: Google is launching The Collective to Support Chromium—a place for organizations (including Google) to pool money and responsibility, housed at the Linux Foundation, that will be used to pay independent Chromium contributors. Formal announcement to come soon. 📣 PSA: `CSSNestedDeclarations` is coming to browsers to improve #CSS Nesting! With this addition, declarations that come after style rules no longer shift up, among other improvements. 📝 https://web.dev/blog/css-nesting-cssnesteddeclarations Available in Chrome 130 + Firefox 132 + Safari Technology Preview 204. Wow, look at this AMAZING Scroll-Driven Animations demo by Paul Noble! https://codepen.io/paulnoble/pen/gOVPedz Go check it out (and hit the ❤️ icon). The first clever thing Paul is doing there is using an invisible scroller laid on top of the stack of cards. This scroller is used as the scroll-timeline for the .card-stack. @bramus Sadly it's only working in Chrome for me. Neither Firefox nor Safari seem to work. I’m having fun building this `CSSRule` debugger to show you what goes on behind the scenes of a CSS engine. https://codepen.io/bramus/full/JjgXWNJ Especially handy with `CSSNestedDeclarations` coming to the CSSOM in Chrome 130, Firefox 132, and (possibly) Safari 18.1.  @bramus Is there somewhere I can follow along with that? is CSSNestedDeclarations solely for that declaration-after-other-nesting situation? That specificity attribute, is that a you-think or is that also coming natively? 📝 Feature detect Style Queries Support in CSS. Awaiting browser support for `at-rule()`, here’s how you do it. Very interesting proposal for sharing a single #CSS stylesheet across multiple declarative shadow roots without a FOUC. https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md Overall, I'm on board with it sans some nitpicks I'll need to file issues about. I hope reusing templates is out of the initial scope though, as the current state of HTML modules makes me think it's a bit premature to be going that direction just yet. 👀 Chromium Bug 40211832 “Implement at-rule for use with @supports” Status: New → Assigned https://issues.chromium.org/issues/40211832 (This is great! See https://brm.us/at-rule why you need this) To measure this I built and open sourced the “CSS Selector Benchmark” project which I have been working on for some time now. https://github.com/GoogleChromeLabs/css-selector-benchmark The test suite is powered by Chromium’s PerfTestRunner and Puppeteer. ICYMI: Announcing BCD Watch - a way to keep track of new web development features and their browser support. (Thrilled to have spent a little bit of time doing a quick re-design for the launch). https://meyerweb.com/eric/thoughts/2024/09/23/announcing-bcd-watch/ Progressive Enhancement is the best. After adding a PE-capable feature like View Transitions all you have to do is sit back & relax while other browsers add support for it. And once they do, all their users automatically get the enhanced experience. What's not to like?! 🤩  @bramus I had an impression today that auto View Transitions implementations are still not ready. I opened my website in Safari TP, and it was blinking weirdly during the transition. Not very usable, I’d say. Then I tried to compare it with how smoothly it works in Chrome, but it only worked in one of five navigations. Thankfully, not getting in the way of normal navigation. I guess it’s hard to do it right, and it will take some time to debug it. "I wasted a day on CSS selector performance to make a website load 2ms faster" by @trys https://www.trysmudford.com/blog/i-spent-a-day-making-the-website-go-2ms-faster/ This is one of the unfortunate things about the DevTools' "selector stats." It can really mislead you if you don't notice the text "(slow)" which _really_ means slow. @nolan I think the confusion comes from the expectations set by of all other performance profiling tools. We're used to Lighthouse and WPT being 'slow', but we know we can trust all their tables and graphs to be time-accurate. This particular flavour of 'slow' needs a big ol' tooltip warning you which results are and aren't affected by the enforced slowness. Totally loving the “scroll” badges Available in Chrome 130 which goes stable mid October. https://developer.chrome.com/blog/new-in-devtools-130#scroll-badge This is very helpful when debugging Scroll-Driven Animations, as `scroll()` and friends by default look up the nearest ancestor scroller which you might have inadvertently created by using `overflow: hidden` somewhere. |
@bkardell @cdub
Mosaic, Netscape ?
@bkardell @cdub this is like saying "The ground will outlast any car we develop to drive on it."
@bkardell @cdub I started designing Web pages for government Websites using HTML 1 in 1995 for Mosaic and later Netscape.