2026-05-25T20:31:35Z https://yabu.me CSS-Tricks https://yabu.me/npub1j5z0f8ur6vg3duvp2q396w8gzry6wm3t5560wpz0neay2wkxuucqhluqw3 https://files.mastodon.social/accounts/avatars/109/513/383/818/775/271/original/1817991c31c535d0.png https://files.mastodon.social/accounts/avatars/109/513/383/818/775/271/original/1817991c31c535d0.png https://yabu.me/nevent1qqs9tj2sfayre4ehqg08aw5vy6k7fzszxu2ugx4fa2jnyuq2a6gx9aczyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnq7d47ln Select multiple dates on a calendar where the :nth-child()&#39;s “n of selector” syntax does all the heavy lifting. Perfect example of CSS and JS working together in harmony.<br/><br/><a href="https://css-tricks.com/selecting-a-date-range-in-css/">https://css-tricks.com/selecting-a-date-range-in-css/</a><br/><video controls width="100%" class="max-h-[90vh] bg-neutral-300 dark:bg-zinc-700"><source src="https://files.mastodon.social/media_attachments/files/116/375/088/395/163/332/original/e5d5c9ae63ea5505.mp4"></video><br/> 2026-04-09T13:57:30Z https://yabu.me/nevent1qqsqudeuasufpz9zp7eud3lu3vln6cueu6drs8d2nfpa6mrvf9upzxgzyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnql6dmv5 So, corner-shape can be animated. Notice the added sprinkle of color-contrast().<br/><video controls width="100%" class="max-h-[90vh] bg-neutral-300 dark:bg-zinc-700"><source src="https://files.mastodon.social/media_attachments/files/116/284/574/902/031/256/original/a3434b22c863569f.mp4"></video><br/> 2026-03-24T14:17:37Z https://yabu.me/nevent1qqs9329zc555fvewcr6jf3rzmegjzc9kueyr969pl5p8le5a99cl80czyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnqvluyfr Here&#39;s a math-y way to approximate the contrast-color() function from <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1rvxpg3efynsurr4ye2zceu7axtph729s53rwnf4ax5mftqx9lw8s8luqye" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Kevin Hamer</span> (<span class="italic">npub1rvx…uqye</span>)</a></span> while we&#39;re waiting on full support.<br/><br/><a href="https://css-tricks.com/approximating-contrast-color-with-other-css-features/">https://css-tricks.com/approximating-contrast-color-with-other-css-features/</a> 2026-02-11T15:01:12Z https://yabu.me/nevent1qqs93pk4wzl9z7sg5mgn4kqk84g986vwra06ztffukdmnf9ljdc6eeczyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnq8rr32x Masonry Layout is Now grid-lanes<br/><br/><a href="https://css-tricks.com/masonry-layout-is-now-grid-lanes/">https://css-tricks.com/masonry-layout-is-now-grid-lanes/</a> 2025-12-19T16:08:31Z https://yabu.me/nevent1qqsx6tx33gpr6w3rmft9vdrd6n7lqp0as6ffzsldcrk873vevppgl3czyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnqvvndqw Making a Masonry Layout That Works Today by Zell Liew<br/><br/><a href="https://css-tricks.com/making-a-masonry-layout-that-works-today/">https://css-tricks.com/making-a-masonry-layout-that-works-today/</a> 2025-07-28T12:42:17Z https://yabu.me/nevent1qqst2msz7e42xfqjr2e3e7ardqkqxzhv2ccksk24j2tjeafts92qcyqzyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnq0u7tl4 It&#39;s incredibly tough to find a CMS for static sites that is geared for non-techies, but <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1ffzfh32ddl4sryau0pslyrklgjhn0hgzc482vpzyxrjsvnfqcyrqu2uj38" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Ryan Trimble</span> (<span class="italic">npub1ffz…uj38</span>)</a></span> found one he&#39;s pretty stoked about.<br/><br/><a href="https://css-tricks.com/using-pages-cms-for-static-site-content-management/">https://css-tricks.com/using-pages-cms-for-static-site-content-management/</a> 2025-05-12T12:42:11Z https://yabu.me/nevent1qqs9djw06ma2r3rlvrudkzg84wz7cxamedyrzfgwgw2lnyrjr2989tqzyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnqx857xw The article revisiting image maps that you didn&#39;t know you needed, courtesy of <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub12mrwretzgk2qn886j0pupgrkyasmvetgc77etzjccxy22kgtgylszyugzq" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Andy Clarke</span> (<span class="italic">npub12mr…ugzq</span>)</a></span>.<br/><br/><a href="https://css-tricks.com/revisiting-image-maps/">https://css-tricks.com/revisiting-image-maps/</a> 2025-04-30T12:12:46Z https://yabu.me/nevent1qqsql6hmcd6e57uwemcfc24p6ghm0kxefcelcyh9ymg6rl9tfz004qszyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnqsqjqaz Blackle Mori shows a few of the hacks from Cohost.org before the community shut down for good. Use these if you dare, lest you too get labelled a CSS criminal.<br/><br/><a href="https://css-tricks.com/the-lost-css-tricks-of-cohost-org/">https://css-tricks.com/the-lost-css-tricks-of-cohost-org/</a> 2025-04-24T12:49:43Z https://yabu.me/nevent1qqsd0cu9ctj02r8vnrwe3x574d2g3ansk7vzldnw2lr26rumqa4u2gszyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnq8dqpne Now that we&#39;re 5+ years into &lt;details&gt;, we know more about it than ever before. I thought I&#39;d round that information up so it&#39;s in one place I can reference in the future without having to search the site — and other sites — to find it.<br/><br/><a href="https://css-tricks.com/using-styling-the-details-element/">https://css-tricks.com/using-styling-the-details-element/</a> 2025-02-26T16:07:15Z https://yabu.me/nevent1qqsxxz8979597sumxt6cgjep7ughyf7336ww4s3a8a6eaeh4j6q0suczyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnqnns4pc In reply to <a href='/nevent1qqswt43dyceqq5tu6g43fn99qw2gn64hftvl8wa6rnfllgvk3283eqs3qzvh2'>nevent1q…zvh2</a><br/>_________________________<br/><br/>Jake, we should work on an article together! 2024-11-04T15:06:20Z https://yabu.me/nevent1qqsz3vlwm096khepr9kk86dcce4wemftdqqv8nxyv7whftf3qkx5myszyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnqekayft A good deal of thorough and practical ways to use CSS light-dark() instead of preference queries brought to you by <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1jpylcq5e6mdcn7pdqq4ayknszevr9yakqrm8f2gvt0675w3rsdwql7yfwv" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Sara Joy :happy_pepper:</span> (<span class="italic">npub1jpy…yfwv</span>)</a></span><br/><br/><a href="https://css-tricks.com/come-to-the-light-dark-side/">https://css-tricks.com/come-to-the-light-dark-side/</a> 2024-10-25T14:08:21Z https://yabu.me/nevent1qqsd0mvg3lqufkugsckdtq7r9shvgsszfn9p28mh22aj9y9wrmk9gtszyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnq36vs6r Lovely reminder from <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1x595mggkh492xtl25nfk5j4xnd2yuscfgmp2n7s6csanxsn99vlq5egect" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Terence Eden</span> (<span class="italic">npub1x59…gect</span>)</a></span> that text wrapping works for more than text headings. <a href="https://css-tricks.com/you-can-use-text-wrap-balance-on-icons/">https://css-tricks.com/you-can-use-text-wrap-balance-on-icons/</a> 2024-10-24T14:05:57Z https://yabu.me/nevent1qqsztsq0ta7xj3cl7zs8j9kxs2rux49jlhmjtlq7ple5u9tqs72966qzyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnq5wupv2 Hey <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1szda4djvv7w77kk8s3nfcwm3dx5ktej4mk96qpx7z7ng34yax6nssp5a79" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Mia (web luddite)</span> (<span class="italic">npub1szd…5a79</span>)</a></span>, thanks for inspiring me to revisit thoughts on content architecture! Always good to come back to that so often for a personal &#34;reset&#34;. <a href="https://css-tricks.com/aggregating-my-distributed-self/">https://css-tricks.com/aggregating-my-distributed-self/</a> 2024-09-27T15:24:08Z https://yabu.me/nevent1qqsyam8lfndvq2l65rxljuxlu8kte5072vt9cmkta8lmrz8ewpcqm3gzyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnqq7x34c I truly hope the only takeaway someone gets from all of the data <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub18vj5j3srdwcf6chq6akn29lky5y2e246f30zucdu50gwkxdkrwkqk4g4zy" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Eric</span> (<span class="italic">npub18vj…g4zy</span>)</a></span> produced here is TO USE SEMANTICS ANCHORS OVER DIVS. Wonderful work, as always. <br/><br/><a href="https://css-tricks.com/basic-keyboard-shortcut-support-for-focused-links/">https://css-tricks.com/basic-keyboard-shortcut-support-for-focused-links/</a> 2024-08-23T13:16:23Z https://yabu.me/nevent1qqsxyu22yh4geenrcqxve4kehfu59v7kgyp7aq7s0eleh8ur08t504gzyz2sfayls0f3z9h3s9gzyhfcaqgvnfmw9wjnfacyf70853f6cmnnqle9whx Welp, the cat&#39;s out of the bag...<br/><br/><a href="https://css-tricks.com/css-chronicles-xlii/">https://css-tricks.com/css-chronicles-xlii/</a> 2024-08-09T15:32:11Z