The CSS field-sizing property offers a powerful and concise way to create form elements that dynamically adjust their size based on their content, eliminating the need for complex JavaScript.
Mind Map
Klik untuk perbesar
Klik untuk menjelajahi mind map interaktif lengkap
this is incredibly difficult to build an
input that grows in size based on the
amount of content in it requires a ton
of JavaScript and math and you're
looking at hundreds of lines of code
just to make this single input that is
until the brand new CSS field sizing
property came out which lets me do all
of this complicated JavaScript in one
single line of code in this video I'm
going to show you what that property is
all the different edge cases related to
and the really cool things that it can
do welcome back to web dev simplified my
name is Kyle and my job is to simplify
the web for you so you can start
building your dream project sooner and
to demonstrate how this property works I
just have a couple inputs on our page
cuz it works differently with different
types of inputs we have a standard text
input and that's going to kind of take
the place of like email and all the
other standard text style inputs then we
have a select box and finally we have a
text area and right now the only CSS
styles that I have being applied to this
entire project is just some styles on
the actual input group itself just to
stack these vertically over top of each
other but the actual input select and
text area have absolutely no CSS being
applied to them at all so now what I
want to do is I want to add this brand
new property to show you how it works by
default so we can select our input our
select and our text area and all I'm
going to do is add that field sizing
property now this field sizing property
takes two values fixed is the default
where it's a fixed size element and then
content is the new property that's being
added to this and that essentially
allows it to scale to the size of the
content inside of it and I want I save
you'll notice something kind of
interesting happens our bio down here
shrinks down to essentially one pixel
wide it shrinks down to the exact same
size as our cursor and that's the
default Behavior if you don't have any
width a minimum or maximum set on an
element it's just going to shrink down
to the smallest possible size for the
element and if we have a placeholder you
can see it shrinks down to the size of
that placeholder but as soon as I put
some text inside of here it's now just
going to be exactly the same size as the
text that I have inside of here and then
of course when I have no text it'll be
that placeholder size and then our
select box here changed slightly you may
not have noticed it but now no matter
what element I select it's actually
going to change the size of my select
box to fit the size of that element
while when I had this property the way
it was before my select Box is always
the size of my largest element inside of
it so it's always going to be the same
width as this moderator but when I say
that the field sizing should be content
it's not going to be based on whatever
the size of the currently selected
element is instead of the largest one
now obviously this isn't super useful
unless we actually give it some minimum
and maximum sizes so generally what
you're going to want to do if you want a
normal input that expands in width
you're going to want to give it a
minimum width so we'll come in here with
our input element and we'll say that
we're going to have a minimum width and
let's just say we want our minimum width
to be 100 pixels now no matter what my
element is always going to be at least
100 pixels wide and as I type inside of
it as it gets larger than 100 pixels you
can see the width of this container just
grows and grows and grows and it's
actually going to keep growing off the
edge of my page I generally don't want
that so a maximum width of 100% is
probably something that you want so it
stays within the bounds of its parent
container now it'll always be at least
100 pixels wide and as I fill more
content inside of it it's going to grow
until eventually it's too large to fit
in its container and then it'll actually
become scrollable like like a normal
input would be now personally I find
that this field sizing content is only
somewhat useful on standard inputs
because generally you don't need scaling
sized inputs they're just going to be
100% with all the time and again they're
not super useful on select elements
because I don't generally like the size
of my select element changing based on
the content inside of it I just want it
to be one size all the time where this
really comes in effect is the text area
that's where I find this the most useful
so let's come in here with a text area
and see how this actually works because
it not only grows horizontally but it'll
also grow vertically as well so let's
come in here we'll say our minimum width
is 100 pixels and let's say our maximum
width to just be 300 pixels so we can
see this without me having to type in so
much text so by default we just have one
row of 100 pixel wide text and if we
grow this past 300 pixels you can see
it's going to wrap on the next line I
can hit enter a few times and again it's
going to wrap on to the next line and
it's just going to constantly be
wrapping and filling however much space
I need you can see here my text area is
just as large as it needs to be to fit
my content and as soon as I delete it
down you can see it shrinks down
generally when I'm using a text area
what I do is I just hard code the width
to be something like 100% And now I just
have a text area that grows in height
based on how much content I have inside
of it and a lot of times I may come in
here with like a height of three RM and
actually I want to make sure that's a
minimum height so that I can grow beyond
that and now it's going to look like a
general text area but you can see it
actually is able to grow beyond that
based on the amount of content inside of
it now this already covers a lot of the
content that you need to know about the
field sizing property there's a few
extra things you should probably know
about it specifically related to some
things with validation so let's say we
have an input here and let's say I
specify a Mac max length of 10 that
means I can have at most 10 characters
inside of here well this is actually
going to use that property for field
sizing and it's going to make sure it's
stops growing as soon as I get to that
maximum length so it's com in here 1 2 3
4 5 6 7 8 9 10 and as soon as I try to
type anything else you notice my box is
just going to stop at that exact size no
matter what other content I try to type
nothing else is going to get put inside
of there and if I take a bunch of
content that's much longer than 10
characters and I past it inside of here
you see it's only keeping those first 10
characters and again a lot of that is to
do with that max length property but
again our size is never going to be
larger than this particular max length
cuz I can't put any additional content
inside it here another really important
thing to note is how this actually works
with browser support because right now
it's only supported in chromian based
browsers that means Chrome Edge and so
on it's not supported in Firefox or
Safari which is a bit of a bummer but
the nice thing about this is in many
cases this is considered a progressive
enhancement imagine that you had a form
just like this where you had a bio field
that people could type some information
inside of and normally if you didn't
have your field site
you know you would just have this
minimum height of 3 RM maybe You' make
it a little bit larger we'll say 5 RM
and you can see we can type about five
lines of text inside here before it has
to create a scroll bar this is generally
fine for most users but if they're using
a chromium based browser and they have
this field sizing property able to be
used now this actual box can fill in
whatever size they need based on the
content they type inside of it so it's a
really great Progressive enhancement
where you can throw it into your site
even if the person's browser doesn't
support it it just pretends that this
doesn't exist and you get a normal text
area that Scrolls while if it does exist
you can see you get this nice growing
text area so this is a really great way
to add this Progressive enhancement to a
lot of different sites and you don't
have to write tons of JavaScript to do
this because in the past this would take
hundreds of lines of JavaScript to do
right and now it's just one single line
of CSS now if you want to stay up to
date with all the latest and greatest
CSS features I highly recommend checking
out my CSS simplified course it covers
everything you need to know about CSS
from an absolute beginner all the way up
to Advanced and intermediate Concepts
even bleeding edge brand new CSS
Concepts I'm going to link that course
down in the description for you again I
highly recommend you check it out if you
want to learn and master CSS with that
said thank you very much for watching
Klik teks atau cap waktu mana pun untuk melompat ke momen tersebut dalam video
Bagikan:
Sebagian besar transkrip siap dalam waktu kurang dari 5 detik
Salin Satu Klik125+ BahasaCari KontenLoncat ke Cap Waktu
Tempel URL YouTube
Masukkan link video YouTube apa saja untuk mendapatkan transkrip lengkap
Formulir Ekstraksi Transkrip
Sebagian besar transkrip siap dalam waktu kurang dari 5 detik
Pasang Ekstensi Chrome Kami
Dapatkan transkrip seketika tanpa meninggalkan YouTube. Pasang ekstensi Chrome kami untuk akses satu klik ke transkrip video apa pun langsung di halaman tontonan.
