{"id":4032,"date":"2026-08-02T04:05:06","date_gmt":"2026-08-02T04:05:06","guid":{"rendered":"https:\/\/tucumandevelopers.com\/index.php\/2026\/08\/02\/whats-important-16-sibling-index-animations-use-cases-for-the-infinity-keyword-container-stuck-queries-and-more\/"},"modified":"2026-08-02T04:05:06","modified_gmt":"2026-08-02T04:05:06","slug":"whats-important-16-sibling-index-animations-use-cases-for-the-infinity-keyword-container-stuck-queries-and-more","status":"publish","type":"post","link":"https:\/\/tucumandevelopers.com\/index.php\/2026\/08\/02\/whats-important-16-sibling-index-animations-use-cases-for-the-infinity-keyword-container-stuck-queries-and-more\/","title":{"rendered":"What\u2019s !important #16: sibling-index() Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More"},"content":{"rendered":"<div>\n<div>\u2014 Lea Verou, PhD (<a href=\"https:\/\/bsky.app\/profile\/did:plc:eagnfcoqnbtzpkglrtej6ayg?ref_src=embed\" rel=\"nofollow noopener\">@lea.verou.me<\/a>) <a href=\"https:\/\/bsky.app\/profile\/did:plc:eagnfcoqnbtzpkglrtej6ayg\/post\/3mqrg5oqix22h?ref_src=embed\" rel=\"nofollow noopener\">15:12 \u00b7 Jul 16, 2026<\/a><\/p><\/blockquote>\n<p>What do you think? Make sure to read the comments!<\/p>\n<h2 id=\"3-ways-to-animate-handdrawn-text\">3 ways to animate hand-drawn text<\/h2>\n<p>Johannes Bechberger showcased <a href=\"https:\/\/mostlynerdless.de\/blog\/2026\/07\/17\/animating-text-as-handrawn-with-css\/\" rel=\"nofollow noopener\">three ways to animate hand-drawn text<\/a>. SVG scares the heck out of me to be honest, but Johannes cuts right to chase in the code comments.<\/p>\n<figure><video height=\"852\" width=\"1256\" autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2026\/07\/CleanShot-2026-07-31-at-06.07.11.mp4\" playsinline=\"\"><\/video><figcaption>Source: <a href=\"https:\/\/mostlynerdless.de\/blog\/2026\/07\/17\/animating-text-as-handrawn-with-css\/\" rel=\"nofollow noopener\">Mostly Nerdless<\/a>.<\/figcaption><\/figure>\n<h2 id=\"an-introduction-to-container-stuck-queries\">An introduction to container \u2018stuck\u2019 queries<\/h2>\n<p>Chris Coyier demonstrated <a href=\"https:\/\/master.dev\/blog\/lessons-learned-rewriting-a-sticky-detector\/\" rel=\"nofollow noopener\">how to query whether an element is stuck using container scroll state queries<\/a> (more specifically, using <code>@container scroll-state(stuck: &lt;keyword&gt;)<\/code>). This is one of those new container queries; although, neither Safari nor Firefox supports it yet.<\/p>\n<h2 id=\"new-web-platform-updates-and-features\">New web platform updates and features<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Firefox\/Releases\/153\" rel=\"nofollow noopener\">Firefox 153<\/a>\n<ul>\n<li>A number of interoperability improvements<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Picture-in-Picture_API\" rel=\"nofollow noopener\">Picture-in-Picture API<\/a> (now Baseline)<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/developer.chrome.com\/release-notes\/151\" rel=\"nofollow noopener\">Chrome 151<\/a>\n<ul>\n<li><a href=\"https:\/\/developer.chrome.com\/blog\/usermedia-html-element\" rel=\"nofollow noopener\"><code>&lt;usermedia&gt;<\/code><\/a> (no Safari or Firefox support)<\/li>\n<li>A whole bunch of interoperability improvements too<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Want to see something weird? <a href=\"https:\/\/chromestatus.com\/roadmap\" rel=\"nofollow noopener\">Chrome\u2019s roadmap<\/a> appears to be scheduled up for the next 14 years, stopping right after Chrome 499 specifically.<\/p>\n<p>We\u2019ll be on <strong>What\u2019s !important #354<\/strong> by then!<\/p>\n<figure><\/figure>\n<p>Anyway, until next time (<strong>What\u2019s !important #17<\/strong>).<\/p>\n<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Fuente: <a href=\"https:\/\/css-tricks.com\/whats-important-16\/\">Art\u00edculo original<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u2014 Lea Verou, PhD (@lea.verou.me) 15:12 \u00b7 Jul 16, 2026 What do you think? Make sure to read the comments! 3 ways to animate hand-drawn text Johannes Bechberger showcased three ways to animate hand-drawn text. SVG scares the heck out of me to be honest, but Johannes cuts right to chase in the code comments. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2648,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[42],"tags":[],"class_list":["post-4032","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-csstricks"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts\/4032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/comments?post=4032"}],"version-history":[{"count":0,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts\/4032\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/media\/2648"}],"wp:attachment":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/media?parent=4032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/categories?post=4032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/tags?post=4032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}