آشنایی با ویژگی -moz-only-whitespace در CSS

سلام! در این مقاله قراره درباره‌ی یکی از ویژگی‌های کمتر شناخته‌شده CSS با نام -moz-only-whitespace صحبت کنیم. این ویژگی مخصوص مرورگر فایرفاکس (Firefox) هست و کاربردش زمانی هست که نیاز داریم کنترل بیشتری روی نمایش فضاهای سفید در متون داشته باشیم.

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

در فایرفاکس، با استفاده از -moz-only-whitespace می‌تونید مطمئن شید که فقط فضاهای سفیدی که دقیقاً نیاز هست حفظ بشن و سایر موارد اتوماتیک حذف می‌شن. این ویژگی در کنار ویژگی‌های دیگه‌ای مثل white-space می‌تونه جای قدرتمندی در جعبه ابزار CSS شما داشته باشه.

البته به یاد داشته باشید که این ویژگی مخصوص فایرفاکسه و در مرورگرهای دیگه پشتیبانی نمی‌شه، بنابراین باید با احتیاط ازش استفاده کنید و همیشه برای مرورگرهای دیگه هم برنامه پشتیبان در نظر داشته باشید.

<style>
  .example {
    -moz-only-whitespace: pre-wrap;
    white-space: pre-wrap;
  }
</style>

<div class="example">
  متن نمونه با    فضاهای    اضافی.
</div>

<style> ایجاد یه بلاک استایل برای درج CSS داخلی در صفحه.
.example انتخاب کلاس CSS برای عنصری که می‌خوایم سبک جدیدی بهش بدهیم.
-moz-only-whitespace: pre-wrap; تنظیم رفتار فضاهای سفید در فایرفاکس. فضاهای اضافی رو حفظ می‌کنه.
white-space: pre-wrap; رفتار عمومی white-space که برای سازگاری با مرورگرهای دیگه هم هست.
</style> پایان بلاک استایل.
<div class="example"> شروع یک عنصر div با کلاس example.
متن نمونه با فضاهای اضافی. محتوای div که شامل فضاهای سفید اضافی هست.
</div> پایان عنصر div.