#Tag · bonfire.cafe

Another great new CSS feature that is starting to be available in more browsers is field-sizing, which allows you to size an input to fit its value with:

field-sizing: content;

Great for UI like tags, where you want to be able to type directly into them and have them automatically resize to fit the text.

( #CanIUse shows the feature as not being available in Safari Technology Preview, even though all the individual child features show that it is available)

#Interop #WebCompat #CSS

A screenshot of a simple example of using a series of inputs with field-sizing: content in a list to create a tag user interface, where each tag can be directly edited and automatically resizes to fit the amount of text that is inside it.

eurozerozero

@eurozerozero@mastodon.social · yesterday

Another great new CSS feature that is starting to be available in more browsers is field-sizing, which allows you to size an input to fit its value with:

field-sizing: content;

Great for UI like tags, where you want to be able to type directly into them and have them automatically resize to fit the text.

( #CanIUse shows the feature as not being available in Safari Technology Preview, even though all the individual child features show that it is available)

#Interop #WebCompat #CSS

Shauna GM boosted

Justin Ferrell

@developerjustin@mastodon.social · 3 days ago

It’s not often that a #CSS demo makes me say “No f***** way!” out loud but @chriscoyier got it out of me with this new random() demo.

Genuinely floored.

#WebDev

https://frontendmasters.com/blog/more-css-random-learning-through-experiments/

Jan :rust: :ferris: boosted

GitRoot

@forge@gts.gitroot.dev · 3 days ago

Tonight I wasn't in a mood to Dev. Nothing to do with the big crash of today (I was not impacted 😆).

No I was in a mood to ask for help, so I have written a blog post https://gitroot.dev/blog/how-to-help_en_11-2025.html

There are tasks for everyone from fixing typos to development in #golang #typescript or #rust and also for #sysadmin in #bash or #web #css

If you are ready to dev join the GitRoot channel in #matrix as explained in the article!

Please boost to get more help!

Roni Rolle Laukkarinen boosted

Ana Tudor 🐯

@anatudor@mastodon.social · 3 days ago

I am begging you, please don't split your heading into two separate `h2` elements with an `img` in between just to have the image in between your heading words.

This is what subgrid was made for!

#CSS #layout #cssLayout #code #coding #web #dev #webDev #webDevelopment

HTML:

```
<!-- ❌ DON'T DO THIS 🚫 -->
<section>
<h2>Classic</h2>
<img src='classic-bar.png' alt=''/>
<h2>Flavour</h2>
</section>

<!-- ✅ DO THIS ✅ -->
<section>
<h2>
<span>Classic</span>
<span>Flavour</span>
</h2>
<img src='classic-bar.png' alt='the classic chocolate bar'/>
</section>
```

CSS:

```
section, h2 { display: grid }

section { grid-template-rows: repeat(3, auto) }

h2 {
grid-area: 1/ 1/ span 3;
grid-template-rows: subgrid;

span:last-child { grid-row: 3 }
}

img { grid-area: 2/ 1 }
``` — HTML: ``` <!-- ❌ DON'T DO THIS 🚫 --> <section> <h2>Classic</h2> <img src='classic-bar.png' alt=''/> <h2>Flavour</h2> </section> <!-- ✅ DO THIS ✅ --> <section> <h2> <span>Classic</span> <span>Flavour</span> </h2> <img src='classic-bar.png' alt='the classic chocolate bar'/> </section> ``` CSS: ``` section, h2 { display: grid } section { grid-template-rows: repeat(3, auto) } h2 { grid-area: 1/ 1/ span 3; grid-template-rows: subgrid; span:last-child { grid-row: 3 } } img { grid-area: 2/ 1 } ```

Justin Ferrell

@developerjustin@mastodon.social · 3 days ago

It’s not often that a #CSS demo makes me say “No f***** way!” out loud but @chriscoyier got it out of me with this new random() demo.

Genuinely floored.

#WebDev

https://frontendmasters.com/blog/more-css-random-learning-through-experiments/

GitRoot

@forge@gts.gitroot.dev · 3 days ago

Ana Tudor 🐯

@anatudor@mastodon.social · 3 days ago

I am begging you, please don't split your heading into two separate `h2` elements with an `img` in between just to have the image in between your heading words.

This is what subgrid was made for!

#CSS #layout #cssLayout #code #coding #web #dev #webDev #webDevelopment

Jack

@knapjack@elsewhere.cozysumo.space · 6 days ago

Anyone know of an easy way to do A/B font testing in #CSS? Trying to compare my existing Inclusive Sans with Atkinson Hyperlegible on my snac instance.

I have a tendency to read on my phone, sometimes without my glasses, and Inclusive Sans has made a big difference. Now wondering if Atkinson Hyperlegible will make even more of a difference. #OldPeopleProblems

O.K.

Inclusive Sans — O.K.

Inclusive Sans is a text typeface designed for legibility and readability. It’s available as an Open Source project, free for use on Google Fonts.

View

Claudius Link boosted

Max Almonte

@maxalmonte14@indiehackers.social · 3 weeks ago

#WebDev 101: The purple rectangle represents The Paddington Bear while the yellow rectangle represents The Marginton Bear.

#HTML #CSS

A picture of The Paddington Bear enclosed by three rectangles, resembling the box model of an HTML element visible via a web browser's developer tools. The smallest rectangle is purple and it has the word "padding" written in white letters, the biggest one is yellow with the word "margin", and the one in the middle is black and slim with the word border.

hypebot boosted

Tyler Sticka

@tylersticka@social.lol · last week

I’ve seen one-time passcode (“OTP”) interfaces cause undue stress in otherwise level-headed #WebDev teams.

Thankfully, it doesn’t have to be complicated: https://cloudfour.com/thinks/simple-one-time-passcode-inputs/

#HTML #CSS #JavaScript

Cloud Four

Simple One-Time Passcode Inputs

Fully functional OTP entry may be easier than you think.

⁂

More from

Tyler Sticka

Jared White (ResistanceNet ✊) and 1 other boosted

Jared White (ResistanceNet ✊)

@jaredwhite@indieweb.social · 2 weeks ago

Hello #WebDev friends!

I'm hosting an #AMA today at Human Web Collective! I’ll start answering questions at 12pm Pacific Time, so ask away. Topics for discussion:

* “Vanilla” frontend techniques
* #WebComponents
* #CSS architecture/design systems/etc.
* Coding practices free from slop
* #HTML Frameworks / site generators
* Hosting
* What I had for breakfast

and more!

You can use/create your HWC account (preferred) or paste this in your fedi search for direct replies:

https://humansare.social/c/indie_web_dev/p/992/ama-about-indie-web-dev-november-2025-edition

Jared White (ResistanceNet ✊)

@jaredwhite@indieweb.social · 2 weeks ago

Hello #WebDev friends!

I'm hosting an #AMA today at Human Web Collective! I’ll start answering questions at 12pm Pacific Time, so ask away. Topics for discussion:

and more!

You can use/create your HWC account (preferred) or paste this in your fedi search for direct replies:

https://humansare.social/c/indie_web_dev/p/992/ama-about-indie-web-dev-november-2025-edition

IFTAS and 1 other boosted

Roni Rolle Laukkarinen

@rolle@mementomori.social · 2 weeks ago

Mastodon Bird UI v3.0.0 is now released! 🎉

Most notable changes:
- Support for Mastodon stable 4.5.0
- Fix profile links and alignment
- Re-style Quote Posts
- Improved UI for the new quote posts popper
- Improve status__quote--error being to high, update min-height
- Remove the separator dot redundant since 4.3
- Fix performance-expensive transitions
- Fix audio embed overflow
- Improve the accesibility of modals

Full changelog and download: https://github.com/ronilaukkarinen/mastodon-bird-ui/releases/tag/3.0.0

#MastodonBirdUI #BirdUI #Mastodon #MastoAdmin #CSS #UI #OpenSource

GitHub

Release 3.0.0 · ronilaukkarinen/mastodon-bird-ui

3.0.0: 2025-11-07 Note⚠️ Compatibility: This release supports v.4.5.0 and v4.6.0-alpha.0 (2025-11-07) This version will not support Mastodon versions prior v4.5.0! (2025-11-06) For older Mastodon s...

Mastodon Bird UI phone mockup, closeup of an iPhone, text: "Mastodon Bird UI 3.0.0"

fedicat boosted

Federation Bot

@Federation_Bot · 6 months ago

This took longer than expected. Pretty cool that it works.

Post featured in video: https://tapbots.social/@mark/114617305665385240

#PhanpySocialDev #CSS #ViewTransitions

GIF

Roni Rolle Laukkarinen

@rolle@mementomori.social · 2 weeks ago

Opened an issue to Mastodon Bird UI: Major rewrite: migrate to SCSS + Parcel for Mastodon's new CSS custom properties system https://github.com/ronilaukkarinen/mastodon-bird-ui/issues/172

I don't have time to work on this for a while, but I already have a plan.

#MastodonBirdUI #BirdUI #CSS #MastoAdmin #Mastodon #SCSS #OpenSource

Jesse Jurman

@jrjurman@fosstodon.org · 2 weeks ago

I realize it has been a long bit since I've put some Web Components together. This one is a pattern I've used in a few apps a long while ago, and now I've finally gotten around to putting them into an easy-to-use component. I'm really happy with the mostly CSS-only solution here too!

https://github.com/JRJurman/scrollable-cards

#WebDev #WebComponents #CSS