Best of Google ChromeSeptember 2024

  1. 1
    Article
    Avatar of csstipCSS Tip·2y

    Animate to height/width auto (without hacks)

    Learn how to smoothly transition to `height: auto` using just three lines of code. The key is the `interpolate-size: allow-keywords` property. Compatible with the latest version of Chrome.

  2. 2
    Article
    Avatar of bramBram.us·2y

    Animate to height: auto; (and other intrinsic sizing keywords) in CSS

    Chrome 129 introduces the `interpolate-size` property and `calc-size()` function, allowing smooth transitions and animations from lengths to intrinsic sizing keywords like `height: auto`, `min-content`, and `max-content`. Adding `interpolate-size: allow-keywords;` to your stylesheet enables these animations.

  3. 3
    Article
    Avatar of hnHacker News·2y

    The best browser bookmarking system is already built-in

    The best bookmarking system is built into browsers like Firefox and Chrome using simple file shortcuts. You can drag-and-drop URLs to create .url files, then manage them like regular files—copying, moving, renaming, and organizing them in folders. This system also facilitates easy syncing, searching, tagging, and cross-browser use without the need for extensions.

  4. 4
    Article
    Avatar of csstipCSS Tip·2y

    Progress element with a tooltip

    Learn how to add a tooltip to the native progress element in HTML, with everything controlled by the 'max' and 'value' attributes. This technique leverages scroll-driven animations, anchor positioning, and the @property attribute, and is currently a Chrome-only experiment.

  5. 5
    Article
    Avatar of css_tricksCSS-Tricks·2y

    Anchor Positioning Quirks

    Anchor positioning is a new CSS feature that brings new dynamics in positioning absolute elements, accompanied by quirks and potential bugs. It introduces concepts like the inset-modified containing block (IMCB) and properties such as position-area and position-try-fallbacks. Despite fast browser adoption, some discrepancies between the specification and implementations persist. The feature also calls for attention to accessibility considerations when linking elements semantically and visually.

  6. 6
    Article
    Avatar of khouloudhaddadamamou4433Java Stack Ninjas·2y

    Building Progressive Web Apps (PWAs) in 2024: What’s New?

    In 2024, Progressive Web Apps (PWAs) have significantly improved with better OS integration, push notifications on iOS, advanced capabilities with Fugu APIs, faster and easier installation processes, and enhanced offline performance. Additionally, updates in the Web App Manifest support custom theming and multi-screen handling, while the TWA framework integrates PWAs into the Google Play Store. Performance has been boosted with HTTP/3, and accessibility and internationalization are better than ever. Moreover, AI and machine learning integration are now possible with WebAssembly and WebGPU support.

  7. 7
    Article
    Avatar of lobstersLobsters·2y

    Antonymph

    Experience a fun audiovisual display set to Vylet Pony's 'Antonymph' song, optimized for use on Chrome, Firefox, and Safari. Best viewed on a 1080p screen with 100% scaling. Contains intense visuals that may cause issues on slower computers.