#css

32 posts27 participants3 posts today

Joaquim HomrighausenIf you were to create a "simple CMS" today, what CSS framework would you choose for the public facing side? 🤔 (And I mean, why would *anyone* create this, today??? Right?)The backend will most likely use Bootstrap (because its actively maintained, it works, and for a number of other reasons).Having support for themes for the public facing side is something that could happen.(No, I won't be using npm to install anything, thank you.)<a href="https://mastodon.online/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.online/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdevelopment</a> <a href="https://mastodon.online/tags/devops" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#devops</a> <a href="https://mastodon.online/tags/cms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cms</a> <a href="https://mastodon.online/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.online/tags/framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#framework</a>

Chat ou PaChaÇa y est, j'ai enfin reçu mes documents de communication ! Une nouvelle aventure commence ! 🐱🐶🐰🐔Pour le lancemt de ma micro-entreprise, j'ai parié sur une <a href="https://piaille.fr/tags/communication" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#communication</a> <a href="https://piaille.fr/tags/alternative" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#alternative</a> et de proximité. Tout est fait main avec des logiciels <a href="https://piaille.fr/tags/libres" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#libres</a> (<a href="https://piaille.fr/tags/Gimp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Gimp</a>, <a href="https://piaille.fr/tags/Inkscape" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Inkscape</a>, <a href="https://piaille.fr/tags/Scribus" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Scribus</a>), garanti sans <a href="https://piaille.fr/tags/IA" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IA</a>. Même le site est codé maison en <a href="https://piaille.fr/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> / <a href="https://piaille.fr/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>. <a href="https://piaille.fr/tags/Mastodon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Mastodon</a> est mon réseau social principal.Alors oui, ça pourrait être plus joli, plus complexe, plus abouti, plus rapide, car je ne suis ni <a href="https://piaille.fr/tags/graphiste" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#graphiste</a>, ni <a href="https://piaille.fr/tags/webdesigner" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdesigner</a>, ni développeuse. Mais c'est le reflet de mon <a href="https://piaille.fr/tags/engagement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#engagement</a>, et j'apprends en chemin.Aidez-moi à le porter, prouvez-moi que ça peut marcher! 🫶 <a href="https://piaille.fr/tags/Sobri%C3%A9t%C3%A9" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Sobriété</a>

Michelle Barkerpopover + @starting-style are pretty dreamy, huh? <a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Angelika CathorMy team is still looking to hire two mid or senior frontend developers, fully remotely from Europe.We're looking for like-minded individuals that share our love of artisanal <a href="https://mas.to/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mas.to/tags/A11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#A11y</a>, web standards, and <a href="https://mas.to/tags/Astro" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Astro</a> On the website team at Storyblok, we build marketing websites *for* Storyblok *using* Storyblok 🙂 (but we don't build the product itself)<a href="https://www.storyblok.com/job?gh_jid=4519673101" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.storyblok.com/job?gh_jid=4519673101</a>

Chip ButtyAny SVG and CSS experts out there know about non JavaScript tooltips for SVG elements? Either styling title or foreignObject?My MDN and ddg skills are failing me.<a href="https://functional.cafe/tags/dataviz" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dataviz</a> <a href="https://functional.cafe/tags/svg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svg</a> <a href="https://functional.cafe/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

LucileDTMy employer, after 7 months of work, fired me overnight. Because I would be too "finicky" about code quality and security risks, which would better suit "a bank or cybersecurity company". So I'm again <a href="https://phpc.social/tags/lookingForJob" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lookingForJob</a>, either at <a href="https://phpc.social/tags/Montpellier" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Montpellier</a> (France) or <a href="https://phpc.social/tags/fullRemote" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fullRemote</a>. I am a <a href="https://phpc.social/tags/fullStack" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fullStack</a> <a href="https://phpc.social/tags/developer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#developer</a> with almost 10 years of experience on <a href="https://phpc.social/tags/php" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#php</a>, <a href="https://phpc.social/tags/symfony" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#symfony</a>, <a href="https://phpc.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a>, <a href="https://phpc.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>, <a href="https://phpc.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> (<a href="https://phpc.social/tags/jquery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#jquery</a> and I'm also learning <a href="https://phpc.social/tags/vue" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vue</a>). I am fluent in English, both written and spoken.<a href="https://phpc.social/tags/FediHire" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FediHire</a>

LucileDTMon employeur, après 7 mois de période d'essai, vient de la rompre du jour au lendemain. Parce que je serais trop "pointilleuse" sur le code et les risques de sécurité, ce qui conviendrait mieux au secteur "de la banque ou de la cybersécurité".Donc <a href="https://phpc.social/tags/jeChercheUnJob" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#jeChercheUnJob</a> à nouveau, sur <a href="https://phpc.social/tags/Montpellier" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Montpellier</a> ou <a href="https://phpc.social/tags/fullRemote" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fullRemote</a>. Je suis <a href="https://phpc.social/tags/developpeuse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#developpeuse</a> <a href="https://phpc.social/tags/fullStack" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fullStack</a> avec presque 10 ans d'expérience professionnelle sur <a href="https://phpc.social/tags/php" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#php</a>, <a href="https://phpc.social/tags/symfony" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#symfony</a>, <a href="https://phpc.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a>, <a href="https://phpc.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>, <a href="https://phpc.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> (<a href="https://phpc.social/tags/jquery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#jquery</a> mais je suis en train de me former sur <a href="https://phpc.social/tags/vue" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vue</a>)

Joe CrawfordI created this page to demonstrate a kanban board using display: grid. The critical thing that allows items moved between columns to "float" to the top is <a href="https://xoxo.zone/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> `grid-auto-flow: column;` <a href="https://lab.artlung.com/kanban/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://lab.artlung.com/kanban/</a> ... I also showed off a version of this today at <a href="https://xoxo.zone/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> Front End Study Hall.

RenéMail jouw kamerlid en partij dat de <a href="https://mastodon.nl/tags/eu" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#eu</a> nu eindelijk eens moet stoppen met het doordrammen van <a href="https://mastodon.nl/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.nl/tags/chatcontrol" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#chatcontrol</a> <a href="https://mastodon.nl/tags/e2ee" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#e2ee</a> <a href="https://mastodon.nl/tags/europa" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#europa</a>Experts bezorgd over plan Brussel: "schaadt gebruik van end-to-end encryptie" <a href="https://www.security.nl/posting/890604/Experts+bezorgd+over+plan+Brussel%3A+%22schaadt+gebruik+van+end-to-end+encryptie%22?channel=rss" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.security.nl/posting/890604/Experts+bezorgd+over+plan+Brussel%3A+%22schaadt+gebruik+van+end-to-end+encryptie%22?channel=rss</a>

Roma KomarovNew blog post: “Functional Capturing”.<a href="https://blog.kizu.dev/functional-capturing/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.kizu.dev/functional-capturing/</a>Chrome currently has an experimental implementation of custom <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> functions in Canary, and also recently shipped `if()` in stable version.In a small series of blog posts, I’ll write about a few things I found interesting in their current prototype implementations.This post is about one feature of custom functions that I will likely use all the time, but which might not be obvious at the first glance.

Mona :frogsleepy: 🌺TIL about <a href="https://en.wikipedia.org/wiki/JavaScript_Style_Sheets" rel="nofollow noopener noreferrer" target="_blank">JavaScript Style Sheets</a>, Netscape's competitor to <a href="https://corteximplant.com/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> in the 90sWhat an incredibly cursed idea :nervous:

Eric A. MeyerWell, I’ve gotten a little further into understanding <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> animation ranges, but there’s stuff happening (either in Chrome’s implementation or in the spec itself, I don’t know yet) that just doesn’t make sense to me. Here’s an example, where three out of four behaviors seem consistent with each other, and the fourth… doesn’t: <a href="https://codepen.io/meyerweb/pen/XJbKXqx" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/meyerweb/pen/XJbKXqx</a>

Justin FerrellAwesome new Shop Talk Show with <a href="https://front-end.social/@jensimmons" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@jensimmons</a>Some really good stuff in here around what’s coming to form styling and working in color in <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a><a href="https://front-end.social/@chriscoyier" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@chriscoyier</a><a href="https://mastodon.social/@davatron5000" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@davatron5000</a><a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://overcast.fm/+ABIJDfb0fEA" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://overcast.fm/+ABIJDfb0fEA</a>

CX-7When your site is allergic to small screens.<a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdevelopment</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mastodon.social/tags/meme" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#meme</a> <a href="https://mastodon.social/tags/funny" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#funny</a>

FRⱯNCIS*I miss Layout Land. No other channel comes close to this kind of content of learning how to do new stuff on the web by looking back into the web's predecessor, namely print layout.And it's not just the technical stuff that Jen Simmons talked about here; she also presented ideas that actually break the mold of boxy rectangle-first layouts. <a href="https://masto.ai/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a><a href="https://www.youtube.com/watch?v=E005mjqpZ9Y&t=99s" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.youtube.com/watch?v=E005mjqpZ9Y&t=99s</a>

NelsonAs Mozilla fumbles <a href="https://jawns.club/tags/Firefox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Firefox</a>, let's reflect on what we'd lose if this unique browser + engine dies.How can I get a list of <a href="https://jawns.club/tags/HTTP" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTTP</a>, <a href="https://jawns.club/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> and <a href="https://jawns.club/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> features that are only supported by Firefox / <a href="https://jawns.club/tags/Gecko" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Gecko</a>? Does caniuse.com or MDN have this? Wikipedia?Only Firefox supports assigning <a href="https://jawns.club/tags/stylesheets" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#stylesheets</a> through HTTP headers: <a href="https://meiert.com/blog/prefer-http-headers/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://meiert.com/blog/prefer-http-headers/</a>Only Firefox supports alternate stylesheets: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet</a>Put these facts together, and you can make a secret stylesheet only for Firefox users.

René<a href="https://digitalcourage.social/@echo_pbreyer" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@echo_pbreyer</a> <a href="https://mastodon.social/@randahl" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@randahl</a> work to do in <a href="https://mastodon.nl/tags/Denmark" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Denmark</a> <a href="https://mastodon.nl/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.nl/tags/chatcontrol" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#chatcontrol</a> <a href="https://mastodon.nl/tags/e2ee" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#e2ee</a>

Ténno Seremél’When light-dark() was still just an idea I thought I wouldn’t need it, since <code>@media (prefers-color-scheme: ...)</code> already existed, but damn, it really reduces clutter in styles. Nice 🐱☕<a href="https://gts.skobk.in/tags/lang_en" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lang_en</a> <a href="https://gts.skobk.in/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Ricardo TavaresEveryone wants to dodge frontend. No one wants to do meaningful tests to materialise what's up with backend (including the silent problems that frontend doesn't show you). So I guess frontend isn't that bad after all? <a href="https://phpc.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://phpc.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://phpc.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://phpc.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

René<a href="https://eupolicy.social/@bert_hubert" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@bert_hubert</a> Wel jammer dat ze gewoon doorgaan met <a href="https://mastodon.nl/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.nl/tags/chatcontrol" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#chatcontrol</a> in een nieuw jasje. Vele malen afgewezen maar ze blijven doordrammen. Dat gaat ten koste van de steun en geloofwaardigheid van de <a href="https://mastodon.nl/tags/eu" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#eu</a> <a href="https://mastodon.nl/tags/europe" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#europe</a> als geheel.

Recent searches

Search options

Administered by:

Server stats: