ارتفاع و عرض عنصرمقادیر محاسبه شده هستند هر عنصر صفحه وب یک ناحیه مستطیل شکل را تشکیل می دهد که به نوبه خود از چندین ناحیه تشکیل شده است - منطقه محتوا (محتوا), مناطق بالشتک, مناطق قابو مناطق میدانیعنصر

بین محتوای عنصر و مرز آن قرار دارند تورفتگیپد ، خارج از مرز عنصر - زمینه هایلبه. هر عنصر دارای یک محتوا است ، سایر مناطق اختیاری هستند.

برنج. 1. بلوک مدل یک عنصر

1. ارتفاع عنصر

ویژگی height ارتفاع محتوای عنصر بلوک را تعیین می کند و هیچ تاثیری در نمایش عناصر درون خطی ندارد: inline؛ ... ارتفاع عناصر خطی برابر با ارتفاع محتوای آنها است. مقادیر منفی مجاز نیست. ملک ارثی نیست.

نحو

P (ارتفاع: 100 پیکسل ؛)

2. عرض مورد

ویژگی width عرض محتوای عنصر بلوک را تعیین می کند و هیچ تاثیری در نمایش عناصر درون خطی ندارد: inline؛ ... عناصر داخلی دارای عرض یکسانی با محتوای خود هستند. مقادیر منفی مجاز نیست. ملک ارثی نیست.

نحو

P (عرض: 100 پیکسل ؛)

3. ارتفاع و عرض یک عنصر کاملاً موقعیت یافته

عرض و ارتفاع موقعیت یک عنصر کاملاً موقعیتی را تنظیم کنید: مطلق ؛ همیشه لازم نیست ، زیرا در این مورد ارتفاع و عرض به طور ضمنی با جابجایی عنصر تعیین می شود. اگر حاشیه ها و حاشیه ها برای عنصری مشخص شود ، اندازه ناحیه محتوا را با مقادیر مناسب کاهش می دهد.

Div (پس زمینه: # 6A7690 ؛ موقعیت: مطلق ؛ بالا: 0 ؛ پایین: 0 ؛ چپ: 50٪ ؛ راست: 0 ؛) / * در این حالت ، ارتفاع عنصر 100٪ ، عرض 50٪ بلوک اصلی است * /
برنج. 2. ارتفاع و عرض یک عنصر کاملاً موقعیت یافته

4. تورفت عنصر

با استفاده از ویژگی padding ، می توانید padding را برای چندین طرف عنصر به طور همزمان به ترتیب زیر تنظیم کنید :. اگر عنصر دارای پس زمینه باشد ، به پد نیز گسترش می یابد. مقادیر منفی مجاز نیست. ملک ارثی نیست.

اگر سه مقدار داده شود ، برای مثال div (padding: 10px 20px 30px؛) ، آنگاه به ترتیب زیر توزیع می شوند: اولین مقدار بالشتک بالا ، دوم پد راست و چپ و سوم روکش پایین است.
اگر دو مقدار داده شود ، به عنوان مثال div (padding: 10px 20px؛) ، اولین مورد بالشتک بالا و پایین را تنظیم می کند ، دومی راست و چپ را تنظیم می کند.
یک مقدار واحد مانند div (padding: 10px؛) همان پد را در همه طرف عنصر تنظیم می کند.

نحو

P (پد: 5 پیکسل 10 پیکسل 15 پیکسل 10 پیکسل ؛)

4.1 تورفتن یک طرف یک عنصر

برای تنظیم روکش فقط در یک طرف یک عنصر ، باید از یکی از ویژگی های padding-top ، padding-right ، padding-bottom ، padding-left استفاده کنید ، به عنوان مثال:

P (پر کردن سمت چپ: 10 پیکسل ؛)

5. فیلدهای عنصر

بیشتر عناصر با حاشیه از یکدیگر جدا می شوند. ویژگی حاشیه یک فرم مختصر برای نوشتن حاشیه های یک عنصر به ترتیب زیر است: بالا ، راست ، پایین ، چپ... زمانی استفاده می شود که باید حاشیه ها را از چند طرف مشخص کنید ، اما نه لزوما از چهار طرف. حاشیه مجاور عناصر بلوک جمع شده و حاشیه های بالا و پایین هیچ تاثیری بر روی عناصر داخلی ندارند. مقادیر منفی مجاز است. ملک ارثی نیست.

اگر سه مقدار داده شود ، برای مثال div (margin: 10px 20px 30px؛) ، آنگاه به ترتیب زیر توزیع می شوند: اولین مقدار حاشیه بالا ، دوم حاشیه راست و چپ و سوم حاشیه پایینی است.
اگر دو مقدار داده شود ، به عنوان مثال ، div (margin: 10px 20px؛) ، اولین مورد حاشیه های بالا و پایین را تعیین می کند ، دومی راست و چپ را تنظیم می کند.
یک مقدار واحد مانند div (margin: 10px؛) حاشیه های یکسانی را در همه طرف عنصر تنظیم می کند.

(margin: 0 auto؛) تنها در صورتی کار می کند که عرض عنصر به صراحت تنظیم شده باشد.

برنج. 3. حاشیه: خودکار؛ برای عنصر کاملاً موقعیت یابی شده

نحو

Div (حاشیه: 5 پیکسل 10 پیکسل 2 پیکسل 5 پیکسل ؛)

5.1 حاشیه در یک طرف عنصر

حاشیه بالا ، حاشیه راست ، حاشیه پایین ، حاشیه چپ حاشیه های مربوطه را در هر طرف عنصر کنترل می کند ، به عنوان مثال:

P (حاشیه چپ: 10 پیکسل ؛)

6. محدود کردن عرض و ارتفاع

CSS همچنین از چند ویژگی دیگر مربوط به تنظیم ارتفاع و عرض عناصر صفحه وب پشتیبانی می کند: حداقل ارتفاع ، حداقل عرض ، حداکثر ارتفاع و حداکثر عرض. این ویژگی ها به شما امکان می دهد حداقل و حداکثر مقادیر را برای عرض یا ارتفاع یک عنصر تنظیم کنید و به عنصر این توانایی را بدهید که فضای موجود را پر کند. ویژگی ها اغلب برای طراحی صفحات وب پاسخگو استفاده می شوند. برای همه عناصر بجز عناصر خطی و جدول کاربرد دارد. آنها همیشه از قانون اصلی پیروی می کنند ، یعنی بعد از دادن ارتفاع یا عرض به عنصر ارثی نیست.

شما می توانید ابعاد معمولی را با استفاده از برخی واحدهای اندازه گیری و محدودیت های اندازه را با استفاده از واحدهای دیگر تعیین کنید ، برای مثال:

Div (عرض: 400 پیکسل ؛ حداکثر عرض: 50 درصد ؛)

این عنصر تنها در صورتی عرض 400 پیکسل خواهد داشت که این مقدار از 50 درصد عرض بلوک ظرف بیشتر نباشد ، در غیر این صورت عرض آن کاهش می یابد.

در این مقاله ، نگاهی خواهیم انداخت به اینکه چگونه می توانید ارتفاع بلوک را به عنوان درصدی از عرض آن در CSS تنظیم کنید. بیایید با استفاده از مثال ایجاد چرخ فلک Bootstrap (اسلایدر) از تصاویر در اندازه های مختلف ، کاربرد این فناوری را بررسی کنیم.

ایجاد بلوک با ارتفاع که درصد معینی از عرض آن را دارد

1. ایجاد ساختار HTML از 2 بلوک:
   بلوک اول دارای 2 کلاس است. با استفاده از کلاس item-responsive ، موقعیت نسبی بلوک را تنظیم می کنیم. این باید به گونه ای انجام شود که بلوک 2 (که موقعیت مطلق خواهد داشت) نسبت به آن قرار گیرد. علاوه بر این ، این کلاس همچنین برای اضافه کردن: قبل از شبه عنصر قبل از محتوای عناصر مربوطه (به موارد پاسخگو) استفاده می شود. این عنصر با استفاده از ویژگی padding-top CSS ارتفاع مورد نظر جعبه را نسبت به عرض آن تنظیم می کند. ترفند این روش این است که اگر ویژگی padding روی تنظیم شود نه بر حسب پیکسل ، بلکه بر حسب درصد ، سپس توسط مرورگر نسبت به عرض آن محاسبه می شود... بنابراین ، می توان یک بلوک با ارتفاع مورد نیاز به دست آورد. مرحله بعدی این است که به بلوک 2 موقعیت مطلق بدهید و آن را با بلوک اول تراز کنید.
2. CSS زیر را به صفحه اضافه کنید. / * عنصر شبه * . محتوا (موقعیت: مطلق ؛ / * موقعیت مطلق عنصر * / / * موقعیت عنصر * / بالا: 0 ؛ چپ: 0 ؛ راست: 0 ؛ پایین: 0 ؛) / * در صورت لزوم (برای بلوک هایی با این کلاسها * / .item -4by3 (بالاترین سطح: 75٪ ؛ / * (3: 4) * 100٪ * /) .item-2by1 (بالشتک بالا: 50٪ ؛ / * (1: 2) * 100 ٪ * /) .item -1by1 (بالاترین سطح: 100٪ ؛ / * (1: 1) * 100٪ * /)

استفاده از فناوری فوق برای ایجاد چرخ فلک بوت استرپ

اگر با بوت استرپ آشنایی ندارید و می خواهید بدانید این چیست ، می توانید مقدمه ما در بوت استرپ را مطالعه کنید.

بیایید به نمونه ای نگاه کنیم که در آن از ساختار HTML بالا و کد CSS برای نمایش اسلایدهای چرخ فلک Bootstrap استفاده می شود.

ما از فایل های زیر به عنوان تصویر استفاده می کنیم:

• carousel_1.jpg (عرض = 736 پیکسل ، ارتفاع = 552 پیکسل ، نسبت ابعاد (ارتفاع به عرض) = 1.33) ؛
• carousel_2.jpg (عرض = 1155 پیکسل ، ارتفاع = 1280 پیکسل ، نسبت ابعاد (ارتفاع به عرض) = 0.9) ؛
• carousel_3.jpg (عرض = 1846 پیکسل ، ارتفاع = 1028 پیکسل ، نسبت ابعاد (ارتفاع به عرض) = 1.8) ؛
• carousel_4.jpg (عرض = 1140 پیکسل ، ارتفاع = 550 پیکسل ، نسبت ابعاد (ارتفاع به عرض) = 2.07) ؛
• carousel_5.jpg (عرض = 800 پیکسل ، ارتفاع = 600 پیکسل ، نسبت ابعاد (ارتفاع به عرض) = 1.33) ؛

ما تصاویر را به عنوان پس زمینه تنظیم می کنیم. این اجازه می دهد تا تصاویری با نسبت ابعاد مختلف در چرخ فلک Bootstrap 3 استفاده شود.

نشانه گذاری HTML چرخ فلک:

کد CSS چرخ فلک:

مورد پاسخگو (موقعیت: نسبی ؛ / * موقعیت نسبی * /). مورد پاسخگو: قبل (نمایش: بلوک ؛ / * عنصر رندر به عنوان بلوک * / محتوا: "" ؛ / * محتوای عنصر شبه * / عرض: 100 ٪؛ / * عرض عنصر * /) .item-16by9 (بالاترین سطح: 56.25٪ ؛ / * (9:16) * 100٪ * /). به مطالب پاسخ می دهد>. محتوا (موقعیت: مطلق ؛ / * موقعیت مطلق از عنصر * / / * موقعیت عنصر * / بالا: 0 ؛ چپ: 0 ؛ راست: 0 ؛ پایین: 0 ؛ اندازه پس زمینه: جلد! مهم ؛)

به طور پیش فرض ، autowidth برای عناصر بلوک استفاده می شود. این بدان معناست که عنصر دقیقاً به اندازه فضای آزاد کشیده می شود. ارتفاع پیش فرض عناصر بلوک به طور خودکار تنظیم می شود ، به عنوان مثال. مرورگر ناحیه محتوا را به صورت عمودی گسترش می دهد تا همه محتوا نمایش داده شود. برای تنظیم ابعاد سفارشی برای منطقه محتوای یک عنصر ، می توانید از ویژگی های عرض و ارتفاع استفاده کنید.

ویژگی width CSS به شما امکان می دهد عرض منطقه محتویات یک عنصر را تنظیم کنید و ویژگی height به شما اجازه می دهد تا ارتفاع ناحیه محتوا را تنظیم کنید:

توجه داشته باشید که ویژگی های عرض و ارتفاع فقط اندازه ناحیه محتوا را تعیین می کند ؛ برای محاسبه عرض کل یک عنصر بلوک ، عرض ناحیه محتوا ، پد چپ و راست و عرض حاشیه چپ و راست را اضافه کنید. همین امر در مورد ارتفاع کل عنصر نیز صادق است ، فقط همه مقادیر به صورت عمودی محاسبه می شوند:

برای این پاراگراف ، ما فقط عرض و ارتفاع را تعیین می کنیم.

این پاراگراف علاوه بر عرض و ارتفاع ، بالشتک ، حاشیه و روکش را نیز شامل می شود.

تلاش كردن "

مثال به وضوح نشان می دهد که عنصر دوم نسبت به قسمت اول فضای بیشتری را اشغال می کند. اگر طبق فرمول ما محاسبه کنید ، ابعاد پاراگراف اول 150x100 پیکسل و ابعاد پاراگراف دوم عبارتند از:

ارتفاع کلی:	5 پیکسل	+	10 پیکسل	+	100 پیکسل	+	10 پیکسل	+	5 پیکسل	= 130 پیکسل
	بالا قاب		بالا تورفتگی		ارتفاع		پایین تر تورفتگی		پایین قاب

یعنی 180x130 پیکسل.

سرریز عناصر

پس از تعیین عرض و ارتفاع عنصر ، ارزش توجه به یک نکته مهم را دارد - محتوای واقع شده در داخل عنصر می تواند از اندازه بلوک مشخص شده فراتر رود. در این مورد ، برخی از محتوا از مرزهای عنصر فراتر می رود ، برای جلوگیری از این لحظه ناخوشایند ، می توانید از ویژگی سرریز CSS استفاده کنید. ویژگی overflow به مرورگر می گوید اگر محتوای بلوک از اندازه آن فراتر رفت ، چه باید بکند. این ویژگی می تواند یکی از چهار مقدار را داشته باشد:

• قابل مشاهده است مقدار پیش فرض استفاده شده توسط مرورگر. تنظیم این مقدار همان تأثیر عدم تنظیم ویژگی overflow را خواهد داشت.
• پیمایش - نوارهای پیمایش عمودی و افقی را به عنصر اضافه می کند.
• خودکار - در صورت نیاز نوارهای پیمایش را اضافه می کند.
• پنهان - برخی از محتواهایی را که فراتر از محدوده عنصر بلوک است ، پنهان می کند.

شرح

ارتفاع بلوک یا عناصر قابل تعویض (به عنوان مثال ، برچسب) را تعیین می کند ) ارتفاع شامل ضخامت حاشیه های اطراف عنصر ، روکش و حاشیه نمی شود.

اگر محتوای بلوک از ارتفاع مشخص شده بیشتر باشد ، ارتفاع عنصر بدون تغییر باقی می ماند و محتوا در بالای آن نمایش داده می شود. این ویژگی می تواند باعث همپوشانی محتوای عناصر در مواقعی شود که عناصر در کد HTML متوالی هستند. برای جلوگیری از این اتفاق ، overflow: auto را به سبک عنصر اضافه کنید.

نحو

ارتفاع: مقدار | علاقه | خودکار | به ارث می برند

ارزش ها

هر واحد طول در CSS به عنوان مقادیر پذیرفته می شود- به عنوان مثال ، پیکسل (px) ، اینچ (in) ، نقاط (pt) و غیره هنگام استفاده از درصد نماد ، ارتفاع یک عنصر بسته به ارتفاع محاسبه می شود. عنصر والد اگر والدین به صراحت مشخص نشده باشند ، پنجره مرورگر به عنوان والد آن استفاده می شود. خودکار بر اساس محتوای عنصر ، ارتفاع را تنظیم می کند

HTML5 CSS2.1 IE Cr Op Sa Fx

نتیجه این مثال در شکل نشان داده شده است. 1

برنج. 1. اعمال ویژگی ارتفاع

مدل شیء

document.getElementById ("elementID") .style.height

مرورگرها

اینترنت اکسپلورر 6 ارتفاع را به عنوان حداقل ارتفاع تعریف می کند.

در حالت عادی ، اینترنت اکسپلورر تا نسخه 8.0 و شامل نسخه 8.0 ارتفاع یک عنصر را بدون افزودن مقادیر ، حاشیه و حاشیه به آن به اشتباه محاسبه می کند.

Internet Explorer تا نسخه 7.0 و از جمله مقدار ارثی را پشتیبانی نمی کند.

این ارتفاعویژگی CSS ارتفاع یک عنصر را مشخص می کند. به طور پیش فرض ، ویژگی ارتفاع منطقه محتوا را مشخص می کند. اگر اندازه جعبه روی border-box تنظیم شود ، در عوض ارتفاع منطقه مرزی را تعیین می کند.

منبع این مثال تعاملی در مخزن GitHub ذخیره می شود. اگر می خواهید در پروژه نمونه های تعاملی مشارکت داشته باشید ، لطفاً https://github.com/mdn/interactive-examples را کلون کرده و یک درخواست کشش برای ما ارسال کنید.

حداقل ارتفاع و حداکثر ارتفاع ارتفاع را نادیده می گیرند.

نحو

/ * مقدار کلمه کلیدی * / ارتفاع: خودکار؛ / * مقادیر* / ارتفاع: 120px؛ ارتفاع: 10em؛ / * ارزش * / ارتفاع: 75؛ ؛ / * ارزشهای جهانی * / قد: وراثت؛ ارتفاع: اولیه ؛ ارتفاع: تنظیم نشده

ارزش های

نوع داده CSS نشان دهنده مقدار فاصله است. طول ها را می توان در خواص CSS متعددی مانند عرض ، ارتفاع ، حاشیه ، پد ، عرض حاشیه ، اندازه فونت و سایه متن استفاده کرد. "> ارتفاع را به عنوان مقدار مطلق تعریف می کند. نوع داده CSS نشان دهنده مقدار درصدی است. اغلب برای تعریف اندازه نسبت به شیء اصلی عنصر مورد استفاده قرار می گیرد. بسیاری از ویژگی ها می توانند از درصد هایی مانند پهنای حاشیه عرض عرض و اندازه فونت استفاده کنند.> ارتفاع را به عنوان درصدی از ارتفاع بلوک حاوی تعریف می کند. خودکار مرورگر یک ارتفاع را برای عنصر مشخص شده محاسبه و انتخاب می کند. حداکثر محتوا ارتفاع ذاتی ترجیح داده شده. حداقل محتوا حداقل ارتفاع ذاتی. تناسب محتوا (داده CSS type نشان دهنده مقداری است که می تواند a باشد یا الف ."> ) از فرمول fit-content استفاده می کند و فضای موجود با آرگومان مشخص جایگزین شده است. دقیقه (حداکثر محتوا ، حداکثر (حداقل محتوا ،)).

نحو رسمی

نوع داده CSS نشان دهنده مقدار درصدی است. اغلب برای تعریف اندازه نسبت به شیء اصلی یک عنصر استفاده می شود. بسیاری از ویژگی ها می توانند از درصد هایی مانند پهنای حاشیه عرض عرض و اندازه فونت استفاده کنند.> border-box content-box موجود min-content max-content fit-content auto

مثال

Html

من 50 پیکسل قد دارم.

من 25 پیکسل قد دارم.

من نصف قد پدر و مادرم هستم.

CSS

div (عرض: 250 پیکسل ؛ حاشیه-پایین: 5 پیکسل ؛ حاشیه: 2 پیکسل آبی ثابت ؛) #بلندتر (ارتفاع: 50 پیکسل ؛) #کوتاهتر (ارتفاع: 25 پیکسل ؛) #والدین (قد: 100 پیکسل ؛) #کودک (قد: 50 درصد ؛ عرض: 75٪؛)

نتیجه

نگرانی های دسترسی

هنگام بزرگنمایی صفحه برای افزایش اندازه متن ، اطمینان حاصل کنید که عناصر تنظیم شده با ارتفاع کوتاه نشده و / یا محتویات دیگر را مبهم نمی کند.

مشخصات فنی

مشخصات	وضعیت	اظهار نظر
ماژول اندازه گیری داخلی و خارجی CSS سطح 4	پیش نویس ویرایشگر
سطح CSS داخلی و خارجی ماژول سطح 3 تعریف "ارتفاع" در آن مشخصات.	پیش نویس کاری	کلمات کلیدی حداکثر محتوا ، حداقل محتوا ، متناسب با محتوا اضافه شده است.
انتقال CSS تعریف "ارتفاع" در آن مشخصات.	پیش نویس کاری	ارتفاع را به عنوان متحرک لیست می کند.
CSS سطح 2 (تجدید نظر 1) تعریف "ارتفاع" در آن مشخصات.	توصیه	افزودن پشتیبانی برای نوع داده CSS نشان دهنده مقدار فاصله است. طول می تواند در خواص CSS متعددی مانند عرض ، ارتفاع ، حاشیه ، پد ، عرض حاشیه ، اندازه فونت و سایه متن استفاده شود. "> ارزشها و دقيقاً در مورد کدام عنصر کاربرد دارد.
CSS سطح 1 تعریف "ارتفاع" در آن مشخصات.	توصیه	تعریف اولیه

مقدار اولیه	خودکار
مربوط به	همه عناصر به جز عناصر خطی غیر جایگزین ، ستون های جدول و گروه های ستون
به ارث برده	نه
درصدها	درصد با توجه به ارتفاع بلوک محتوی جعبه تولید شده محاسبه می شود. اگر ارتفاع بلوک محتوی به صراحت مشخص نشده باشد (یعنی بستگی به ارتفاع محتوا دارد) و این عنصر کاملاً در موقعیت قرار نگیرد ، مقدار محاسبه می شود درصد به عنصر ریشه نسبت به بلوک حاوی اولیه است.
رسانه ها	دیداری
ارزش محاسبه شده	درصد یا خودکار یا طول مطلق
نوع انیمیشن	یک نوع داده CSS به عنوان اعداد واقعی ، با نقاط شناور درون یابی شده است. "> طول ، نوع داده CSS به صورت اعداد واقعی ، با نقاط شناور در نظر گرفته شده است."> درصد یا calc ()؛
نظم شرعی	ترتیب منحصر به فرد غیر مبهم که توسط دستور زبان رسمی تعریف شده است

سازگاری مرورگر

جدول سازگاری در این صفحه از داده های ساختار یافته ایجاد می شود. اگر می خواهید به داده ها کمک کنید ، لطفاً https://github.com/mdn/browser-compat-data را بررسی کنید و یک درخواست کشش برای ما ارسال کنید.

به روز رسانی داده های سازگاری در GitHub

	دسکتاپ						سیار
	Chrome	حاشیه، غیرمتمرکز	فایرفاکس	اینترنت اکسپلورر	اپرا	سافاری	نمای وب اندروید	Chrome برای Android	فایرفاکس برای آندروید	اپرا برای اندروید	سافاری در iOS	اینترنت سامسونگ
ارتفاع	پشتیبانی کامل Chrome 1	پشتیبانی کامل Edge 12	پشتیبانی کامل از Firefox 1	IE پشتیبانی کامل 4	پشتیبانی کامل اپرا 7	سافاری پشتیبانی کامل 1	WebView Android پشتیبانی کامل 1	Chrome Android پشتیبانی کامل 18	پشتیبانی کامل Firefox Android 4	Opera Android پشتیبانی کامل 10.1	Safari iOS پشتیبانی کامل 1	سامسونگ اینترنت اندروید پشتیبانی کامل 1.0
متناسب با محتوا	پشتیبانی کامل Chrome 46	Edge بدون پشتیبانی شماره	فایرفاکس بدون پشتیبانی شماره	IE بدون پشتیبانی شماره	پشتیبانی کامل اپرا 33	صفری پشتیبانی کامل 11 پشتیبانی کامل 11 پشتیبانی کامل 9 پیشوند پیشوند				اپرا اندروید؟	Safari iOS پشتیبانی کامل 11 پشتیبانی کامل 11 پشتیبانی کامل 9 پیشوند پیشوند پیاده سازی شده با پیشوند فروشنده: -webkit-
حداکثر محتوا	پشتیبانی کامل Chrome 46	Edge بدون پشتیبانی شماره	پیشوند پیشوند	IE بدون پشتیبانی شماره	پشتیبانی کامل اپرا 44	سافاری پشتیبانی کامل 11	WebView Android پشتیبانی کامل 46	Chrome Android پشتیبانی کامل 46	پیشوند پیشوند پیاده شده با پیشوند فروشنده: -moz-			سامسونگ اینترنت اندروید پشتیبانی کامل 5.0
حداقل محتوا	پشتیبانی کامل Chrome 46	Edge بدون پشتیبانی شماره	پشتیبانی کامل فایرفاکس 66 پشتیبانی کامل 66 پشتیبانی کامل 3 پیشوند پیشوند پیاده شده با پیشوند فروشنده: -moz-	IE بدون پشتیبانی شماره	پشتیبانی کامل اپرا 44	سافاری پشتیبانی کامل 11	WebView Android پشتیبانی کامل 46	Chrome Android پشتیبانی کامل 46	اندروید فایرفاکس پشتیبانی کامل 66 پشتیبانی کامل 66 پشتیبانی کامل 4 پیشوند پیشوند پیاده شده با پیشوند فروشنده: -moz-	اپرا اندروید پشتیبانی کامل 43	Safari iOS پشتیبانی کامل 11	سامسونگ اینترنت اندروید پشتیبانی کامل 5.0
کش آمدن	پشتیبانی کامل Chrome 28 Webkit-fill-available"> نام جایگزین پشتیبانی کامل 28 Webkit-fill-available"> نام جایگزین Webkit-fill-available"> نام جایگزین	Edge بدون پشتیبانی شماره	فایرفاکس بدون پشتیبانی شماره	IE بدون پشتیبانی شماره	پشتیبانی کامل اپرا 15 Webkit-fill-available"> نام جایگزین پشتیبانی کامل 15 Webkit-fill-available"> نام جایگزین Webkit-fill-available"> نام جایگزین از نام غیر استاندارد استفاده می کند: -webkit-fill-available	سافاری پشتیبانی کامل 9 Webkit-fill-available"> نام جایگزین پشتیبانی کامل 9 Webkit-fill-available"> نام جایگزین Webkit-fill-available"> نام جایگزین از نام غیر استاندارد استفاده می کند: -webkit-fill-available	WebView Android پشتیبانی کامل 4.4 Webkit-fill-available"> نام جایگزین پشتیبانی کامل 4.4 Webkit-fill-available"> نام جایگزین Webkit-fill-available"> نام جایگزین از نام غیر استاندارد استفاده می کند: -webkit-fill-available	Chrome Android پشتیبانی کامل 28 Webkit-fill-available"> نام جایگزین پشتیبانی کامل 28 Webkit-fill-available"> نام جایگزین Webkit-fill-available"> نام جایگزین از نام غیر استاندارد استفاده می کند: -webkit-fill-available	اندروید فایرفاکس بدون پشتیبانی شماره	اپرا اندروید؟	Safari iOS پشتیبانی کامل 9 Webkit-fill-available"> نام جایگزین پشتیبانی کامل 9 Webkit-fill-available"> نام جایگزین Webkit-fill-available"> نام جایگزین از نام غیر استاندارد استفاده می کند: -webkit-fill-available	سامسونگ اینترنت اندروید پشتیبانی کامل 5.0 Webkit-fill-available"> نام جایگزین پشتیبانی کامل 5.0 Webkit-fill-available"> نام جایگزین Webkit-fill-available"> نام جایگزین از نام غیر استاندارد استفاده می کند: -webkit-fill-available

افسانه

حمایت کاملحمایت کامل بدون پشتیبانیبدون پشتیبانی سازگاری ناشناخته استسازگاری ناشناخته از نامی غیر استاندارد استفاده می کند. از نامی غیر استاندارد استفاده می کند. برای استفاده به پیشوند فروشنده یا نام متفاوت نیاز دارد. برای استفاده به پیشوند فروشنده یا نام متفاوت نیاز دارد.