CSS Just Got Smarter – Field Sizing!
Replace 100 lines of CSS code with one value
I am a Full-stack dev turning ideas into sleek, functional experiences 🚀. I am passionate about AI, intuitive UI/UX, and crafting user-friendly platforms . I am always curious – from building websites to diving into machine learning and under the hood workings ✨. Next.js, Node.js, MongoDB, and Tailwind are my daily tools. I am here to share dev experiments, lessons learned, and the occasional late-night code breakthroughs. Always evolving, always building.
There is a value which can be assigned to field-sizing.
This property is particularly useful when there is a text input field which grows larger, as per content in it.
Previously required 100 lines of code now replaced by single line of code.
The magic of => Field sizing : content
Code with min width and max width.
input,
textarea {
field-sizing: content;
min-width: 50px;
max-width: 350px;
}
label {
width: 150px;
margin-right: 20px;
text-align: right;
}
- You can see it in many of the latest ai chat websites, like chatgpt,gemini
For more check : https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
