Login

Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.online is one of the many independent Mastodon servers you can use to participate in the fediverse.
A newer server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

10K
active users

mastodon.online: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0-nightly.2025-04-15

#newcss

0 posts0 participants0 posts today
Gardiner Bryant<p>I couldn&#39;t be more excited about the new attr() syntax in CSS! Check out my latest blog post all about this! <a href="https://mastodon.online/tags/css" class="mention hashtag" rel="tag">#<span>css</span></a> <a href="https://mastodon.online/tags/syntax" class="mention hashtag" rel="tag">#<span>syntax</span></a> <a href="https://mastodon.online/tags/newcss" class="mention hashtag" rel="tag">#<span>newcss</span></a> <a href="https://mastodon.online/tags/webdev" class="mention hashtag" rel="tag">#<span>webdev</span></a> <a href="https://mastodon.online/tags/uidesign" class="mention hashtag" rel="tag">#<span>uidesign</span></a> <a href="https://mastodon.online/tags/webdesign" class="mention hashtag" rel="tag">#<span>webdesign</span></a> </p><p><a href="https://blog.gardinerbryant.com/the-new-css-attr-function/" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="ellipsis">blog.gardinerbryant.com/the-ne</span><span class="invisible">w-css-attr-function/</span></a></p>
Ana Tudor 🐯<p>Because someone just hearted a 5 year old <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo <a href="https://codepen.io/thebabydino/pen/GRooBJm?editors=0100" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/GRo</span><span class="invisible">oBJm?editors=0100</span></a> I made using a <a href="https://mastodon.social/tags/Sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sass</span></a> function + looping to generate a <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 🌈: we don't need *any* Sass for this anymore! 🎉</p><p>We can now do it with</p><p>background: <br> linear-gradient(in hsl longer hue 90deg, <br> hsl(0, 95%, 65%) 0 0)</p><p><a href="https://mastodon.social/tags/SCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SCSS</span></a> <a href="https://mastodon.social/tags/loop" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>loop</span></a> <a href="https://mastodon.social/tags/looping" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>looping</span></a> <a href="https://mastodon.social/tags/newCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>newCSS</span></a> <a href="https://mastodon.social/tags/rainbow" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rainbow</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/hueInterpolation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hueInterpolation</span></a></p>
westbrook<p>As for me... at least this week.</p><p>I'm working on my <a href="https://mastodon.social/tags/newCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>newCSS</span></a> skills by way of MPA View Transitions. 🤩</p><p>I continue to struggle a bit with <a href="https://mastodon.social/tags/vite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vite</span></a> and its...opinions on caching and content importing... 😬</p><p>Same UI is gonna need some major <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>a11y</span></a> research around chat UIs, so if you've got any good reading I should do in advance, please do share!! 🗣️</p><p>Also looking forward to whether Reference Targets <a href="https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/WICG/webcomponents/</span><span class="invisible">blob/gh-pages/proposals/reference-target-explainer.md</span></a> will support that work, which you can try out under a flag in Chromium. 🆕</p><p>🧑‍🎤🤘</p>
ExploreLive feeds
About