CSS

Proprietatea css width este responsabilă pentru lățimea zonei care conține conținutul elementului.

Latime: valoare | interes | auto | moşteni

Proprietatea înălțime css este responsabilă pentru valoarea înălțimii zonei care conține conținutul elementului.

Înălțime: valoare | interes | auto | moşteni

Nu sunt permise valori negative pentru înălțime și lățime.

S-ar părea că cu aceste proprietăți CSS totul este simplu și clar, dar, de fapt, totul se dovedește a nu fi chiar atât de simplu.

Setarea lățimii unui element pe o pagină web folosind proprietatea width la 500px nu înseamnă că lățimea totală a acestui element va fi de 500 pixeli și nu mai mult.

Cel mai important lucru de înțeles este că proprietățile de lățime și înălțime stabilesc valorile de lățime și înălțime pentru zona de conținut.

Proprietățile de lățime și înălțime sunt doar una dintre componentele din care vor fi calculate lățimea și înălțimea totală a elementului. Acestea indică lățimea și înălțimea zonei de conținut, care poate fi văzută în imaginea următoare. De asemenea, proprietăți precum umplutura, marginea și chenarul participă la formarea lățimii și înălțimii totale.

Puteți verifica cu ușurință acest lucru acum.

Să luăm, de exemplu, două blocuri cu aceeași lățime, dar să dăm unuia dintre ele o proprietate suplimentară de umplutură.

latime: 100px

lățime: 100px + umplutură

În mod implicit, paginile web au comportamentul că valoarea de umplutură pentru partea corespunzătoare este adăugată la valorile înălțimii și lățimii.

Acestea. Lățimea totală a elementului va consta din valoarea proprietății lățime a elementului și va fi completată cu valorile padding-left și padding-right.

Pentru tipuri diferite elemente care pot fi găsite pe pagină, lățimea și înălțimea totală a elementelor sunt calculate folosind formule speciale.

Pentru diferite tipuri de elemente care pot fi găsite pe paginile web, valorile lățimii și înălțimii pot avea un comportament și semnificații diferite.

O situație similară se va întâmpla cu proprietatea înălțime.

înălțime: 100px

înălțime: 100px + umplutură

CSS are un algoritm special care calculează valorile lățimii și înălțimii pentru elemente diferite pe pagina web. Nu mă voi opri acum asupra acestui algoritm, pentru că... este oarecum complicat.

Acum, principalul lucru pe care trebuie să-l înțelegem este că proprietățile de lățime și înălțime vă permit să lucrați cu lățimea și înălțimea zonei cu conținutul elementului, și nu cu lățimea și înălțimea totală a elementului.

Pentru ca un obiect să primească o lățime și o înălțime specifice, există două proprietăți în CSS - lățime și înălțime (respectiv). Cu ajutorul lor, puteți seta dimensiuni fixe pentru elemente, fie că este o bară laterală, imagine, tabel sau orice bloc.

Caracteristici de calcul a lățimii și înălțimii

Puteți utiliza orice unitate de lungime în CSS pentru a defini lățimea sau înălțimea unui obiect. Pixelii sunt cel mai ușor de înțeles. Dacă utilizați notația procentuală, rețineți că lățimea obiectului va depinde de lățimea părintelui său. Dacă nu există, atunci lățimea elementului este calculată pe baza lățimii ferestrei browserului (dacă utilizatorul modifică lățimea ferestrei, valoarea lățimii va fi recalculată).

De asemenea, puteți utiliza unitatea em ca valoare a lățimii, care este aproximativ aceeași cu dimensiunea fontului textului, dar numai în unități convenționale. De exemplu, setați dimensiunea fontului la 24 px. Atunci 1em pentru acest element va fi egal cu 24px, iar dacă setați lățime: 2em, atunci lățimea va fi 2x24px = 48 pixeli. Dacă dimensiunea fontului nu este setată, acesta va fi moștenit.

Înălțimea, specificată ca procent, este calculată în același mod ca lățimea, dar calculul se bazează mai degrabă pe înălțimea elementului părinte decât pe lățimea acestuia. Dacă nu există niciun părinte, înălțimea va depinde de înălțimea ferestrei browserului.

Procent latime si inaltime element copil calculat pe baza mărimii părintelui

Ce este inclus în lățime și înălțime

Merită să ne amintim imediat că proprietățile de lățime și înălțime au o particularitate - ele nu includ valorile marjei, umpluturii și chenarului. Valoarea pe care o setați pentru lățime/înălțime va indica doar lățimea/înălțimea zonei de conținut a elementului.

Deci, pentru a calcula, de exemplu, lățimea reală a unui element (spațiul pe care îl va ocupa de fapt pe ecran), este necesară puțină aritmetică. Lățimea reală este suma valorilor precum lățimea, umplutura, chenarul și marginea. Amintiți-vă că ne-am uitat anterior cum arată modelul casetei CSS.

Pentru a consolida cunoștințele, vom arăta un exemplu. Să presupunem că aveți un element cu acest stil:

Latime: 200px; margine-stânga: 15px; margine-dreapta: 15px; padding-stânga: 10px; chenar-stânga: 3px solid #333;

Pentru a calcula lățimea reală a elementului, efectuați adăugarea:

lățime + margine-stânga + margine-dreapta + padding-left + chenar-stânga = 200px + 15px + 15px + 10px + 3px = 243 px (lățime reală)

Proprietatea înălțime poate fi utilă dacă trebuie să controlați cu precizie, de exemplu, înălțimea unei imagini. Cu toate acestea, dacă containerul va conține text sau orice alt conținut care poate varia în înălțime, nu este recomandat să setați o înălțime fixă pentru container, deoarece un astfel de aspect poate duce la un rezultat neașteptat - conținutul va fi afișat în partea de sus. de alt continut.

În loc de o înălțime fixă, utilizați înălțime: auto - această intrare înseamnă că înălțimea obiectului va fi calculată automat, în funcție de conținutul pe care îl conține.

O altă modalitate de a evita colapsul aspectului este să utilizați overflow: notație automată. În acest caz, dacă înălțimea conținutului depășește înălțimea containerului său, browserul va adăuga o bară de derulare în container.

În lecția următoare veți afla cum puteți suprascrie lățimea unui element folosind o proprietate interesantă și foarte utilă

Majoritatea elementelor din HTML primesc de obicei o înălțime și o lățime specifice. Setarea acestor parametri în CSS este destul de ușoară și, prin urmare, practică. Pentru aceasta, sunt utilizate proprietățile de înălțime și lățime deja cunoscute de dvs. Cu toate acestea, în această lecție vom vorbi și despre lățimea și înălțimea nefixate sau cauciuc, adică în funcție de lățimea ferestrei în sine. Să începem)

lăţime

Această proprietate setează o lățime specifică pentru elementul HTML. Valoarea poate fi specificată în pixeli, procente (alte valori sunt utilizate mai rar).

Blocul meu(
latime: 400px; /* latime 400 pixeli */

}
Sau ca procent:

MyBlockPercent50 (
latime: 50%; /* lățime 50% din lățimea blocului sau ferestrei (dacă nu este în interiorul unui bloc cu lățime fixă) */
culoare: #f1f1f1; /* bloc gri deschis */
}
În consecință, obținem un bloc care va avea întotdeauna jumătate din lățimea părintelui.

Acum despre partea cea mai interesantă. width are parametri care specifică lățimea maximă sau minimă. Acestea sunt proprietățile lățimii minime și, respectiv, lățimii maxime. De asemenea, puteți specifica valori pentru ele în pixeli, procente și alte valori. Aceste proprietăți sunt baza pentru crearea de modele fluide și adaptative ().

Exemplu design adaptiv . Uite, redimensionează fereastra browserului:

Desigur, m-am devansat. Dar trebuie să înțelegeți ce este necesar și de ce. Da, și atingeți rezultatul plăcut)

După cum ați înțeles deja, cu ajutorul acestor proprietăți puteți gestiona mai flexibil elementele din pagină fără a distorsiona conținutul. Cum functioneaza? Să ne uităm la cod.

Bloc (
lățime maximă: 800px;
culoare de fundal: #f1f1f1; /* bloc gri deschis */
umplutură: 20px;
}
Un bloc cu aceste proprietăți cu o lățime părinte de 200 de pixeli va lua valoarea corespunzătoare, dar dacă blocul părinte este mai mare, de exemplu, 1000 de pixeli, atunci va lua deja lățimea maximă, adică 800 de pixeli. Adică, va crește până când lățimea blocului părinte este de 801 pixeli sau mai mult. În plus, blocul bloc va avea întotdeauna lățimea maximă permisă de 800 de pixeli.

înălţime

Această proprietate este responsabilă pentru înălțimea elementului. Valorile folosite sunt aceleași potrivite pentru CSS. Cel mai adesea aceleași procente și pixeli.

Informații (
înălțime: 200px; /* înălțimea blocului va fi de 200 de pixeli */
umplutură: 10px; /* repetă despre indentări din interiorul blocului =) */
}
Ceea ce este logic, pentru înălțime puteți specifica valorile minime și maxime ale înălțimii pentru un element cu proprietățile min-height și, respectiv, max-height.

Informații (
înălțime maximă: 360px; /* înălțimea maximă a blocului */
înălțime minimă: 120px; /* înălțimea minimă a blocului */
}
După cum puteți vedea, proprietățile pot și adesea ar trebui să fie utilizate în perechi.
Sau combinați valorile:

Continut (
inaltime: 100%; /* înălțimea va fi întotdeauna 100% */
latime: 760px; /* dar lățimea este fixă 760 pixeli */
}
Dacă aveți întrebări, scrieți în comentarii!

Vă mulțumim pentru atenție! Succes cu aspectul!)

Bună ziua, dragi cititori! Astăzi ne vom uita la cum să setăm dimensiunile elementelor bloc pe o pagină web folosind proprietăți cssși configurați afișarea conținutului dacă nu se încadrează în element.

lățime și înălțime - lățimea și înălțimea elementelor în css

Folosind atributele de stil lățime și înălțime, puteți seta lățimea și înălțimea elementelor bloc, respectiv:

latime: auto|<ширина>|moştenire
inaltime: auto|<ширина>|moştenire

Ca valori, puteți utiliza orice unități de măsură disponibile în css - de exemplu, pixeli (px), inci (in), puncte (pt) etc.:

p (lățime: 200 px; înălțime: 150 px)

Pe lângă unitățile absolute, puteți seta dimensiunea relativă a elementelor ca procent. În acest caz, lățimea și înălțimea elementului vor depinde de lățimea și înălțimea elementului părinte. Dacă părintele nu este specificat în mod explicit, dimensiunile vor depinde de fereastra browserului.

div (lățime: 40%;)

Auto lasă controlul dimensionării elementelor browserului web și este valoarea implicită. În acest caz, dimensiunile elementului vor fi astfel încât să se potrivească complet cu tot conținutul său.

Să ne uităm la câteva exemple.

latime si inaltime

Bine ați venit pe site-ul nostru auto. Aici veți găsi multe articole interesante și utile despre mașini, lor specificatii tehniceși caracteristici.

Rezultat:

În acest exemplu, am creat un div și am imbricat un paragraf p cu text în interior. Pentru div, am stabilit strict dimensiunile la 300 pe 300 pixeli. Elementul p are valori ale proprietăților de lățime și înălțime egale cu auto, așa că, după cum puteți vedea în captură de ecran, lățimea sa este setată egală cu lățimea elementului părinte, iar înălțimea sa este astfel încât să se potrivească cu tot textul conținut în paragraful.

Acum să schimbăm setările css pentru paragraful p și să setăm dimensiuni fixe:

Stratul 2 (
fundal: #eee;
latime: 250px;
}

Rezultat:

După cum puteți vedea, lățimea paragrafului a devenit mai îngustă și egală cu 250 de pixeli, iar înălțimea sa a crescut, astfel încât textul să se potrivească, deoarece parametrul de înălțime a rămas egal cu auto.

Acum să setăm înălțimea și lățimea paragrafului în procente:

Stratul 2 (
fundal: #eee;
latime:50%;
inaltime:50%;
}

Rezultat:

După cum puteți vedea în imagine, lățimea elementului p a devenit egală cu jumătate din lățime element div. Și înălțimea a crescut și a devenit egală cu 75 la sută din înălțimea div.

Când specificați lățimea și înălțimea oricăror elemente în unități relative, poate fi necesar să specificați dimensiunile minime și maxime posibile. La urma urmei, de exemplu, la redimensionarea ferestrei browserului, dimensiunile elementului pot scădea și crește până la o astfel de dimensiune încât lizibilitatea site-ului devine foarte scăzută.

Puteți defini lățimea și înălțimea minimă folosind atributele min-width și min-heigh:

lățime minimă:<ширина>
inaltime minima:<высота>

Atributele de stil similare max-width și max-height vă permit să setați dimensiuni maxime:

lățimea maximă:<ширина>
inaltime maxima:<высота>

Este clar că la stabilirea valorilor maxime și minime pentru înălțime și lățime, dimensiunile elementului nu pot deveni mai mari decât valorile maxime și mai mici decât valorile minime.

Merită să clarificăm că sarcina parametrii înălțime și lățime au sens numai pentru etichetele bloc, deoarece pentru elementele inline acești parametri nu sunt procesați de browser.

Se poate întâmpla ca atunci când setați parametri rigizi pentru înălțimea și lățimea unui element, conținutul pe care îl conține să nu se încadreze în zona limitată.

De exemplu, să reducem dimensiunea paragrafului p din exemplele discutate mai sus la 100 de pixeli:

Stratul 2 (
fundal: #eee;
lățime: 100px;
înălțime: 100px;
}

Rezultat:

După cum puteți vedea, textul a depășit limitele paragrafului și nu arată prea frumos. Pentru a evita astfel de situații, există o regulă CSS - overflow.

Parametru de depășire pentru ascunderea (ascuns, vizibil) sau derulare (defilare, automată) conținut

Depășirea conținutului poate apărea atunci când atât lățimea, cât și înălțimea unui element sunt constrânse. Să ne uităm la două paragrafe:

Textul primului paragraf

Textul al doilea paragraf

Rezultat:

Deoarece nu sunt specificate nici lățimea, nici înălțimea paragrafelor, browserul le calculează independent pe baza propriei înțelegeri a valorii auto. Drept urmare, paragrafele au ocupat tot spațiul disponibil în lățime și în înălțime în conformitate cu conținutul pe care îl conțineau.

Acum să limităm lățimea primului paragraf:

Textul primului paragraf

Textul al doilea paragraf

Rezultat:

Lățimea paragrafului era de așteptat redusă, iar înălțimea a fost setată pentru a găzdui întregul text.

Ei bine, acum să limităm înălțimea primului paragraf:

Textul primului paragraf

Textul al doilea paragraf

Drept urmare, sa dovedit că textul nu se încadra într-un paragraf atât de limitat și, prin urmare, a intrat în zona vecinului inferior. În consecință, este practic imposibil să citiți textul din primul sau al doilea paragraf. Este de a controla comportamentul conținutului în astfel de situații care există regula de preaplin:

overflow: vizibil|ascuns|defilare|auto|moştenire

În mod implicit, overflow este setat la vizibil, ceea ce îi spune browserului să afișeze conținut care nu se potrivește în container. Rezultatul poate fi văzut în exemplul de mai sus.

Regula ascunde tot ce nu se potrivește în container:

Valoarea de defilare va afișa bare de defilare verticale și orizontale pe element, chiar dacă tot conținutul se potrivește:

Textul primului paragraf

Textul al doilea paragraf

Cea mai populară și logică soluție dacă trebuie să faceți bare de defilare pentru un container este valoarea auto. În acest caz, browserul însuși va determina când și pe ce axe ar trebui să afișeze barele de defilare:

Textul primului paragraf

Textul al doilea paragraf

Rezultat:

Pentru a personaliza barele de defilare, puteți utiliza, de asemenea, atributele de stil overflow-x și overflow-y, care vă permit să personalizați afișarea derulării pe axe individuale. Astfel este responsabil pentru axă orizontală, si pentru axa verticala.

Prin urmare, dacă, de exemplu, aveți nevoie de defilare orizontală să nu apară niciodată într-un paragraf și de defilare verticală să apară numai atunci când este necesar, atunci scrieți următoarea regulă css:

p(overflow-x:hidden;overflow-y:auto;)

Și problema va fi rezolvată.

Asta e tot. Pana data viitoare. Nu uitați să vă abonați la actualizările blogului și vă voi fi recunoscător dacă utilizați butoanele rețelei sociale.

The înălţime Proprietatea CSS specifică înălțimea unui element. În mod implicit, proprietatea definește înălțimea zonei de conținut. Totuși, dacă box-sizing este setat la border-box , aceasta determină în schimb înălțimea zonei de frontieră.

Sursa pentru acest exemplu interactiv este stocată într-un depozit GitHub. Dacă doriți să contribuiți la proiectul de exemple interactive, vă rugăm să clonați https://github.com/mdn/interactive-examples și să ne trimiteți o cerere de extragere.

Proprietățile de înălțime minimă și înălțime maximă depășesc înălțimea .

Sintaxă

/* Valoarea cuvântului cheie */ înălțime: auto; /* valori*/ înălțime: 120px; inaltime: 10em; /* Valoare */ inaltime: 75%; /* Valori globale */ înălțime: moștenire; inaltime: initiala; inaltime: neasezat;

Valori

Tipul de date CSS reprezintă o valoare a distanței. Lungimile pot fi folosite în numeroase proprietăți CSS, cum ar fi lățime, înălțime, margine, umplutură, lățime chenar, dimensiune font și umbră text."> Definește înălțimea ca valoare absolută. Tipul de date CSS reprezintă o valoare procentuală. Este adesea folosit pentru a defini o dimensiune ca fiind relativă la obiectul părinte al unui element. numeroase proprietăți pot folosi procente, cum ar fi umplutura marginii lățimii, înălțimea și dimensiunea fontului.> Definește înălțimea ca procent din înălțimea blocului care îl conține. auto Browserul va calcula și selecta o înălțime pentru elementul specificat. max-content Înălțimea preferată intrinsecă. min-content Înălțimea minimă intrinsecă. fit-content( date CSS tipul reprezintă o valoare care poate fi fie a sau a ."> ) Utilizează formula de potrivire-conținut cu spațiul disponibil înlocuit cu argumentul specificat, de exemplu. min(max-conținut, max(min-conținut,)).

Sintaxă formală

Tipul de date CSS reprezintă o valoare procentuală. Este adesea folosit pentru a defini o dimensiune ca fiind relativă la obiectul părinte al unui element. numeroase proprietăți pot folosi procente, cum ar fi umplutura marginii lățimii, înălțimea și dimensiunea fontului.> border-box content-box disponibil min-content max-content fit-content automat

Exemplu

HTML

Am 50 de pixeli înălțime.

Am 25 de pixeli înălțime.

Am jumătate din înălțimea părintelui meu.

div ( lățime: 250 px; margine-jos: 5 px; chenar: 2 px albastru solid; ) # mai înalt ( înălțime: 50 px; ) # mai scurt ( înălțime: 25 px; ) # părinte ( înălțime: 100 px; ) # copil ( înălțime: 50 % ; latime: 75%; )

Rezultat

Probleme de accesibilitate

Asigurați-vă că elementele setate cu o înălțime nu sunt trunchiate și/sau nu ascunde alt conținut atunci când pagina este mărită pentru a mări dimensiunea textului.

Specificații

Specificație	stare	cometariu
Modulul de dimensionare intrinsecă și extrinsecă CSS nivelul 4	Schița redactorului
Modulul de dimensionare intrinsecă și extrinsecă CSS nivelul 3 Definiția „înălțimii” din specificația respectivă.	Proiect de lucru	S-au adăugat cuvintele cheie max-content , min-content , fit-content.
Tranziții CSS Definiția „înălțimii” din specificația respectivă.	Proiect de lucru	Listează înălțimea ca fiind animabilă.
CSS Nivelul 2 (Reviziunea 1) Definiția „înălțimii” din specificația respectivă.	Recomandare	Adaugă suport pentru tipul de date CSS reprezintă o valoare de distanță. Lungimile pot fi folosite în numeroase proprietăți CSS, cum ar fi lățime, înălțime, margine, umplutură, lățime chenar, dimensiune font și umbră text."> valorile și precizează asupra cărui element se aplică.
CSS Nivelul 1 Definiția „înălțimii” din specificația respectivă.	Recomandare	Definiție inițială.

Valoarea initiala	auto
Se aplică la	toate elementele, cu excepția elementelor inline neînlocuite, coloane de tabel și grupuri de coloane
Mostenit	Nu
Procente	Procentul este calculat în raport cu înălțimea blocului care conține casetele generate. Dacă înălțimea blocului care conține nu este specificată în mod explicit (adică depinde de înălțimea conținutului), iar acest element nu este poziționat în mod absolut, valoarea calculează la auto .O înălțime procentuală pe elementul rădăcină este relativ la blocul care conține inițial.
Mass-media	vizual
Valoarea calculată	un procent sau auto sau lungimea absolută
Tip de animație	un tip de date CSS sunt interpolate ca numere reale, în virgulă mobilă.">lungime , tipul de date CSS sunt interpolate ca numere reale, în virgulă mobilă.">procent sau calc();
Ordine canonică	ordinea unică neambiguă definită de gramatica formală

Compatibilitate browser

Tabelul de compatibilitate de pe această pagină este generat din date structurate. Dacă doriți să contribuiți la date, vă rugăm să consultați https://github.com/mdn/browser-compat-data și să ne trimiteți o cerere de extragere.

Actualizați datele de compatibilitate pe GitHub

	Desktop						Mobil
	Crom	Margine	Firefox	Internet Explorer	Operă	Safari	Vizualizare web Android	Chrome pentru Android	Firefox pentru Android	Opera pentru Android	Safari pe iOS	Samsung Internet
înălţime	Suport complet Chrome 1	Edge Suport complet 12	Suport complet pentru Firefox 1	IE Suport complet 4	Opera Suport complet 7	Suport complet Safari 1	WebView Android Suport complet 1	Chrome Android Suport complet 18	Firefox Android Suport complet 4	Opera Android Suport complet 10.1	Safari iOS Suport complet 1	Samsung Internet Android Suport complet 1.0
potrivire-conținut	Suport complet Chrome 46	Edge Fără suport Nr	Firefox Fără suport Nr	IE Fără suport Nr	Opera Suport complet 33	Safari Asistență deplină 11 Asistență deplină 11 Asistență deplină 9 Prefixate Prefixate				Opera Android?	Safari iOS Asistență deplină 11 Asistență deplină 11 Asistență deplină 9 Prefixate Prefixate Implementat cu prefixul de furnizor: -webkit-
max-conținut	Suport complet Chrome 46	Edge Fără suport Nr	Prefixate Prefixate	IE Fără suport Nr	Opera Suport complet 44	Safari Suport complet 11	WebView Android Suport complet 46	Chrome Android Suport complet 46	Prefixate Prefixate Implementat cu prefixul de furnizor: -moz-			Samsung Internet Android Suport complet 5.0
min-conținut	Suport complet Chrome 46	Edge Fără suport Nr	Firefox Suport deplin 66 Suport deplin 66 Suport deplin 3 Prefixate Prefixate Implementat cu prefixul de furnizor: -moz-	IE Fără suport Nr	Opera Suport complet 44	Safari Suport complet 11	WebView Android Suport complet 46	Chrome Android Suport complet 46	Firefox Android Suport complet 66 Suport complet 66 Suport complet 4 Prefixate Prefixate Implementat cu prefixul de furnizor: -moz-	Opera Android Suport complet 43	Safari iOS Suport complet 11	Samsung Internet Android Suport complet 5.0
întinde	Suport complet Chrome 28 Webkit-fill-disponibil„>Nume alternativ Suport complet 28 Webkit-fill-disponibil„>Nume alternativ Webkit-fill-disponibil„>Nume alternativ	Edge Fără suport Nr	Firefox Fără suport Nr	IE Fără suport Nr	Opera Suport complet 15 Webkit-fill-disponibil„>Nume alternativ Sprijin deplin 15 Webkit-fill-disponibil„>Nume alternativ Webkit-fill-disponibil„>Nume alternativ Utilizează numele non-standard: -webkit-fill-available	Safari Suport complet 9 Webkit-fill-disponibil„>Nume alternativ Sprijin deplin 9 Webkit-fill-disponibil„>Nume alternativ Webkit-fill-disponibil„>Nume alternativ Utilizează numele non-standard: -webkit-fill-available	WebView Android Suport complet 4.4 Webkit-fill-disponibil„>Nume alternativ Suport complet 4.4 Webkit-fill-disponibil„>Nume alternativ Webkit-fill-disponibil„>Nume alternativ Utilizează numele non-standard: -webkit-fill-available	Chrome Android Suport complet 28 Webkit-fill-disponibil„>Nume alternativ Suport complet 28 Webkit-fill-disponibil„>Nume alternativ Webkit-fill-disponibil„>Nume alternativ Utilizează numele non-standard: -webkit-fill-available	Firefox Android Fără suport Nr	Opera Android?	Safari iOS Suport complet 9 Webkit-fill-disponibil„>Nume alternativ Sprijin deplin 9 Webkit-fill-disponibil„>Nume alternativ Webkit-fill-disponibil„>Nume alternativ Utilizează numele non-standard: -webkit-fill-available	Samsung Internet Android Suport complet 5.0 Webkit-fill-disponibil„>Nume alternativ Suport complet 5.0 Webkit-fill-disponibil„>Nume alternativ Webkit-fill-disponibil„>Nume alternativ Utilizează numele non-standard: -webkit-fill-available

Legendă

Sprijin deplin Sprijin deplin Fără suport Fără suport Compatibilitate necunoscută Compatibilitate necunoscută Utilizează un nume non-standard. Folosește un nume non-standard. Necesită un prefix de furnizor sau un nume diferit pentru utilizare. Necesită un prefix de furnizor sau un nume diferit pentru utilizare.