Social 📸 Photography

Stephanie EcklesSomething I think hasn't been emphasized about <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> `:is()` and `:where()` is that they are forgiving selectors.This means that if an item inside their scope isn't understood by the browser, it does _not_ invalidate the entire rule!It's a superpower because in a traditional selector list, an invalid selector does cause the entire rule to be discarded.Note that both `:has()` and the enhanced `:not()` are not forgiving, but you can wrap them with either `is` or `where` to hop around that!

randomMDN🦖 font-optical-sizing ✅ Widely available (from Mar 2020)<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing" rel="nofollow noopener" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing</a>The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.<a href="https://front-end.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

CSS by T. Afif :verified:📝 New CSS Article!Do you want to have an overview of what modern CSS can do? Check my latest article<a href="https://frontendmasters.com/blog/infinite-marquee-animation-using-modern-css/" rel="nofollow noopener" translate="no" target="_blank">https://frontendmasters.com/blog/infinite-marquee-animation-using-modern-css/</a>Learn how I made that infinite marquee animation with less than 10 lines of CSS using shape(), sibling-index(), and more!<a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a>

That HTML Blog & The Spicy WebAnd now, the post you've all been waiting for…(probably not, but you get it anyway!) 😂The <a href="https://intuitivefuture.com/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> Framework Wars™ have come to an end. And we can thank…<a href="https://intuitivefuture.com/tags/Tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#Tailwind</a> v4 for that! 🤯Freely compose UI using native CSS variables & syntax, Tailwind design tokens in CSS (configured with CSS!), and Tailwind utility classes only where it makes sense. Hallelujah! 🙌As historically one of Tailwind's biggest critics it is *weird* to sing its praises. 2025's biggest <a href="https://intuitivefuture.com/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> surprise? <a href="https://thathtml.blog/2025/08/tailwind-and-css-friends-at-last/" rel="nofollow noopener" translate="no" target="_blank">https://thathtml.blog/2025/08/tailwind-and-css-friends-at-last/</a>

Andy PFun <a href="https://mastodon.art/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> trick: width: calc(infinity * 1px); height: calc(infinity * 1px);

CSS BasicsHow to Discover a <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> Trick: "Do we invent or discover CSS tricks? Lee Meyer discusses how creative limitations, recursive thinking, and unexpected combinations lead to his most interesting ideas." <a href="https://css-tricks.com/how-to-discover-a-css-trick/" rel="nofollow noopener" translate="no" target="_blank">https://css-tricks.com/how-to-discover-a-css-trick/</a>

David Bisset"Basecoat" ia "all of the shadcn/ui magic, none of the <a href="https://phpc.social/tags/React" class="mention hashtag" rel="nofollow noopener" target="_blank">#React</a>."A components library built with <a href="https://phpc.social/tags/Tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#Tailwind</a> <a href="https://phpc.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> that works with any web stack.<a href="https://basecoatui.com" rel="nofollow noopener" translate="no" target="_blank">https://basecoatui.com</a><a href="https://phpc.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://phpc.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a>

Peter KrönerCode.Movie 0.0.32 adds support for <a href="https://mastodon.social/tags/PHP" class="mention hashtag" rel="nofollow noopener" target="_blank">#PHP</a>!👉 <a href="https://code.movie/blog/php-support-in-0.0.32.html" rel="nofollow noopener" translate="no" target="_blank">https://code.movie/blog/php-support-in-0.0.32.html</a>Also included: out-of-bounds checks for decorations, improved animation heuristics for <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> and <a href="https://mastodon.social/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a>, and full support for <a href="https://mastodon.social/@Scope" class="u-url mention" rel="nofollow noopener" target="_blank">@Scope</a> rules in <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

Peter Kröner🤯 TIL: there is a <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> equivalent to <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> support queries: a static method on the CSS object!👉 <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports_static" rel="nofollow noopener" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports_static</a><a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a>

UmWerker 🕊 ☮️ 🤘<a href="https://todon.nl/tags/euractiv" class="mention hashtag" rel="nofollow noopener" target="_blank">#euractiv</a> hat übers Wochenende offenbar beschlossen auf <a href="https://todon.nl/tags/Privatsph%C3%A4re" class="mention hashtag" rel="nofollow noopener" target="_blank">#Privatsphäre</a> und <a href="https://todon.nl/tags/Datenschutz" class="mention hashtag" rel="nofollow noopener" target="_blank">#Datenschutz</a> seiner Besucher zu scheißen. Nicht nur den Datensammler <a href="https://todon.nl/tags/cloudflare" class="mention hashtag" rel="nofollow noopener" target="_blank">#cloudflare</a> einzubinden, sondern die rote Warnliste in <a href="https://todon.nl/tags/uMatrix" class="mention hashtag" rel="nofollow noopener" target="_blank">#uMatrix</a> so lang ist, dass scrollen notwendig ist. Zudem wurde zu <a href="https://todon.nl/tags/tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#tailwind</a> <a href="https://todon.nl/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> gewechselt (und als cdn geladen), von dessen Nutzung eher abgeraten wird.Dann begebe ich mich mal auf die Suche nach einer neuen, seriösen Quelle für <a href="https://todon.nl/tags/Europa" class="mention hashtag" rel="nofollow noopener" target="_blank">#Europa</a> <a href="https://todon.nl/tags/News" class="mention hashtag" rel="nofollow noopener" target="_blank">#News</a>.

skribe 🇺🇦 :verified_mustard:Anyone know why -webkit-text-stroke doesn't work on Chrome browsers? Is there a work around?<a href="https://aus.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://aus.social/tags/Chromium" class="mention hashtag" rel="nofollow noopener" target="_blank">#Chromium</a> <a href="https://aus.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener" target="_blank">#Chrome</a>

Joel :casio: :blobcatderpy:I've made some small changes to my <a href="https://fosstodon.org/tags/PersonalWebsite" class="mention hashtag" rel="nofollow noopener" target="_blank">#PersonalWebsite</a>, added my avatar to the landing page, joined a new <a href="https://fosstodon.org/tags/webring" class="mention hashtag" rel="nofollow noopener" target="_blank">#webring</a> and restructured a couple other things.This is my 3rd post for <a href="https://fosstodon.org/tags/Blaugust2025" class="mention hashtag" rel="nofollow noopener" target="_blank">#Blaugust2025</a>!<a href="https://joelchrono.xyz/blog/small-website-updates" rel="nofollow noopener" translate="no" target="_blank">https://joelchrono.xyz/blog/small-website-updates</a><a href="https://fosstodon.org/tags/blogging" class="mention hashtag" rel="nofollow noopener" target="_blank">#blogging</a> <a href="https://fosstodon.org/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://fosstodon.org/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://fosstodon.org/tags/blaugust" class="mention hashtag" rel="nofollow noopener" target="_blank">#blaugust</a>

Cédric BelinIt's crazy that, in 2025, CSS still doesn't support "//" as a code comment.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a>

feliksTIL lobotomized owl<a href="https://salehmubashar.com/blog/the-owl-selector-in-css" rel="nofollow noopener" translate="no" target="_blank">https://salehmubashar.com/blog/the-owl-selector-in-css</a><a href="https://chaos.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

Frontend DogmaBrick by Brick: Help Us Build CSS Masonry, by <a href="https://mas.to/@patrickbrosset" class="u-url mention" rel="nofollow noopener" target="_blank">@patrickbrosset</a> (<a href="https://chromium.social/@developers" class="u-url mention" rel="nofollow noopener" target="_blank">@developers</a>):<a href="https://developer.chrome.com/blog/masonry-update" rel="nofollow noopener" translate="no" target="_blank">https://developer.chrome.com/blog/masonry-update</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/masonry" class="mention hashtag" rel="nofollow noopener" target="_blank">#masonry</a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#layout</a> <a href="https://mas.to/tags/chrome" class="mention hashtag" rel="nofollow noopener" target="_blank">#chrome</a> <a href="https://mas.to/tags/google" class="mention hashtag" rel="nofollow noopener" target="_blank">#google</a> <a href="https://mas.to/tags/edge" class="mention hashtag" rel="nofollow noopener" target="_blank">#edge</a> <a href="https://mas.to/tags/microsoft" class="mention hashtag" rel="nofollow noopener" target="_blank">#microsoft</a> <a href="https://mas.to/tags/browsers" class="mention hashtag" rel="nofollow noopener" target="_blank">#browsers</a>

LAYEREDI'm currently rebuilding my website. It's amazing what you can do with <a href="https://chaos.social/tags/Publii" class="mention hashtag" rel="nofollow noopener" target="_blank">#Publii</a>. It's still my favourite static website generator.I started with one of my projects, the <a href="https://chaos.social/tags/NeXT" class="mention hashtag" rel="nofollow noopener" target="_blank">#NeXT</a> <a href="https://chaos.social/tags/SoundBox" class="mention hashtag" rel="nofollow noopener" target="_blank">#SoundBox</a> mini. I tweaked the <a href="https://chaos.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> and custom <a href="https://chaos.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>. I think I can use that as a basis for the rest of the website. 😃<a href="https://chaos.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://chaos.social/tags/NeXTComputer" class="mention hashtag" rel="nofollow noopener" target="_blank">#NeXTComputer</a> <a href="https://chaos.social/tags/RetroComputing" class="mention hashtag" rel="nofollow noopener" target="_blank">#RetroComputing</a> <a href="https://chaos.social/tags/VintageComputing" class="mention hashtag" rel="nofollow noopener" target="_blank">#VintageComputing</a> <a href="https://chaos.social/tags/3DPrint" class="mention hashtag" rel="nofollow noopener" target="_blank">#3DPrint</a> <a href="https://chaos.social/tags/3DPrinting" class="mention hashtag" rel="nofollow noopener" target="_blank">#3DPrinting</a> <a href="https://chaos.social/tags/Shapr3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#Shapr3D</a><a href="https://new.layered.work/projects/next-soundbox/" rel="nofollow noopener" translate="no" target="_blank">https://new.layered.work/projects/next-soundbox/</a>

Frontend DogmaWhat Your Website’s Style Says About You—and How Hackers Can Use It Against You, by <a href="https://me.dm/@errajaryan" class="u-url mention" rel="nofollow noopener" target="_blank">@errajaryan</a>:<a href="https://archive.fo/wxKhE" rel="nofollow noopener" translate="no" target="_blank">https://archive.fo/wxKhE</a><a href="https://mas.to/tags/security" class="mention hashtag" rel="nofollow noopener" target="_blank">#security</a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a>

Thomas Weibel<a href="https://swiss.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>¹ v0.2 published! <a href="https://www.thomasweibel.ch/solar-system4/" rel="nofollow noopener" translate="no" target="_blank">https://www.thomasweibel.ch/solar-system4/</a> ¹Cascading Solar System <a href="https://swiss.social/tags/astronomy" class="mention hashtag" rel="nofollow noopener" target="_blank">#astronomy</a> <a href="https://swiss.social/tags/astrophysics" class="mention hashtag" rel="nofollow noopener" target="_blank">#astrophysics</a> <a href="https://swiss.social/tags/space" class="mention hashtag" rel="nofollow noopener" target="_blank">#space</a> <a href="https://swiss.social/tags/nasa" class="mention hashtag" rel="nofollow noopener" target="_blank">#nasa</a> <a href="https://swiss.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://swiss.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://swiss.social/tags/webapp" class="mention hashtag" rel="nofollow noopener" target="_blank">#webapp</a> <a href="https://swiss.social/tags/solarsystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#solarsystem</a> <a href="https://swiss.social/tags/opendata" class="mention hashtag" rel="nofollow noopener" target="_blank">#opendata</a> <a href="https://mastodon.social/@OpendataCH" class="u-url mention" rel="nofollow noopener" target="_blank">@OpendataCH</a> <a href="https://w3c.social/@w3c" class="u-url mention" rel="nofollow noopener" target="_blank">@w3c</a>

Michael GaleI also have a silly web components question... If I choose a helper library like <a href="https://hachyderm.io/tags/LitHtml" class="mention hashtag" rel="nofollow noopener" target="_blank">#LitHtml</a> and make some component. Say like a button. And I want to make it portable to different projects / contexts.Is it possible with some tool to "compile" it back to a vanilla web-component again? Or would it only be "portable" to some other context if you also handed over the dependency on Lit? <a href="https://hachyderm.io/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://hachyderm.io/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://hachyderm.io/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://hachyderm.io/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a> <a href="https://hachyderm.io/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>

David Bisset<a href="https://awesomeindex.dev/" rel="nofollow noopener" translate="no" target="_blank">https://awesomeindex.dev/</a> allows you to search trouble GitHub's "Awesome" Lists.<a href="https://phpc.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://phpc.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://phpc.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://phpc.social/tags/webtools" class="mention hashtag" rel="nofollow noopener" target="_blank">#webtools</a> <a href="https://phpc.social/tags/Github" class="mention hashtag" rel="nofollow noopener" target="_blank">#Github</a>

Recent searches

Search options

Administered by:

Server stats:

#css