ActivityPub Viewer

A small tool to view real-world ActivityPub objects as JSON! Enter a URL or username from Mastodon or a similar service below, and we'll send a request with the right Accept header to the server to view the underlying object.

Open in browser →
{ "@context": [ "https://www.w3.org/ns/activitystreams", { "ostatus": "http://ostatus.org#", "atomUri": "ostatus:atomUri", "inReplyToAtomUri": "ostatus:inReplyToAtomUri", "conversation": "ostatus:conversation", "sensitive": "as:sensitive", "toot": "http://joinmastodon.org/ns#", "votersCount": "toot:votersCount", "blurhash": "toot:blurhash", "focalPoint": { "@container": "@list", "@id": "toot:focalPoint" }, "Hashtag": "as:Hashtag" } ], "id": "https://mastodon.social/users/csstricks/outbox?min_id=0&page=true", "type": "OrderedCollectionPage", "next": "https://mastodon.social/users/csstricks/outbox?max_id=109523939884018582&page=true", "prev": "https://mastodon.social/users/csstricks/outbox?min_id=109741125317877616&page=true", "partOf": "https://mastodon.social/users/csstricks/outbox", "orderedItems": [ { "id": "https://mastodon.social/users/csstricks/statuses/109741125317877616/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-23T23:31:22Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers", "https://mastodon.social/users/marcthiele" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109741125317877616", "type": "Note", "summary": null, "inReplyTo": "https://mastodon.social/users/marcthiele/statuses/109715060142321421", "published": "2023-01-23T23:31:22Z", "url": "https://mastodon.social/@csstricks/109741125317877616", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers", "https://mastodon.social/users/marcthiele" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109741125317877616", "inReplyToAtomUri": "https://mastodon.social/users/marcthiele/statuses/109715060142321421", "conversation": "tag:mastodon.social,2023-01-19:objectId=381622493:objectType=Conversation", "content": "<p><span class=\"h-card\" translate=\"no\"><a href=\"https://mastodon.social/@marcthiele\" class=\"u-url mention\">@<span>marcthiele</span></a></span> Yeah, having some verified indicator that&#39;s more clear in search would def be a good thing.</p>", "contentMap": { "en": "<p><span class=\"h-card\" translate=\"no\"><a href=\"https://mastodon.social/@marcthiele\" class=\"u-url mention\">@<span>marcthiele</span></a></span> Yeah, having some verified indicator that&#39;s more clear in search would def be a good thing.</p>" }, "attachment": [], "tag": [ { "type": "Mention", "href": "https://mastodon.social/users/marcthiele", "name": "@marcthiele" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109741125317877616/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109741125317877616/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109741125317877616/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109741125317877616/likes", "type": "Collection", "totalItems": 1 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109741125317877616/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109739265037400358/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-23T15:38:17Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109739265037400358", "type": "Note", "summary": null, "inReplyTo": null, "published": "2023-01-23T15:38:17Z", "url": "https://mastodon.social/@csstricks/109739265037400358", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109739265037400358", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2023-01-23:objectId=384271713:objectType=Conversation", "content": "<p>Using WebP Images <a href=\"https://css-tricks.com/using-webp-images/&quot;Using\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/using-webp-imag</span><span class=\"invisible\">es/&quot;Using</span></a> WebP Images&quot;</p><p>We’ve all been there before: You’re browsing a website that has a ton of huge images of delicious food, or maybe that new gadget you’ve been eyeballing. These images tug at your senses, and for content authors, they’re essential in moving people to do things. Except that these images are downright huge. Like really huge. […]</p><p>Read more: <a href=\"https://css-tricks.com/using-webp-images/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/using-webp-imag</span><span class=\"invisible\">es/</span></a></p><p><a href=\"https://mastodon.social/tags/images\" class=\"mention hashtag\" rel=\"tag\">#<span>images</span></a> <a href=\"https://mastodon.social/tags/performance\" class=\"mention hashtag\" rel=\"tag\">#<span>performance</span></a> <a href=\"https://mastodon.social/tags/picture\" class=\"mention hashtag\" rel=\"tag\">#<span>picture</span></a> <a href=\"https://mastodon.social/tags/webp\" class=\"mention hashtag\" rel=\"tag\">#<span>webp</span></a></p>", "contentMap": { "en": "<p>Using WebP Images <a href=\"https://css-tricks.com/using-webp-images/&quot;Using\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/using-webp-imag</span><span class=\"invisible\">es/&quot;Using</span></a> WebP Images&quot;</p><p>We’ve all been there before: You’re browsing a website that has a ton of huge images of delicious food, or maybe that new gadget you’ve been eyeballing. These images tug at your senses, and for content authors, they’re essential in moving people to do things. Except that these images are downright huge. Like really huge. […]</p><p>Read more: <a href=\"https://css-tricks.com/using-webp-images/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/using-webp-imag</span><span class=\"invisible\">es/</span></a></p><p><a href=\"https://mastodon.social/tags/images\" class=\"mention hashtag\" rel=\"tag\">#<span>images</span></a> <a href=\"https://mastodon.social/tags/performance\" class=\"mention hashtag\" rel=\"tag\">#<span>performance</span></a> <a href=\"https://mastodon.social/tags/picture\" class=\"mention hashtag\" rel=\"tag\">#<span>picture</span></a> <a href=\"https://mastodon.social/tags/webp\" class=\"mention hashtag\" rel=\"tag\">#<span>webp</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/739/264/624/521/123/original/62f7992fa90a7f19.png", "name": null, "blurhash": "U95rVZDTRR.OxrRnayt58zyAtPH]M#xrfjM~", "width": 1024, "height": 334 }, { "type": "Document", "mediaType": "image/jpeg", "url": "https://files.mastodon.social/media_attachments/files/109/739/264/708/723/662/original/a10ffa2bb5f9ec6e.jpg", "name": null, "blurhash": "UCKJ^jb;WBtys9nkjtr[0ge=fRV]Ioobazs*", "width": 770, "height": 216 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/739/264/819/566/678/original/3293e5260b34476d.png", "name": null, "blurhash": "U4T9IsDiIUR5IoD%IURj8wDiIUMxNwE1IoW;", "width": 714, "height": 443 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/739/264/979/909/700/original/13e7af0a105fa324.png", "name": null, "blurhash": "UHPZr%M{IUM{%MWBWBj[00a|WBWBj[ofayay", "width": 1024, "height": 624 } ], "tag": [ { "type": "Hashtag", "href": "https://mastodon.social/tags/images", "name": "#images" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/performance", "name": "#performance" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/picture", "name": "#picture" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/webp", "name": "#webp" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109739265037400358/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109739265037400358/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109739265037400358/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109739265037400358/likes", "type": "Collection", "totalItems": 2 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109739265037400358/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109738834903667806/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-23T13:48:53Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109738834903667806", "type": "Note", "summary": null, "inReplyTo": null, "published": "2023-01-23T13:48:53Z", "url": "https://mastodon.social/@csstricks/109738834903667806", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109738834903667806", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2023-01-23:objectId=384215740:objectType=Conversation", "content": "<p>Getting Started With SvelteKit <a href=\"https://css-tricks.com/getting-started-with-sveltekit/&quot;Getting\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/getting-started</span><span class=\"invisible\">-with-sveltekit/&quot;Getting</span></a> Started With SvelteKit&quot;</p><p>SvelteKit is the latest of what I’d call next-gen application frameworks. It, of course, scaffolds an application for you, with the file-based routing, deployment, and server-side rendering that Next has done forever. But SvelteKit also supports nested layouts, server mutations that sync up the data on your page, and some other niceties we’ll get into. […]</p><p>Read more: <a href=\"https://css-tricks.com/getting-started-with-sveltekit/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/getting-started</span><span class=\"invisible\">-with-sveltekit/</span></a></p><p><a href=\"https://mastodon.social/tags/svelte\" class=\"mention hashtag\" rel=\"tag\">#<span>svelte</span></a> <a href=\"https://mastodon.social/tags/sveltekit\" class=\"mention hashtag\" rel=\"tag\">#<span>sveltekit</span></a></p>", "contentMap": { "en": "<p>Getting Started With SvelteKit <a href=\"https://css-tricks.com/getting-started-with-sveltekit/&quot;Getting\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/getting-started</span><span class=\"invisible\">-with-sveltekit/&quot;Getting</span></a> Started With SvelteKit&quot;</p><p>SvelteKit is the latest of what I’d call next-gen application frameworks. It, of course, scaffolds an application for you, with the file-based routing, deployment, and server-side rendering that Next has done forever. But SvelteKit also supports nested layouts, server mutations that sync up the data on your page, and some other niceties we’ll get into. […]</p><p>Read more: <a href=\"https://css-tricks.com/getting-started-with-sveltekit/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/getting-started</span><span class=\"invisible\">-with-sveltekit/</span></a></p><p><a href=\"https://mastodon.social/tags/svelte\" class=\"mention hashtag\" rel=\"tag\">#<span>svelte</span></a> <a href=\"https://mastodon.social/tags/sveltekit\" class=\"mention hashtag\" rel=\"tag\">#<span>sveltekit</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/738/834/480/712/729/original/62ff3509bd3ea508.png", "name": null, "blurhash": "USH_Jb9s1b^PAX-p=GJANae.%2M{M{flIoxa", "width": 1024, "height": 512 }, { "type": "Document", "mediaType": "image/jpeg", "url": "https://files.mastodon.social/media_attachments/files/109/738/834/584/531/768/original/e8c5a131bd0b8b52.jpg", "name": null, "blurhash": "U35;~.~q-oV?kCNGR*x[xbV[WCxut7RjRjof", "width": 956, "height": 858 }, { "type": "Document", "mediaType": "image/jpeg", "url": "https://files.mastodon.social/media_attachments/files/109/738/834/673/457/443/original/dc464272c5462a4c.jpg", "name": null, "blurhash": "U6Ss509FRjRj0K-;?bofNa_3^+t74n9FIURj", "width": 774, "height": 258 }, { "type": "Document", "mediaType": "image/jpeg", "url": "https://files.mastodon.social/media_attachments/files/109/738/834/837/928/425/original/b3758c645689f2ee.jpg", "name": null, "blurhash": "UFSs4|RiWBof9DjsofofRjxuxuoftTofofof", "width": 916, "height": 544 } ], "tag": [ { "type": "Hashtag", "href": "https://mastodon.social/tags/svelte", "name": "#svelte" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/sveltekit", "name": "#sveltekit" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109738834903667806/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109738834903667806/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109738834903667806/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109738834903667806/likes", "type": "Collection", "totalItems": 2 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109738834903667806/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109722262196579851/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-20T15:34:14Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109722262196579851", "type": "Note", "summary": null, "inReplyTo": null, "published": "2023-01-20T15:34:14Z", "url": "https://mastodon.social/@csstricks/109722262196579851", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109722262196579851", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2023-01-20:objectId=382466850:objectType=Conversation", "content": "<p>More Real-World Uses for :has() <a href=\"https://css-tricks.com/more-real-world-uses-for-has/&quot;More\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/more-real-world</span><span class=\"invisible\">-uses-for-has/&quot;More</span></a> Real-World Uses for :has()&quot;</p><p>The :has() pseudo-class is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took the State of CSS survey. The ability to write selectors upside down gives us more superpowers I’d never thought possible. I say “more superpowers” because there have already […]</p><p>Read more: <a href=\"https://css-tricks.com/more-real-world-uses-for-has/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/more-real-world</span><span class=\"invisible\">-uses-for-has/</span></a></p><p>#:has</p>", "contentMap": { "en": "<p>More Real-World Uses for :has() <a href=\"https://css-tricks.com/more-real-world-uses-for-has/&quot;More\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/more-real-world</span><span class=\"invisible\">-uses-for-has/&quot;More</span></a> Real-World Uses for :has()&quot;</p><p>The :has() pseudo-class is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took the State of CSS survey. The ability to write selectors upside down gives us more superpowers I’d never thought possible. I say “more superpowers” because there have already […]</p><p>Read more: <a href=\"https://css-tricks.com/more-real-world-uses-for-has/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/more-real-world</span><span class=\"invisible\">-uses-for-has/</span></a></p><p>#:has</p>" }, "attachment": [ { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/722/261/977/076/068/original/910db04aaf39b9b1.png", "name": null, "blurhash": "U25#kPo}4q+[~Sr=IXaf8ywb-:K60iN{$~oc", "width": 1024, "height": 512 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/722/262/120/283/667/original/bf7fc665d7a64e5c.png", "name": null, "blurhash": "UCRo?M0jKRt70h9$I]WCNHbIWDayZ}xB%1t7", "width": 1024, "height": 861 } ], "tag": [], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109722262196579851/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109722262196579851/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109722262196579851/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109722262196579851/likes", "type": "Collection", "totalItems": 1 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109722262196579851/shares", "type": "Collection", "totalItems": 1 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109710504590645626/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-18T13:44:07Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109710504590645626", "type": "Note", "summary": null, "inReplyTo": null, "published": "2023-01-18T13:44:07Z", "url": "https://mastodon.social/@csstricks/109710504590645626", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109710504590645626", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2023-01-18:objectId=381108590:objectType=Conversation", "content": "<p>Solved With :has(): Vertical Spacing in Long-Form Text <a href=\"https://css-tricks.com/solved-with-has-vertical-spacing-in-long-form-text/&quot;Solved\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/solved-with-has</span><span class=\"invisible\">-vertical-spacing-in-long-form-text/&quot;Solved</span></a> With :has(): Vertical Spacing in Long-Form Text&quot;</p><p>If you’ve ever worked on sites with lots of long-form text — especially CMS sites where people can enter screeds of text in a WYSIWYG editor — you’ve likely had to write CSS to manage the vertical spacing between different typographic elements, like headings, paragraphs, lists and so on. It’s surprisingly tricky to get this […]</p><p>Read more: <a href=\"https://css-tricks.com/solved-with-has-vertical-spacing-in-long-form-text/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/solved-with-has</span><span class=\"invisible\">-vertical-spacing-in-long-form-text/</span></a></p>", "contentMap": { "en": "<p>Solved With :has(): Vertical Spacing in Long-Form Text <a href=\"https://css-tricks.com/solved-with-has-vertical-spacing-in-long-form-text/&quot;Solved\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/solved-with-has</span><span class=\"invisible\">-vertical-spacing-in-long-form-text/&quot;Solved</span></a> With :has(): Vertical Spacing in Long-Form Text&quot;</p><p>If you’ve ever worked on sites with lots of long-form text — especially CMS sites where people can enter screeds of text in a WYSIWYG editor — you’ve likely had to write CSS to manage the vertical spacing between different typographic elements, like headings, paragraphs, lists and so on. It’s surprisingly tricky to get this […]</p><p>Read more: <a href=\"https://css-tricks.com/solved-with-has-vertical-spacing-in-long-form-text/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/solved-with-has</span><span class=\"invisible\">-vertical-spacing-in-long-form-text/</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/710/504/235/438/027/original/e9baaddb0be4bf0d.png", "name": null, "blurhash": "U6R:NX9F~8kX-:R-NG%0Vqt6E3Rk-;s+IVE4", "width": 1024, "height": 683 } ], "tag": [], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109710504590645626/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109710504590645626/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109710504590645626/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109710504590645626/likes", "type": "Collection", "totalItems": 2 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109710504590645626/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109705110496363624/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-17T14:52:20Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109705110496363624", "type": "Note", "summary": null, "inReplyTo": null, "published": "2023-01-17T14:52:20Z", "url": "https://mastodon.social/@csstricks/109705110496363624", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109705110496363624", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2023-01-17:objectId=380506070:objectType=Conversation", "content": "<p>Quick and Dirty Bootstrap Overrides at Runtime <a href=\"https://css-tricks.com/quick-and-dirty-bootstrap-overrides-at-runtime/&quot;Quick\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/quick-and-dirty</span><span class=\"invisible\">-bootstrap-overrides-at-runtime/&quot;Quick</span></a> and Dirty Bootstrap Overrides at Runtime&quot;</p><p>Bootstrap 5.2 shipped with solutions for the methods covered in this post. So, if you’re using Bootstrap 5.2 or newer, you should be able to tinker with CSS variables right out of the box for custom overrides. Oh, Bootstrap, that old standard web library that either you hate or you spend all your time defending […]</p><p>Read more: <a href=\"https://css-tricks.com/quick-and-dirty-bootstrap-overrides-at-runtime/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/quick-and-dirty</span><span class=\"invisible\">-bootstrap-overrides-at-runtime/</span></a></p><p><a href=\"https://mastodon.social/tags/bootstrap\" class=\"mention hashtag\" rel=\"tag\">#<span>bootstrap</span></a> <a href=\"https://mastodon.social/tags/cssvariables\" class=\"mention hashtag\" rel=\"tag\">#<span>cssvariables</span></a></p>", "contentMap": { "en": "<p>Quick and Dirty Bootstrap Overrides at Runtime <a href=\"https://css-tricks.com/quick-and-dirty-bootstrap-overrides-at-runtime/&quot;Quick\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/quick-and-dirty</span><span class=\"invisible\">-bootstrap-overrides-at-runtime/&quot;Quick</span></a> and Dirty Bootstrap Overrides at Runtime&quot;</p><p>Bootstrap 5.2 shipped with solutions for the methods covered in this post. So, if you’re using Bootstrap 5.2 or newer, you should be able to tinker with CSS variables right out of the box for custom overrides. Oh, Bootstrap, that old standard web library that either you hate or you spend all your time defending […]</p><p>Read more: <a href=\"https://css-tricks.com/quick-and-dirty-bootstrap-overrides-at-runtime/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/quick-and-dirty</span><span class=\"invisible\">-bootstrap-overrides-at-runtime/</span></a></p><p><a href=\"https://mastodon.social/tags/bootstrap\" class=\"mention hashtag\" rel=\"tag\">#<span>bootstrap</span></a> <a href=\"https://mastodon.social/tags/cssvariables\" class=\"mention hashtag\" rel=\"tag\">#<span>cssvariables</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/705/110/275/778/197/original/8faadcdc403b71b4.png", "name": null, "blurhash": "UNL;XDxa_Ixa-;j]WBj[.5WCV|j@-;jsf6ay", "width": 1024, "height": 512 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/705/110/434/861/988/original/a11bad40f07f092f.png", "name": null, "blurhash": "U36R7OngE1-=-pxaWCj[0eSOxaROEMIpn$xZ", "width": 1024, "height": 597 } ], "tag": [ { "type": "Hashtag", "href": "https://mastodon.social/tags/bootstrap", "name": "#bootstrap" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/cssvariables", "name": "#cssvariables" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109705110496363624/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109705110496363624/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109705110496363624/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109705110496363624/likes", "type": "Collection", "totalItems": 0 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109705110496363624/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109704940694099130/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-17T14:09:09Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109704940694099130", "type": "Note", "summary": null, "inReplyTo": null, "published": "2023-01-17T14:09:09Z", "url": "https://mastodon.social/@csstricks/109704940694099130", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109704940694099130", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2023-01-17:objectId=380483721:objectType=Conversation", "content": "<p>Hash Tag Links That Don’t Headbutt The Browser Window <a href=\"https://css-tricks.com/hash-tag-links-padding/&quot;Hash\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/hash-tag-links-</span><span class=\"invisible\">padding/&quot;Hash</span></a> Tag Links That Don’t Headbutt The Browser Window&quot;</p><p>Using hash-tag links with a fixed position header can be problematic, as the element may be hidden underneath the header as the browser will scroll until the element headbutts the top of browser viewport. There are a couple of ways we can fix this...</p><p>Read more: <a href=\"https://css-tricks.com/hash-tag-links-padding/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/hash-tag-links-</span><span class=\"invisible\">padding/</span></a></p>", "contentMap": { "en": "<p>Hash Tag Links That Don’t Headbutt The Browser Window <a href=\"https://css-tricks.com/hash-tag-links-padding/&quot;Hash\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/hash-tag-links-</span><span class=\"invisible\">padding/&quot;Hash</span></a> Tag Links That Don’t Headbutt The Browser Window&quot;</p><p>Using hash-tag links with a fixed position header can be problematic, as the element may be hidden underneath the header as the browser will scroll until the element headbutts the top of browser viewport. There are a couple of ways we can fix this...</p><p>Read more: <a href=\"https://css-tricks.com/hash-tag-links-padding/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/hash-tag-links-</span><span class=\"invisible\">padding/</span></a></p>" }, "attachment": [], "tag": [], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109704940694099130/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109704940694099130/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109704940694099130/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109704940694099130/likes", "type": "Collection", "totalItems": 1 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109704940694099130/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109704871242375825/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-17T13:51:29Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109704871242375825", "type": "Note", "summary": null, "inReplyTo": null, "published": "2023-01-17T13:51:29Z", "url": "https://mastodon.social/@csstricks/109704871242375825", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109704871242375825", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2023-01-17:objectId=380474520:objectType=Conversation", "content": "<p>6 Common SVG Fails (and How to Fix Them) <a href=\"https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/&quot;6\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/6-common-svg-fa</span><span class=\"invisible\">ils-and-how-to-fix-them/&quot;6</span></a> Common SVG Fails (and How to Fix Them)&quot;</p><p>Someone recently asked me how I approach debugging inline SVGs. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. And because of that, we have the ability to scope things out and uncover any potential issues or opportunities to optimize the SVG. But sometimes, we can’t even […]</p><p>Read more: <a href=\"https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/6-common-svg-fa</span><span class=\"invisible\">ils-and-how-to-fix-them/</span></a></p><p><a href=\"https://mastodon.social/tags/SVG\" class=\"mention hashtag\" rel=\"tag\">#<span>SVG</span></a></p>", "contentMap": { "en": "<p>6 Common SVG Fails (and How to Fix Them) <a href=\"https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/&quot;6\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/6-common-svg-fa</span><span class=\"invisible\">ils-and-how-to-fix-them/&quot;6</span></a> Common SVG Fails (and How to Fix Them)&quot;</p><p>Someone recently asked me how I approach debugging inline SVGs. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. And because of that, we have the ability to scope things out and uncover any potential issues or opportunities to optimize the SVG. But sometimes, we can’t even […]</p><p>Read more: <a href=\"https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/6-common-svg-fa</span><span class=\"invisible\">ils-and-how-to-fix-them/</span></a></p><p><a href=\"https://mastodon.social/tags/SVG\" class=\"mention hashtag\" rel=\"tag\">#<span>SVG</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/704/870/812/336/356/original/3b502bf9e5a2be39.png", "name": null, "blurhash": "UaHLl2IU00-;IUofxuWB4nxu?bIUxuWBM{t6", "width": 1024, "height": 799 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/704/870/979/887/217/original/c4ebdcd5ea116657.png", "name": null, "blurhash": "UrJRgc009F%MM{t7oyWB00-;%MRjj[f7f6fQ", "width": 1024, "height": 705 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/704/871/185/031/228/original/b507920d4cdda9da.png", "name": null, "blurhash": "UuJ*uB009F%MRjs:ofay4n%MxuRjayj[fQfP", "width": 1024, "height": 707 } ], "tag": [ { "type": "Hashtag", "href": "https://mastodon.social/tags/svg", "name": "#svg" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109704871242375825/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109704871242375825/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109704871242375825/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109704871242375825/likes", "type": "Collection", "totalItems": 0 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109704871242375825/shares", "type": "Collection", "totalItems": 1 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109676717376853035/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-12T14:31:35Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109676717376853035", "type": "Note", "summary": null, "inReplyTo": null, "published": "2023-01-12T14:31:35Z", "url": "https://mastodon.social/@csstricks/109676717376853035", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109676717376853035", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2023-01-12:objectId=377404181:objectType=Conversation", "content": "<p>CSS Infinite Slider Flipping Through Polaroid Images <a href=\"https://css-tricks.com/css-infinite-slider-flipping-through-polaroid-images/&quot;CSS\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/css-infinite-sl</span><span class=\"invisible\">ider-flipping-through-polaroid-images/&quot;CSS</span></a> Infinite Slider Flipping Through Polaroid Images&quot;</p><p>In the last article, we made a pretty cool little slider (or “carousel” if that’s what you prefer) that rotates in a circular direction. This time we are going to make one that flips through a stack of Polaroid images.</p><p>Read more: <a href=\"https://css-tricks.com/css-infinite-slider-flipping-through-polaroid-images/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/css-infinite-sl</span><span class=\"invisible\">ider-flipping-through-polaroid-images/</span></a></p><p><a href=\"https://mastodon.social/tags/carousel\" class=\"mention hashtag\" rel=\"tag\">#<span>carousel</span></a> <a href=\"https://mastodon.social/tags/cssanimation\" class=\"mention hashtag\" rel=\"tag\">#<span>cssanimation</span></a> <a href=\"https://mastodon.social/tags/images\" class=\"mention hashtag\" rel=\"tag\">#<span>images</span></a> <a href=\"https://mastodon.social/tags/slider\" class=\"mention hashtag\" rel=\"tag\">#<span>slider</span></a> <a href=\"https://mastodon.social/tags/z\" class=\"mention hashtag\" rel=\"tag\">#<span>z</span></a>-index</p>", "contentMap": { "en": "<p>CSS Infinite Slider Flipping Through Polaroid Images <a href=\"https://css-tricks.com/css-infinite-slider-flipping-through-polaroid-images/&quot;CSS\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/css-infinite-sl</span><span class=\"invisible\">ider-flipping-through-polaroid-images/&quot;CSS</span></a> Infinite Slider Flipping Through Polaroid Images&quot;</p><p>In the last article, we made a pretty cool little slider (or “carousel” if that’s what you prefer) that rotates in a circular direction. This time we are going to make one that flips through a stack of Polaroid images.</p><p>Read more: <a href=\"https://css-tricks.com/css-infinite-slider-flipping-through-polaroid-images/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/css-infinite-sl</span><span class=\"invisible\">ider-flipping-through-polaroid-images/</span></a></p><p><a href=\"https://mastodon.social/tags/carousel\" class=\"mention hashtag\" rel=\"tag\">#<span>carousel</span></a> <a href=\"https://mastodon.social/tags/cssanimation\" class=\"mention hashtag\" rel=\"tag\">#<span>cssanimation</span></a> <a href=\"https://mastodon.social/tags/images\" class=\"mention hashtag\" rel=\"tag\">#<span>images</span></a> <a href=\"https://mastodon.social/tags/slider\" class=\"mention hashtag\" rel=\"tag\">#<span>slider</span></a> <a href=\"https://mastodon.social/tags/z\" class=\"mention hashtag\" rel=\"tag\">#<span>z</span></a>-index</p>" }, "attachment": [ { "type": "Document", "mediaType": "image/jpeg", "url": "https://files.mastodon.social/media_attachments/files/109/676/716/984/705/918/original/e25f1cabac37a45a.jpg", "name": null, "blurhash": "UKLgRd0i^#=_-;Myayoz_2-TD+R%Mxo}WCnj", "width": 1024, "height": 512 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/676/717/087/228/163/original/42c830dfb6f4073a.png", "name": null, "blurhash": "U1S~x50zD#-BM{9Fj]RjD$Riog%M%f9F?bIU", "width": 768, "height": 573 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/676/717/232/392/763/original/f1f03cd9fb227597.png", "name": null, "blurhash": "U2S~x50yIT$SNFD%bIRkM_aKjbxtx]D%%MM{", "width": 761, "height": 573 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/676/717/319/828/556/original/4be063aaca2bdd4e.png", "name": null, "blurhash": "U3S?DVRjt7xu4n?b~qt79F-;-;WBRjM{RjWB", "width": 170, "height": 321 } ], "tag": [ { "type": "Hashtag", "href": "https://mastodon.social/tags/carousel", "name": "#carousel" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/cssanimation", "name": "#cssanimation" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/images", "name": "#images" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/slider", "name": "#slider" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/z", "name": "#z" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109676717376853035/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109676717376853035/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109676717376853035/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109676717376853035/likes", "type": "Collection", "totalItems": 1 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109676717376853035/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109671002665441496/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-11T14:18:15Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109671002665441496", "type": "Note", "summary": null, "inReplyTo": null, "published": "2023-01-11T14:18:15Z", "url": "https://mastodon.social/@csstricks/109671002665441496", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109671002665441496", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2023-01-11:objectId=376753460:objectType=Conversation", "content": "<p>:has is an unforgiving selector <a href=\"https://css-tricks.com/has-is-an-unforgiving-selector/&quot;:has\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/has-is-an-unfor</span><span class=\"invisible\">giving-selector/&quot;:has</span></a> is an unforgiving selector&quot;</p><p>A little thing happened on the way to publishing the CSS :has() selector to the ol’ Almanac. I had originally described :has() as a “forgiving” selector, the idea being that anything in its argument is evaluated, even if one or more of the items is invalid. See ::scoobydoo in there? That’s totally invalid. A forgiving […]</p><p>Read more: <a href=\"https://css-tricks.com/has-is-an-unforgiving-selector/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/has-is-an-unfor</span><span class=\"invisible\">giving-selector/</span></a></p><p>#:has #:is #:where <a href=\"https://mastodon.social/tags/specificity\" class=\"mention hashtag\" rel=\"tag\">#<span>specificity</span></a></p>", "contentMap": { "en": "<p>:has is an unforgiving selector <a href=\"https://css-tricks.com/has-is-an-unforgiving-selector/&quot;:has\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/has-is-an-unfor</span><span class=\"invisible\">giving-selector/&quot;:has</span></a> is an unforgiving selector&quot;</p><p>A little thing happened on the way to publishing the CSS :has() selector to the ol’ Almanac. I had originally described :has() as a “forgiving” selector, the idea being that anything in its argument is evaluated, even if one or more of the items is invalid. See ::scoobydoo in there? That’s totally invalid. A forgiving […]</p><p>Read more: <a href=\"https://css-tricks.com/has-is-an-unforgiving-selector/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/has-is-an-unfor</span><span class=\"invisible\">giving-selector/</span></a></p><p>#:has #:is #:where <a href=\"https://mastodon.social/tags/specificity\" class=\"mention hashtag\" rel=\"tag\">#<span>specificity</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/jpeg", "url": "https://files.mastodon.social/media_attachments/files/109/671/002/584/300/624/original/62560693fc093efa.jpg", "name": null, "blurhash": "U25OjAk84Unn%JoeIqR*-.ayIVof-ns,IpRm", "width": 1024, "height": 512 } ], "tag": [ { "type": "Hashtag", "href": "https://mastodon.social/tags/specificity", "name": "#specificity" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109671002665441496/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109671002665441496/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109671002665441496/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109671002665441496/likes", "type": "Collection", "totalItems": 2 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109671002665441496/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109666989583994946/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-10T21:17:41Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109666989583994946", "type": "Note", "summary": null, "inReplyTo": null, "published": "2023-01-10T21:17:41Z", "url": "https://mastodon.social/@csstricks/109666989583994946", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109666989583994946", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2023-01-10:objectId=376332386:objectType=Conversation", "content": "<p>Some Things I Took Away From An Event Apart 2022 in Denver <a href=\"https://css-tricks.com/some-things-i-took-away-from-an-event-apart-2022-in-denver/&quot;Some\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/some-things-i-t</span><span class=\"invisible\">ook-away-from-an-event-apart-2022-in-denver/&quot;Some</span></a> Things I Took Away From An Event Apart 2022 in Denver&quot;</p><p>An Event Apart 2022 Denver wrapped up yesterday. And while I was unable to make it to all three days this time, I did catch yesterday’s action — and it was awesome. I’m not very social or outgoing, but this was the first conference I’ve been to in at least a couple of years, and […]</p><p>Read more: <a href=\"https://css-tricks.com/some-things-i-took-away-from-an-event-apart-2022-in-denver/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/some-things-i-t</span><span class=\"invisible\">ook-away-from-an-event-apart-2022-in-denver/</span></a></p><p><a href=\"https://mastodon.social/tags/aneventapart\" class=\"mention hashtag\" rel=\"tag\">#<span>aneventapart</span></a> <a href=\"https://mastodon.social/tags/conference\" class=\"mention hashtag\" rel=\"tag\">#<span>conference</span></a></p>", "contentMap": { "en": "<p>Some Things I Took Away From An Event Apart 2022 in Denver <a href=\"https://css-tricks.com/some-things-i-took-away-from-an-event-apart-2022-in-denver/&quot;Some\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/some-things-i-t</span><span class=\"invisible\">ook-away-from-an-event-apart-2022-in-denver/&quot;Some</span></a> Things I Took Away From An Event Apart 2022 in Denver&quot;</p><p>An Event Apart 2022 Denver wrapped up yesterday. And while I was unable to make it to all three days this time, I did catch yesterday’s action — and it was awesome. I’m not very social or outgoing, but this was the first conference I’ve been to in at least a couple of years, and […]</p><p>Read more: <a href=\"https://css-tricks.com/some-things-i-took-away-from-an-event-apart-2022-in-denver/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/some-things-i-t</span><span class=\"invisible\">ook-away-from-an-event-apart-2022-in-denver/</span></a></p><p><a href=\"https://mastodon.social/tags/aneventapart\" class=\"mention hashtag\" rel=\"tag\">#<span>aneventapart</span></a> <a href=\"https://mastodon.social/tags/conference\" class=\"mention hashtag\" rel=\"tag\">#<span>conference</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/666/989/130/181/801/original/5c5e0283848864a5.png", "name": null, "blurhash": "UcLY7%R.t8bI*0jYoeoL9ZofWBj?-=WCRjWC", "width": 1024, "height": 477 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/666/989/257/557/766/original/d688430ec93838e9.png", "name": null, "blurhash": "U2R{#?4n~qxu?bIUIUxu?bRjM{9F00Rj%Mj[", "width": 519, "height": 1024 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/666/989/397/017/667/original/7e99f66893865f85.png", "name": null, "blurhash": "U2RW0bRjD%M{00xuay?b~qfQ-;%M_3?bD%9F", "width": 489, "height": 1024 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/666/989/510/222/102/original/18d9c8684064bb82.png", "name": null, "blurhash": "U45=Ly_N?I-;fQfQazayWCWDWCWDWBa#j]af", "width": 338, "height": 1024 } ], "tag": [ { "type": "Hashtag", "href": "https://mastodon.social/tags/aneventapart", "name": "#aneventapart" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/conference", "name": "#conference" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109666989583994946/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109666989583994946/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109666989583994946/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109666989583994946/likes", "type": "Collection", "totalItems": 1 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109666989583994946/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109665549221731648/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2023-01-10T15:11:23Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109665549221731648", "type": "Note", "summary": null, "inReplyTo": null, "published": "2023-01-10T15:11:23Z", "url": "https://mastodon.social/@csstricks/109665549221731648", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109665549221731648", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2023-01-10:objectId=376129056:objectType=Conversation", "content": "<p>Faking Min Width on a Table Column <a href=\"https://css-tricks.com/faking-min-width-on-a-table-column/&quot;Faking\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/faking-min-widt</span><span class=\"invisible\">h-on-a-table-column/&quot;Faking</span></a> Min Width on a Table Column&quot;</p><p>The good ol’ &amp;lt;table&amp;gt; tag is the most semantic HTML for showing tabular data. But I find it very hard to control how the table is presented, particularly column widths in a dynamic environment where you might not know how much content is going into each table cell. In some cases, one column is super […]</p><p>Read more: <a href=\"https://css-tricks.com/faking-min-width-on-a-table-column/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/faking-min-widt</span><span class=\"invisible\">h-on-a-table-column/</span></a></p><p><a href=\"https://mastodon.social/tags/col\" class=\"mention hashtag\" rel=\"tag\">#<span>col</span></a> <a href=\"https://mastodon.social/tags/table\" class=\"mention hashtag\" rel=\"tag\">#<span>table</span></a>-layout <a href=\"https://mastodon.social/tags/tables\" class=\"mention hashtag\" rel=\"tag\">#<span>tables</span></a></p>", "contentMap": { "en": "<p>Faking Min Width on a Table Column <a href=\"https://css-tricks.com/faking-min-width-on-a-table-column/&quot;Faking\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/faking-min-widt</span><span class=\"invisible\">h-on-a-table-column/&quot;Faking</span></a> Min Width on a Table Column&quot;</p><p>The good ol’ &amp;lt;table&amp;gt; tag is the most semantic HTML for showing tabular data. But I find it very hard to control how the table is presented, particularly column widths in a dynamic environment where you might not know how much content is going into each table cell. In some cases, one column is super […]</p><p>Read more: <a href=\"https://css-tricks.com/faking-min-width-on-a-table-column/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/faking-min-widt</span><span class=\"invisible\">h-on-a-table-column/</span></a></p><p><a href=\"https://mastodon.social/tags/col\" class=\"mention hashtag\" rel=\"tag\">#<span>col</span></a> <a href=\"https://mastodon.social/tags/table\" class=\"mention hashtag\" rel=\"tag\">#<span>table</span></a>-layout <a href=\"https://mastodon.social/tags/tables\" class=\"mention hashtag\" rel=\"tag\">#<span>tables</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/665/549/148/107/771/original/9201a3489bc4ed92.png", "name": null, "blurhash": "U5L;meoffQof-;fQfQfQ00fQfQayWBfQfQfQ", "width": 1024, "height": 512 } ], "tag": [ { "type": "Hashtag", "href": "https://mastodon.social/tags/col", "name": "#col" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/table", "name": "#table" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/tables", "name": "#tables" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109665549221731648/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109665549221731648/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109665549221731648/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109665549221731648/likes", "type": "Collection", "totalItems": 0 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109665549221731648/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109592076531283642/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2022-12-28T15:46:18Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109592076531283642", "type": "Note", "summary": null, "inReplyTo": null, "published": "2022-12-28T15:46:18Z", "url": "https://mastodon.social/@csstricks/109592076531283642", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109592076531283642", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2022-12-28:objectId=367509633:objectType=Conversation", "content": "<p>Thank You (2022 Edition) <a href=\"https://css-tricks.com/thank-you-2022-edition/&quot;Thank\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/thank-you-2022-</span><span class=\"invisible\">edition/&quot;Thank</span></a> You (2022 Edition)&quot;</p><p>You know, this is the time of year where Chris normally publishes a big ol’ reflection of the past year. The first one was published in 2007, the same year CSS-Tricks began, and it continued all the way through 2021 without missing a beat. Having been a CSS-Tricks reader myself all those years, I’d hate […]</p><p>Read more: <a href=\"https://css-tricks.com/thank-you-2022-edition/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/thank-you-2022-</span><span class=\"invisible\">edition/</span></a></p>", "contentMap": { "en": "<p>Thank You (2022 Edition) <a href=\"https://css-tricks.com/thank-you-2022-edition/&quot;Thank\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/thank-you-2022-</span><span class=\"invisible\">edition/&quot;Thank</span></a> You (2022 Edition)&quot;</p><p>You know, this is the time of year where Chris normally publishes a big ol’ reflection of the past year. The first one was published in 2007, the same year CSS-Tricks began, and it continued all the way through 2021 without missing a beat. Having been a CSS-Tricks reader myself all those years, I’d hate […]</p><p>Read more: <a href=\"https://css-tricks.com/thank-you-2022-edition/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/thank-you-2022-</span><span class=\"invisible\">edition/</span></a></p>" }, "attachment": [], "tag": [], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109592076531283642/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109592076531283642/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109592076531283642/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109592076531283642/likes", "type": "Collection", "totalItems": 0 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109592076531283642/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109552273932357367/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2022-12-21T15:03:59Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109552273932357367", "type": "Note", "summary": null, "inReplyTo": null, "published": "2022-12-21T15:03:59Z", "url": "https://mastodon.social/@csstricks/109552273932357367", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109552273932357367", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2022-12-21:objectId=362557038:objectType=Conversation", "content": "<p>2022 Roundup of Web Research <a href=\"https://css-tricks.com/2022-roundup-of-web-research/&quot;2022\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/2022-roundup-of</span><span class=\"invisible\">-web-research/&quot;2022</span></a> Roundup of Web Research&quot;</p><p>We’ve started making a tradition of rounding up the latest front-end research at the end of each year. We did it in 2020 and again in 2021. Reports are released throughout the year by a bunch of different companies and organizations researching everything from web design trends to developer skills to popular coding languages and […]</p><p>Read more: <a href=\"https://css-tricks.com/2022-roundup-of-web-research/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/2022-roundup-of</span><span class=\"invisible\">-web-research/</span></a></p>", "contentMap": { "en": "<p>2022 Roundup of Web Research <a href=\"https://css-tricks.com/2022-roundup-of-web-research/&quot;2022\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/2022-roundup-of</span><span class=\"invisible\">-web-research/&quot;2022</span></a> Roundup of Web Research&quot;</p><p>We’ve started making a tradition of rounding up the latest front-end research at the end of each year. We did it in 2020 and again in 2021. Reports are released throughout the year by a bunch of different companies and organizations researching everything from web design trends to developer skills to popular coding languages and […]</p><p>Read more: <a href=\"https://css-tricks.com/2022-roundup-of-web-research/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/2022-roundup-of</span><span class=\"invisible\">-web-research/</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/552/273/446/552/835/original/764c32196e2834db.png", "name": null, "blurhash": "U38VK4t1NuxF-Oj[WXbG}Ej?WWoJbEsoa#a{", "width": 1024, "height": 512 }, { "type": "Document", "mediaType": "image/jpeg", "url": "https://files.mastodon.social/media_attachments/files/109/552/273/552/297/305/original/9d8f9b1d3da1ab0a.jpg", "name": null, "blurhash": "UBQ]pF%fx@Q.VsM_?vH=caWIrq?^PD$gV_S~", "width": 866, "height": 433 }, { "type": "Document", "mediaType": "image/jpeg", "url": "https://files.mastodon.social/media_attachments/files/109/552/273/711/487/412/original/de36bac70d961f83.jpg", "name": null, "blurhash": "ULRV%@ML^+%X_MW9IURpt+yCNHM#4nWZ-;t0", "width": 866, "height": 433 }, { "type": "Document", "mediaType": "image/jpeg", "url": "https://files.mastodon.social/media_attachments/files/109/552/273/874/230/027/original/47eeae8c5feac250.jpg", "name": null, "blurhash": "UO6[tDofH;RPkBfQayfPI8aeyEozayfQj[fQ", "width": 866, "height": 433 } ], "tag": [], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109552273932357367/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109552273932357367/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109552273932357367/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109552273932357367/likes", "type": "Collection", "totalItems": 1 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109552273932357367/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109547235060819500/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2022-12-20T17:42:32Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109547235060819500", "type": "Note", "summary": null, "inReplyTo": null, "published": "2022-12-20T17:42:32Z", "url": "https://mastodon.social/@csstricks/109547235060819500", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109547235060819500", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2022-12-20:objectId=361780830:objectType=Conversation", "content": "<p>The CSS :has Selector (and 4+ Examples) <a href=\"https://css-tricks.com/the-css-has-selector/&quot;The\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/the-css-has-sel</span><span class=\"invisible\">ector/&quot;The</span></a> CSS :has Selector (and 4+ Examples)&quot;</p><p>The CSS :has selector helps you select elements when they contain other elements that match the selector you pass into :has().</p><p>Read more: <a href=\"https://css-tricks.com/the-css-has-selector/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/the-css-has-sel</span><span class=\"invisible\">ector/</span></a></p><p>#:has #:is #:not <a href=\"https://mastodon.social/tags/pseudoelements\" class=\"mention hashtag\" rel=\"tag\">#<span>pseudoelements</span></a></p>", "contentMap": { "en": "<p>The CSS :has Selector (and 4+ Examples) <a href=\"https://css-tricks.com/the-css-has-selector/&quot;The\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/the-css-has-sel</span><span class=\"invisible\">ector/&quot;The</span></a> CSS :has Selector (and 4+ Examples)&quot;</p><p>The CSS :has selector helps you select elements when they contain other elements that match the selector you pass into :has().</p><p>Read more: <a href=\"https://css-tricks.com/the-css-has-selector/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/the-css-has-sel</span><span class=\"invisible\">ector/</span></a></p><p>#:has #:is #:not <a href=\"https://mastodon.social/tags/pseudoelements\" class=\"mention hashtag\" rel=\"tag\">#<span>pseudoelements</span></a></p>" }, "attachment": [], "tag": [ { "type": "Hashtag", "href": "https://mastodon.social/tags/pseudoelements", "name": "#pseudoelements" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109547235060819500/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109547235060819500/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109547235060819500/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109547235060819500/likes", "type": "Collection", "totalItems": 1 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109547235060819500/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109546851343329794/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2022-12-20T16:04:57Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109546851343329794", "type": "Note", "summary": null, "inReplyTo": null, "published": "2022-12-20T16:04:57Z", "url": "https://mastodon.social/@csstricks/109546851343329794", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109546851343329794", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2022-12-20:objectId=361704159:objectType=Conversation", "content": "<p>Help choose the syntax for CSS Nesting <a href=\"https://css-tricks.com/help-choose-the-syntax-for-css-nesting/&quot;Help\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/help-choose-the</span><span class=\"invisible\">-syntax-for-css-nesting/&quot;Help</span></a> choose the syntax for CSS Nesting&quot;</p><p>CSS Nesting is making the rounds yet again. Remember earlier this year when Adam and Mia put three syntax options up for a vote? Those results were tallied and it wasn’t even even close. Now there’s another chance to speak into the future of nesting, this time over at the WebKit blog. The results from […]</p><p>Read more: <a href=\"https://css-tricks.com/help-choose-the-syntax-for-css-nesting/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/help-choose-the</span><span class=\"invisible\">-syntax-for-css-nesting/</span></a></p><p><a href=\"https://mastodon.social/tags/nesting\" class=\"mention hashtag\" rel=\"tag\">#<span>nesting</span></a> <a href=\"https://mastodon.social/tags/survey\" class=\"mention hashtag\" rel=\"tag\">#<span>survey</span></a></p>", "contentMap": { "en": "<p>Help choose the syntax for CSS Nesting <a href=\"https://css-tricks.com/help-choose-the-syntax-for-css-nesting/&quot;Help\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/help-choose-the</span><span class=\"invisible\">-syntax-for-css-nesting/&quot;Help</span></a> choose the syntax for CSS Nesting&quot;</p><p>CSS Nesting is making the rounds yet again. Remember earlier this year when Adam and Mia put three syntax options up for a vote? Those results were tallied and it wasn’t even even close. Now there’s another chance to speak into the future of nesting, this time over at the WebKit blog. The results from […]</p><p>Read more: <a href=\"https://css-tricks.com/help-choose-the-syntax-for-css-nesting/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/help-choose-the</span><span class=\"invisible\">-syntax-for-css-nesting/</span></a></p><p><a href=\"https://mastodon.social/tags/nesting\" class=\"mention hashtag\" rel=\"tag\">#<span>nesting</span></a> <a href=\"https://mastodon.social/tags/survey\" class=\"mention hashtag\" rel=\"tag\">#<span>survey</span></a></p>" }, "attachment": [], "tag": [ { "type": "Hashtag", "href": "https://mastodon.social/tags/nesting", "name": "#nesting" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/survey", "name": "#survey" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109546851343329794/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109546851343329794/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109546851343329794/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109546851343329794/likes", "type": "Collection", "totalItems": 1 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109546851343329794/shares", "type": "Collection", "totalItems": 1 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109546408262614202/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2022-12-20T14:12:16Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109546408262614202", "type": "Note", "summary": null, "inReplyTo": null, "published": "2022-12-20T14:12:16Z", "url": "https://mastodon.social/@csstricks/109546408262614202", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109546408262614202", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2022-12-20:objectId=361618005:objectType=Conversation", "content": "<p>301: Let it Snow (Code)! <a href=\"https://css-tricks.com/newsletter/301-let-it-snow-code/&quot;301\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/newsletter/301-</span><span class=\"invisible\">let-it-snow-code/&quot;301</span></a>: Let it Snow (Code)!&quot;</p><p>[Geoff:] This is the first year I’ve lived where it snows in the winter. One morning our family woke up and smushed our faces against the glass door to the backyard to marvel at our mini winter wonderland. I never knew what I was missing! That’s why CodePen really caught my attention when they recently […]</p><p>Read more: <a href=\"https://css-tricks.com/newsletter/301-let-it-snow-code/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/newsletter/301-</span><span class=\"invisible\">let-it-snow-code/</span></a></p>", "contentMap": { "en": "<p>301: Let it Snow (Code)! <a href=\"https://css-tricks.com/newsletter/301-let-it-snow-code/&quot;301\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/newsletter/301-</span><span class=\"invisible\">let-it-snow-code/&quot;301</span></a>: Let it Snow (Code)!&quot;</p><p>[Geoff:] This is the first year I’ve lived where it snows in the winter. One morning our family woke up and smushed our faces against the glass door to the backyard to marvel at our mini winter wonderland. I never knew what I was missing! That’s why CodePen really caught my attention when they recently […]</p><p>Read more: <a href=\"https://css-tricks.com/newsletter/301-let-it-snow-code/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/newsletter/301-</span><span class=\"invisible\">let-it-snow-code/</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/jpeg", "url": "https://files.mastodon.social/media_attachments/files/109/546/408/201/766/510/original/8611026529b89a2a.jpg", "name": null, "blurhash": "ULJkAtRP%%t60gog%2a#XVs,nNWB4;W?ofj]", "width": 1024, "height": 512 } ], "tag": [], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109546408262614202/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109546408262614202/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109546408262614202/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109546408262614202/likes", "type": "Collection", "totalItems": 0 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109546408262614202/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109543032338430140/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2022-12-19T23:53:43Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109543032338430140", "type": "Note", "summary": null, "inReplyTo": null, "published": "2022-12-19T23:53:43Z", "url": "https://mastodon.social/@csstricks/109543032338430140", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109543032338430140", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2022-12-19:objectId=361131899:objectType=Conversation", "content": "<p>SVG Properties and CSS <a href=\"https://css-tricks.com/svg-properties-and-css/&quot;SVG\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/svg-properties-</span><span class=\"invisible\">and-css/&quot;SVG</span></a> Properties and CSS&quot;</p><p>SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.</p><p>Read more: <a href=\"https://css-tricks.com/svg-properties-and-css/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/svg-properties-</span><span class=\"invisible\">and-css/</span></a></p>", "contentMap": { "en": "<p>SVG Properties and CSS <a href=\"https://css-tricks.com/svg-properties-and-css/&quot;SVG\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/svg-properties-</span><span class=\"invisible\">and-css/&quot;SVG</span></a> Properties and CSS&quot;</p><p>SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.</p><p>Read more: <a href=\"https://css-tricks.com/svg-properties-and-css/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/svg-properties-</span><span class=\"invisible\">and-css/</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/543/032/226/594/788/original/ca2d3045ab559d76.png", "name": null, "blurhash": "U0RSL:^cN20F~L^t?QWX^t~ct29i~4s+t2xo", "width": 1024, "height": 512 } ], "tag": [], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109543032338430140/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109543032338430140/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109543032338430140/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109543032338430140/likes", "type": "Collection", "totalItems": 1 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109543032338430140/shares", "type": "Collection", "totalItems": 0 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109541407352475754/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2022-12-19T17:00:28Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109541407352475754", "type": "Note", "summary": null, "inReplyTo": null, "published": "2022-12-19T17:00:28Z", "url": "https://mastodon.social/@csstricks/109541407352475754", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109541407352475754", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2022-12-19:objectId=360807566:objectType=Conversation", "content": "<p>⭐️ New to the CSS Almanac: :has() ⭐️</p><p><a href=\"https://css-tricks.com/almanac/selectors/h/has/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/almanac/selecto</span><span class=\"invisible\">rs/h/has/</span></a></p>", "contentMap": { "en": "<p>⭐️ New to the CSS Almanac: :has() ⭐️</p><p><a href=\"https://css-tricks.com/almanac/selectors/h/has/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/almanac/selecto</span><span class=\"invisible\">rs/h/has/</span></a></p>" }, "attachment": [], "tag": [], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109541407352475754/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109541407352475754/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109541407352475754/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109541407352475754/likes", "type": "Collection", "totalItems": 1 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109541407352475754/shares", "type": "Collection", "totalItems": 2 } } }, { "id": "https://mastodon.social/users/csstricks/statuses/109523939884018582/activity", "type": "Create", "actor": "https://mastodon.social/users/csstricks", "published": "2022-12-16T14:58:16Z", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "object": { "id": "https://mastodon.social/users/csstricks/statuses/109523939884018582", "type": "Note", "summary": null, "inReplyTo": null, "published": "2022-12-16T14:58:16Z", "url": "https://mastodon.social/@csstricks/109523939884018582", "attributedTo": "https://mastodon.social/users/csstricks", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://mastodon.social/users/csstricks/followers" ], "sensitive": false, "atomUri": "https://mastodon.social/users/csstricks/statuses/109523939884018582", "inReplyToAtomUri": null, "conversation": "tag:mastodon.social,2022-12-16:objectId=357881715:objectType=Conversation", "content": "<p>CSS Infinite 3D Sliders <a href=\"https://css-tricks.com/css-infinite-3d-sliders/&quot;CSS\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/css-infinite-3d</span><span class=\"invisible\">-sliders/&quot;CSS</span></a> Infinite 3D Sliders&quot;</p><p>In this series, we’ve been making image sliders with nothing but HTML and CSS. The idea is that we can use the same markup but different CSS to get wildly different results, no matter how many images we toss in. We started with a circular slider that rotates infinitely, sort of like a fidget spinner […]</p><p>Read more: <a href=\"https://css-tricks.com/css-infinite-3d-sliders/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/css-infinite-3d</span><span class=\"invisible\">-sliders/</span></a></p><p><a href=\"https://mastodon.social/tags/3d\" class=\"mention hashtag\" rel=\"tag\">#<span>3d</span></a> <a href=\"https://mastodon.social/tags/carousel\" class=\"mention hashtag\" rel=\"tag\">#<span>carousel</span></a> <a href=\"https://mastodon.social/tags/slider\" class=\"mention hashtag\" rel=\"tag\">#<span>slider</span></a> <a href=\"https://mastodon.social/tags/transform\" class=\"mention hashtag\" rel=\"tag\">#<span>transform</span></a></p>", "contentMap": { "en": "<p>CSS Infinite 3D Sliders <a href=\"https://css-tricks.com/css-infinite-3d-sliders/&quot;CSS\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/css-infinite-3d</span><span class=\"invisible\">-sliders/&quot;CSS</span></a> Infinite 3D Sliders&quot;</p><p>In this series, we’ve been making image sliders with nothing but HTML and CSS. The idea is that we can use the same markup but different CSS to get wildly different results, no matter how many images we toss in. We started with a circular slider that rotates infinitely, sort of like a fidget spinner […]</p><p>Read more: <a href=\"https://css-tricks.com/css-infinite-3d-sliders/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">css-tricks.com/css-infinite-3d</span><span class=\"invisible\">-sliders/</span></a></p><p><a href=\"https://mastodon.social/tags/3d\" class=\"mention hashtag\" rel=\"tag\">#<span>3d</span></a> <a href=\"https://mastodon.social/tags/carousel\" class=\"mention hashtag\" rel=\"tag\">#<span>carousel</span></a> <a href=\"https://mastodon.social/tags/slider\" class=\"mention hashtag\" rel=\"tag\">#<span>slider</span></a> <a href=\"https://mastodon.social/tags/transform\" class=\"mention hashtag\" rel=\"tag\">#<span>transform</span></a></p>" }, "attachment": [ { "type": "Document", "mediaType": "image/jpeg", "url": "https://files.mastodon.social/media_attachments/files/109/523/939/473/500/882/original/ab2ac17989d1473c.jpg", "name": null, "blurhash": "UMD^DZ%Lk9M|-.xaj?WB0*WVjat79HM|a$s;", "width": 1024, "height": 512 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/523/939/608/222/054/original/b21636c5819c72e3.png", "name": null, "blurhash": "UTRMYrog%MxuMxofofaz_Nayt7ay%MWBt7t7", "width": 983, "height": 467 }, { "type": "Document", "mediaType": "image/png", "url": "https://files.mastodon.social/media_attachments/files/109/523/939/806/275/186/original/9016c102ad2bcbbe.png", "name": null, "blurhash": "USQJWLRj_Naf-=oMxut7?cWBIUoMWCt7V@Rj", "width": 938, "height": 482 } ], "tag": [ { "type": "Hashtag", "href": "https://mastodon.social/tags/3d", "name": "#3d" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/carousel", "name": "#carousel" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/slider", "name": "#slider" }, { "type": "Hashtag", "href": "https://mastodon.social/tags/transform", "name": "#transform" } ], "replies": { "id": "https://mastodon.social/users/csstricks/statuses/109523939884018582/replies", "type": "Collection", "first": { "type": "CollectionPage", "next": "https://mastodon.social/users/csstricks/statuses/109523939884018582/replies?only_other_accounts=true&page=true", "partOf": "https://mastodon.social/users/csstricks/statuses/109523939884018582/replies", "items": [] } }, "likes": { "id": "https://mastodon.social/users/csstricks/statuses/109523939884018582/likes", "type": "Collection", "totalItems": 2 }, "shares": { "id": "https://mastodon.social/users/csstricks/statuses/109523939884018582/shares", "type": "Collection", "totalItems": 0 } } } ] }