{"id":10619,"date":"2026-08-06T17:41:54","date_gmt":"2026-08-06T22:41:54","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10619"},"modified":"2026-08-06T17:41:55","modified_gmt":"2026-08-06T22:41:55","slug":"random-post-button-followup","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/random-post-button-followup\/","title":{"rendered":"Random Post Button Followup"},"content":{"rendered":"\n

I had fun with the post about making a link to a random post in just HTML\/CSS<\/a> the other day. But I was almost certainly over-thinking it on the original<\/a>. Using random()<\/code> was kind of the point, so we can stick with that. <\/p>\n\n\n\n

    \n
  1. One alternative is to think uni-directionally<\/a>. Making it both rows and columns isn’t necessary out the gate. You can get vertical slices with flexbox easily, which is just as random really, and likely gives you a few hundred random posts as they can get down to 1px in width.<\/li>\n\n\n\n
  2. An even simpler idea is to have all the links be in a “stack” and random()<\/code>-ly show just one. See here<\/a> where each refresh shows a different link. That buys you essentially infinite space.<\/li>\n\n\n\n
  3. Some person<\/a> (no byline) that uses the stack technique, but uses an animation<\/code> to determine which one is on top rather than random()<\/code>. Better support.<\/li>\n\n\n\n
  4. Kilian said<\/a> he’d also stack links, but use an if()<\/code> function to only show<\/em> one of them. That’s kinda what Alex Riviere tried<\/a>, but it turns out style queries don’t work with random()<\/code><\/a> (???).
    <\/a>

    <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    I had fun with the post about making a link to a random post in just HTML\/CSS the other day. But I was almost certainly over-thinking it on the original. Using random() was kind of the point, so we can stick with that.<\/p>\n","protected":false},"author":1,"featured_media":10624,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[29],"tags":[93,7,31,388],"class_list":["post-10619","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-buttons","tag-css","tag-html","tag-random"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/08\/pexels-photo-37586395.jpeg?fit=975%2C1300&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/comments?post=10619"}],"version-history":[{"count":3,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10619\/revisions"}],"predecessor-version":[{"id":10623,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10619\/revisions\/10623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media\/10624"}],"wp:attachment":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media?parent=10619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/categories?post=10619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/tags?post=10619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}