patrickbrosset, to CSS
@patrickbrosset@mas.to avatar

Have you used CSS Subgrid?

Looking at the comments that people left about it in the State of CSS survey 2023, I see mostly negative comments. 3 broad themes:

  1. Lack of cross-browser support.
    This is no longer a problem! Subgrid is implemented in all engine as of Chrome/Edge 117.

  2. Complexity/lack of good docs.
    Do you feel this too?

  3. Lack of actual use cases for it.

mayank, to CSS
@mayank@front-end.social avatar

this is a @kizu appreciation post.

the more i play with cyclic toggles, the more i grow to love it. it's so fucking useful! https://kizu.dev/cyclic-toggles/

mia, to CSS
@mia@front-end.social avatar

Many teams are still using decade-old approaches and third-party tools for layout. That's not just extra work, but will leave you with less reliable results.

Join my new Cascading Layouts online workshop at the end of June!

https://www.youtube.com/watch?v=9EDOzJJdxWA

Registration is open https://www.oddbird.net/workshops/cascading-layouts/

mobileatom, to webdev
@mobileatom@flipboard.com avatar
noleli, to CSS
@noleli@mastodon.social avatar

I told myself I’d try to blog at least once per calendar month, so here’s yet another take on breakout layouts in . Why are we still talking about this in 2024? I don’t know, but here we are. https://noahliebman.net/2024/05/yet-another-take-on-layout-breakouts/

A window being resized with a breakout item and an edge-to-edge item.

mia, to CSS
@mia@front-end.social avatar

Doing another @OddBird livestream tomorrow with @Jamessw to explore Anchor Positioning! What can it do, and when can we start using it?

Join us tomorrow at 10am PT (1pm ET) on youtube:

https://www.youtube.com/live/76hIB2L_vs4

mia, to CSS
@mia@front-end.social avatar

Going live with @Jamessw in 10 minutes to explore the new Anchor Positioning features!

https://www.youtube.com/live/76hIB2L_vs4

j9t, (edited ) to webdev
@j9t@mas.to avatar

I’m planning and preparing a new book, about rote learning HTML and CSS. (Will add the draft cover!)

Double question!

  1. Is “rote learning” clear?

  2. Would you be interested in such a book?

nhoizey, to CSS French
@nhoizey@mamot.fr avatar

How should I read the values for box-shadow-position in the formal syntax of box-shadow on MDN?

It says <box-shadow-position> = [ outset | inset ] which I read as: the value is either outset or inset. But I know outset is not supported. It is the default behavior, not the default value.

Maybe I need a documentation of these formal syntaxes… 😅

#CSS #MDN

⚓️ https://nicolas-hoizey.com/notes/2024/05/29/1/

stvfrnzl, to Astro
@stvfrnzl@mastodon.online avatar

In case you're using it: I've updated my @astro starter template to the latest #astro version.

https://astro-naut-template.vercel.app/

Also the external link component got a small, but important update. 🤗

#WebDev #Frontend #HTML #CSS #JavaScript

opdavies, to CSS
@opdavies@mastodon.social avatar
css, to CSS
@css@front-end.social avatar

🎮 New CSS Game!

What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality!

Play "Super CSS Mario", the first ever CSS-Only game playable using your keyboard. Have fun! 🤩

✅ 0% JavaScript
✅ 100% CSS Magic

Demo: https://codepen.io/t_afif/full/OJYbVWP via :codepen: @codepen

Record yourself and show me your best attempt (No screenshots & no cheating 😈)

It's a Chrome (or Edge) only. I repeat, it's a Chrome-only experience.

#CSS #HTML #game

Showing a demo of the CSS-only game linked in the post. A cool Mario game where you can collect gold coins using Keyboard.

css,
@css@front-end.social avatar

Ready for "Super CSS Mario II"? This time it's more challenging because you have to avoid some enemies 😬

0% JavaScript, 100% CSS magic & 100% addictive!

Demo: https://codepen.io/t_afif/full/JjqEdJv via :codepen: @codepen

Show me your best attempt 👇

#CSS #HTML

aral, to SmallWeb
@aral@mastodon.ar.al avatar

So Kitten’s build process (i.e., the time it takes to build Kitten itself) takes ~0.7 seconds on my ~1 year old desktop (Ryzen 7 5700G 3.8Ghz) vs ~1.4 seconds on my ~3-year-old Starlabs LabTop (renamed to the Starbook thanks to a suggestion by yours truly but sadly, not quickly enough).

So, in summary, it’s bloody fast for something that results in a ~9MB bundle.

(And that’s all thanks to esbuild.)

https://codeberg.org/kitten/app

aral, (edited )
@aral@mastodon.ar.al avatar

Note that when you’re working with Kitten, your apps do not have a build process.

You write HTML, CSS, JavaScript and, optionally, extend using first-class support for htmx and alpine.js as well as Kitten’s own Streaming HTML workflow¹. There’s also no scaffolding or generating a project with hundreds of files or anything. You just write the code for your app.

¹ https://ar.al/2024/03/08/streaming-html/

khalidabuhakmeh, to blazor
@khalidabuhakmeh@mastodon.social avatar

I'm back to playing with #Blazor and #HTMX with the @egil Htmxor library. The Counter sample is nice and clear.

He has something exciting here for the #aspnetcore and #dotnet audience.

Check it out! https://github.com/egil/Htmxor

THe counter sample running in a browser with a current count of 12

aral,
@aral@mastodon.ar.al avatar
antran22, to CSS French
@antran22@mastodon.social avatar

Can somebody really sell me Tailwindcss. This is the 3rd time I tried it and it still doesn't click for me.

#tailwind #frontend #css

symfonystation, to Symfony
@symfonystation@newsletter.mobileatom.net avatar
5t3ph, to CSS
@5t3ph@front-end.social avatar

Beware of dragons at the spicy edges of modern .

Familiarize yourself with "invalid at computed value time" and make use of support queries!

If using partially supported features, mix with caution and don't slip on browser testing or assume your browserslist-reliant tooling is sufficient.

scoonch, to photoshop French
@scoonch@mamot.fr avatar

Dev Web fullstack, je termine un long CDD en fin de semaine. Je suis donc libre à partir du 3 juin.

CDI distanciel de préférence sinon je m'adapte, je suis à Paris.

Compétences en +:
Maquettiste #Photoshop #Illustrator,
Monteur vidéo #Premiere, #Avid,
Habillage/Animation #AfterEffect

CV dispo en mp.

#HTML #CSS #PHP #JS #jQuery #Scss #Symfony #React #NextJs #ViteJs #Bootstrap #Tailwind #Stripe #dataTables #Wordpress #Prestashop #Sylius #MongoDb #Mariadb #aws #debian #Vi #bash #English

teodorsandu, to Funny
@teodorsandu@mastodon.online avatar
christian, to 11ty
@christian@aldr.social avatar

I'm taking a bit more time with my #11ty starter kit upgrade.

Along with moving away from SASS/SCSS, I have decided to learn and lean into the CUBE CSS methodology once and for all 💪

I keep seeing it pop up from developers I admire and now would be a perfect time to give it a spin.

Not sure if I'll also delve into design tokens just yet 👀 but maybe.

https://cube.fyi/

#CSS #Frontend

christian,
@christian@aldr.social avatar

Also this: https://every-layout.dev/

Lots of learning to do 📖

khalidabuhakmeh, to CSS
@khalidabuhakmeh@mastodon.social avatar

I hard-coded in a style attribute, and I’m not even sorry about it.

iamdtms, to CSS
@iamdtms@mas.to avatar

cory, (edited ) to webdev
@cory@social.lol avatar

🔗: Old Dogs, new CSS Tricks via Max Böck #WebDev #CSS https://mxb.dev/blog/old-dogs-new-css-tricks/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • megavids
  • thenastyranch
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • provamag3
  • magazineikmin
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • anitta
  • Leos
  • tester
  • JUstTest
  • All magazines