Mastodon @Mastodon@mastodon.social

fcr<a href="https://post.lurk.org/@xpub" class="u-url mention" rel="nofollow noopener" target="_blank">@xpub</a> > <a href="https://post.lurk.org/tags/Declarations" class="mention hashtag" rel="nofollow noopener" target="_blank">#Declarations</a>", project/special issue on CSS by Master Experimental Publishing, Piet Zwart Institute, Willem de Kooning Academy, Hogeschool Rotterdam, presented at <a href="https://gts.varia.zone/@varia" class="u-url mention" rel="nofollow noopener" target="_blank">@varia</a> Rotterdam, 19th April 2024[moving images from high-speed still photographs]<a href="https://spectra.video/w/6NZbvCCmukYiPznJdvtCtF" rel="nofollow noopener" translate="no" target="_blank">https://spectra.video/w/6NZbvCCmukYiPznJdvtCtF</a><a href="https://post.lurk.org/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://post.lurk.org/tags/experimentalpublishing" class="mention hashtag" rel="nofollow noopener" target="_blank">#experimentalpublishing</a> <a href="https://post.lurk.org/tags/declarations" class="mention hashtag" rel="nofollow noopener" target="_blank">#declarations</a>

Paul Houle💌 Better typography with text-wrap pretty<a href="https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/" rel="nofollow noopener" translate="no" target="_blank">https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/</a><a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/www" class="mention hashtag" rel="nofollow noopener" target="_blank">#www</a> <a href="https://mastodon.social/tags/browsers" class="mention hashtag" rel="nofollow noopener" target="_blank">#browsers</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#typography</a> <a href="https://mastodon.social/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#design</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#programming</a>

acidcorrodesso i can make a guide for html/css formatting in posts but i need to know: should it just be the list of tags, how to apply them, and what they do? or do you want more info like "what even is html/css anyway?" let me know <a class="hashtag" href="https://app.wafrn.net/dashboard/search/html" rel="nofollow noopener" target="_blank">#html</a> <a class="hashtag" href="https://app.wafrn.net/dashboard/search/css" rel="nofollow noopener" target="_blank">#css</a> <a class="hashtag" href="https://app.wafrn.net/dashboard/search/i%20dont%20know%20which%20tags%20to%20use" rel="nofollow noopener" target="_blank">#i-dont-know-which-tags-to-use</a>

Frontend DogmaSo, You Want to Give Up CSS Pre- and Post-Processors…, by @zellwk.bsky.social (<a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener" target="_blank">@csstricks</a>):<a href="https://css-tricks.com/so-you-want-to-give-up-css-pre-and-post-processors/" rel="nofollow noopener" translate="no" target="_blank">https://css-tricks.com/so-you-want-to-give-up-css-pre-and-post-processors/</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/preprocessors" class="mention hashtag" rel="nofollow noopener" target="_blank">#preprocessors</a> <a href="https://mas.to/tags/postprocessors" class="mention hashtag" rel="nofollow noopener" target="_blank">#postprocessors</a> <a href="https://mas.to/tags/tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#tailwind</a> <a href="https://mas.to/tags/lightningcss" class="mention hashtag" rel="nofollow noopener" target="_blank">#lightningcss</a>

PPC LandSafari's text-wrap: pretty brings superior web typography: Comprehensive implementation surpasses Chrome in typographic refinement for websites. <a href="https://ppc.land/safaris-text-wrap-pretty-brings-superior-web-typography/" rel="nofollow noopener" translate="no" target="_blank">https://ppc.land/safaris-text-wrap-pretty-brings-superior-web-typography/</a> <a href="https://mastodon.social/tags/WebTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebTypography</a> <a href="https://mastodon.social/tags/Safari" class="mention hashtag" rel="nofollow noopener" target="_blank">#Safari</a> <a href="https://mastodon.social/tags/TextWrap" class="mention hashtag" rel="nofollow noopener" target="_blank">#TextWrap</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDesign</a>

Number6 :syncthing:Hey <a href="https://fosstodon.org/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> experts!I'm looking a some CSS where there are forward slashes ("/") in front of curly braces.This use of slashes is new to me. Or maybe it is something proprietary. Could only google traditional uses of slash inside font specs.Can anyone explain? Sample below --@-moz-document domain("mastodon.social"), domain("fosstodon.org"), domain("peoplemaking.games"), domain("toot.cat"), domain("vt.social") { / { responsiveW1 = 1320px

CSS BasicsExpanding CSS Shadow Effects: "Shadows in <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> can be multi-directional, layered, and are animate-able. On top of being all that, they don’t affect the layout and computed size of an element even though they can make it appear bigger or smaller." <a href="https://frontendmasters.com/blog/expanding-css-shadow-effects/" rel="nofollow noopener" translate="no" target="_blank">https://frontendmasters.com/blog/expanding-css-shadow-effects/</a>

Friday Front-EndModern <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> Theming | Light Mode / Dark Mode and More! "In this video CJ shows some modern CSS features you can use to create a dark / light theme. He shows how to create a CSS only theme switcher and also shows how to save a users theme preference to localStorage." <a href="https://www.youtube.com/watch?v=F1s8MZoGVL8" rel="nofollow noopener" translate="no" target="_blank">https://www.youtube.com/watch?v=F1s8MZoGVL8</a>

BCWHSDigital Toolbox: CSS Is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML/CFML. <a href="https://wadebach.blackcatwhitehatsecurity.com" rel="nofollow noopener" translate="no" target="_blank">https://wadebach.blackcatwhitehatsecurity.com</a> <a href="https://mastodon.social/tags/Digital" class="mention hashtag" rel="nofollow noopener" target="_blank">#Digital</a> <a href="https://mastodon.social/tags/Toolbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#Toolbox</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#programming</a>

CSS BasicsGrid First, Flex Third: "I’ve been mulling this topic for months now, and I’m pretty firmly of the opinion if you are attempting to do some layout in <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>, you should reach for display:grid first, followed by display:block, followed by display:flex." <a href="https://alex.party/posts/2025-03-23-grid-first-flex-third/" rel="nofollow noopener" translate="no" target="_blank">https://alex.party/posts/2025-03-23-grid-first-flex-third/</a>

Friday Front-EndCSS Custom Properties vs. Sass Variables: A Pragmatic Guide: "When to use <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> custom properties vs Sass variables in design systems: runtime theming vs compile-time constants, dynamic flexibility vs immutable foundations." <a href="https://www.alwaystwisted.com/articles/css-vs-sass" rel="nofollow noopener" translate="no" target="_blank">https://www.alwaystwisted.com/articles/css-vs-sass</a>

Mike-麥-Mai-v1.618 😎a tiny codepen for a quick CSS tip. probably old news to some people but i still encounter devs who don't know this little nugget. <a href="https://codepen.io/mikemai2awesome/pen/NPPPozJ" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/mikemai2awesome/pen/NPPPozJ</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</a>

Reilly Spitzfaden (they/them)My IndieWeb blog carnival entry on “renewal”! I talk about reconnecting w/ what I most enjoy about composing & coding, and avoiding treating leisure & projects as if I need to impress someone. <a href="https://reillyspitzfaden.com/posts/2025/04/indieweb-blog-carnival-renewal/" rel="nofollow noopener" target="_blank">reillyspitzfaden.com/posts/2025/0...</a> <a class="hashtag" href="https://bsky.app/search?q=%23IndieWeb" rel="nofollow noopener" target="_blank">#IndieWeb</a> <a class="hashtag" href="https://bsky.app/search?q=%23Blog" rel="nofollow noopener" target="_blank">#Blog</a> <a class="hashtag" href="https://bsky.app/search?q=%23Blogging" rel="nofollow noopener" target="_blank">#Blogging</a> <a class="hashtag" href="https://bsky.app/search?q=%23WebDev" rel="nofollow noopener" target="_blank">#WebDev</a> <a class="hashtag" href="https://bsky.app/search?q=%23WebDesign" rel="nofollow noopener" target="_blank">#WebDesign</a> <a class="hashtag" href="https://bsky.app/search?q=%23Coding" rel="nofollow noopener" target="_blank">#Coding</a> <a class="hashtag" href="https://bsky.app/search?q=%23HTML" rel="nofollow noopener" target="_blank">#HTML</a> <a class="hashtag" href="https://bsky.app/search?q=%23CSS" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://reillyspitzfaden.com/posts/2025/04/indieweb-blog-carnival-renewal/" rel="nofollow noopener" target="_blank">IndieWeb Blog Carnival — “Rene...</a>

Reilly Spitzfaden (they/them)My April IndieWeb blog carnival entry on “renewal”! I often feel compelled to tweak and redesign my website at the expense of other things I value. I talk about reconnecting with what I most enjoy about composing and coding, and avoiding treating my leisure and projects as if I need to impress someone.<a href="https://reillyspitzfaden.com/posts/2025/04/indieweb-blog-carnival-renewal/" rel="nofollow noopener" translate="no" target="_blank">https://reillyspitzfaden.com/posts/2025/04/indieweb-blog-carnival-renewal/</a><a href="https://hachyderm.io/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#IndieWeb</a> <a href="https://hachyderm.io/tags/Blog" class="mention hashtag" rel="nofollow noopener" target="_blank">#Blog</a> <a href="https://hachyderm.io/tags/Blogging" class="mention hashtag" rel="nofollow noopener" target="_blank">#Blogging</a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://hachyderm.io/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDesign</a> <a href="https://hachyderm.io/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#Coding</a> <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>