mstdn.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A general-purpose Mastodon server with a 500 character limit. All languages are welcome.

Administered by:

Server stats:

18K
active users

#CSS

142 posts132 participants31 posts today
Nathan Knowler<p>Wake me up when `:has()` is Baseline widely available. <a href="https://sunny.garden/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
Nathan Knowler<p><a href="https://sunny.garden/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a>: I want a collapsible `gap`. For example: if there’s nothing in a column, collapse the gap around it.</p>
mkj<p>TIL about the "hover" CSS media capability query.</p><p>@media (hover: hover) {...}<br>@media (hover: none) {...}</p><p><a href="https://css-tricks.com/touch-devices-not-judged-size/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/touch-devices-n</span><span class="invisible">ot-judged-size/</span></a></p><p>As well as the "pointer"/"any-pointer" media queries, also from <a href="https://dev.to/cooty/a-new-way-to-test-for-touch-devices-without-javascript-enter-the-pointer-media-query-2kok" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">dev.to/cooty/a-new-way-to-test</span><span class="invisible">-for-touch-devices-without-javascript-enter-the-pointer-media-query-2kok</span></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/CSS/@media/any-pointer</span></a></p><p>Like</p><p>@media (pointer: coarse) {...}<br>@media (any-pointer: fine) {...}</p><p>All widely supported!</p><p>Relying on screen size to try to detect touchscreen devices has always felt iffy to me, so this will *definitely* come in handy!</p><p><a href="https://social.mkj.earth/tags/TIL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>TIL</span></a> <a href="https://social.mkj.earth/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://social.mkj.earth/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDesign</span></a></p>
OddBird<p>OddNews is our monthly email with the latest in front-end web development and UX design. </p><p>Feb issue is out: <br>- <span class="h-card" translate="no"><a href="https://front-end.social/@jamessw" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>jamessw</span></a></span> explores ways to track down why an anchor isn’t found<br>- <span class="h-card" translate="no"><a href="https://front-end.social/@mia" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>mia</span></a></span> reimagines fluid typography</p><p>Read &amp; Subscribe: oddbird.net/oddnews</p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/UX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UX</span></a> <a href="https://front-end.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a></p>

Unleashing Creativity with Purple Shape Craft: The Future of Shape Generation in Web Development

Purple Shape Craft is revolutionizing the way designers and developers create and manipulate shapes for web applications. With its advanced features like interactive manipulation, gradient customizati...

news.lavx.hu/article/unleashin

Is Tailwind a CSS in HTML like framework? Maybe this is only my own fucked brain 🤔

Example :
class="flex outline block hover:border-transparent"

What the hell is that again? Is that the same running gag about dumb CSS dev? 😔

Don't really see the thing here 🤔

TIL that although `display:contents` remains a big old pile of accessibility 💩 it *can* be used judiciously on semantically neutral elements like `div`.

Just don’t apply it directly to any element that has innate semantics and behaviour

Mal wieder Neues aus dem #Frontend

Im Chrome Canary gibt's eine erste Umsetzung der #CSS Mixins Spec – CSS Custom Functions:
bram.us/2025/02/09/css-custom-

Die Fokus-Bereiche für #interop2025 stehen fest und es sind einige spannende Dinge dabei, z.B. #CoreWebVitals , Anchor Positioning, das <details>-Element und Flexbox & Grid/Subgrid:
webkit.org/blog/16458/announci

CSS text-box-trim findet Verbreitung: Chromium 133+ und Safari 18.2 sind jetzt dabei:
developer.chrome.com/blog/css-

Bram.usCSS Custom Functions are coming … and they are going to be a game changer!
More from Bramus

I had a vision.

The CSS Masonry angel came down from the heavens and addressed me. I made to speak, but it reached out a single finger and touched it to my lips to hush me. “Soon,” it said with the voice of a choir. “Soon.”