Discussion
Loading...

#Tag

  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Jonathan Schofield boosted
eurozerozero
@eurozerozero@mastodon.social  ·  activity timestamp 2 days ago

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.
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.
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.
  • Copy link
  • Flag this post
  • Block
eurozerozero
@eurozerozero@mastodon.social  ·  activity timestamp 2 days ago

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.
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.
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.
  • Copy link
  • Flag this post
  • Block
Log in

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances
Bonfire social · 1.0.0 no JS en
Automatic federation enabled
  • Explore
  • About
  • Members
  • Code of Conduct
Home
Login