اگر حتی تجربه‌ای اولیه در استفاده از CSS داشته باشیم، احتمالاً با ویژگی display آشنا هستیم. اما شاید ندانیم که این ویژگی دارای بیش از ۲۰ مقدار متفاوت است و حتی می‌تواند به‌جای یک مقدار، چند مقدار را به‌طور هم‌زمان بپذیرد.

در این مقاله، مقادیر کم‌تر شناخته شده ویژگی display در CSS را بررسی می‌کنیم و روش استفاده از آن‌ها را برای ایجاد چیدمان‌های خلاقانه و جلوه‌های بصری خاص مرور می‌کنیم.

تاریخچه ویژگی display در CSS

برای درک کاربردهای پیشرفته ویژگی display، ابتدا باید نگاهی اجمالی به تاریخچه آن داشته باشیم؛ چراکه این تاریخچه دلیل وجود بسیاری از قابلیت‌های جدید را مشخص می‌کند.

در ابتدا، ویژگی display تنها به ما اجازه می‌داد تا المنت‌ها را به‌صورت block، inline یا none تعریف کنیم. این مقادیر برای مشخص کردن نحوه نمایش المنت‌ها بسیار مفید بودند؛ مثلاً اینکه کدام المنت باید عرض کامل صفحه را اشغال کند (block)، کدام فقط به اندازه محتوای خود نمایش داده شود (inline) و کدام به‌کلی از صفحه پنهان شود (none).

مقدار inline-block نیز بعدها معرفی شد که ترکیبی از inline و block به‌حساب می‌آمد؛ یعنی المنتی که فقط به اندازه محتوای خود فضا اشغال می‌کرد اما می‌شد برای آن ویژگی‌هایی مانند width و height تعریف کرد که در المنت‌های inline عادی امکان‌پذیر نبود.

سال‌ها بعد، مقادیر flex و grid معرفی شدند که تحولی بزرگ در چیدمان المنت‌ها ایجاد کردند، چراکه امکان کنترل نحوه نمایش childهای یک المنت را به شکلی کاملاً جدید فراهم می‌کردند. اما این نوآوری‌ها با چالش‌هایی نیز همراه بودند؛ به‌طور پیش‌فرض، المنت‌های flex و grid به‌صورت block در نظر گرفته می‌شدند و امکانی برای ایجاد نسخه‌های inline از آن‌ها وجود نداشت. برای حل این مشکل، مقادیر inline-flex و inline-grid به CSS اضافه شدند.

با این حال، این روش چندان مقیاس‌پذیر نبود؛ چراکه با معرفی هر مقدار جدید (مثلاً blockish)، باید ترکیب‌های مختلفی از آن نیز تعریف می‌شد (مثل blockish-flex، blockish-grid و غیره). به همین دلیل، CSS ساختار ویژگی display را تغییر داد تا بتواند دو مقدار را هم‌زمان دریافت کند، نه فقط یک مقدار.

ویژگی display با چند مقدار

اگر تمام مقادیر ممکن برای ویژگی display در CSS را بررسی نماییم، می‌توانیم آن‌ها را به دو دسته کلی تقسیم کنیم:

1. مقادیری که بر childهای یک المنت تأثیر می‌گذارند (inner-display)
2. مقادیری که بر خودِ المنت تأثیر می‌گذارند (outer-display)

برای مثال، مقادیر block و inline تعیین می‌کنند که خودِ المنت چگونه در صفحه نمایش داده شود، در حالی که مقادیر flex، grid و table مشخص می‌کنند که childهای المنت چگونه چیدمان شوند.

با استفاده از قابلیت چندمقداری، می‌توانیم هر دو مقدار outer-display و inner-display را به‌صورت هم‌زمان در ویژگی display تعریف کنیم.

.new {
  display: inline flex;
}

.old {
  display: inline-flex;
}

در مثال بالا، کلاس‌های new و old از لحاظ عملکرد یکسان هستند؛ با این تفاوت که کلاس new از ویژگی چندمقداری display استفاده می‌کند، در حالی که کلاس old تنها از یک مقدار استفاده کرده است. در واقع می‌توان تمام مقادیر ترکیبی قدیمی را با ساختار چندمقداری جدید جایگزین کرد. نموداری که از مستندات رسمی CSS استخراج شده، نحوه تبدیل تمام مقادیر تک‌مقداری به حالت چندمقداری را به‌خوبی نشان می‌دهد.

مقادیر پیش‌فرض برای display در CSS

احتمال زیادی وجود دارد که در کدهای CSS خود فقط از یک مقدار برای ویژگی display استفاده کرده باشیم (چه inner-display و چه outer-display) و این کاملاً قابل قبول است.

اگر تنها مقدار inner-display را مشخص کنیم (مثل flex یا grid)، در این صورت مقدار outer-display به‌طور پیش‌فرض block در نظر گرفته می‌شود. برعکس، اگر فقط مقدار outer-display را تعیین کرده باشیم (مثل block یا inline)، مقدار inner-display به‌صورت پیش‌فرض برابر با flow خواهد بود.

در اینجا flow اصطلاحی است که برای اشاره به نحوه چیدمان معمول المنت‌ها در CSS از زمان پیدایش آن به کار می‌رود. در واقع، این همان مدل نمایش سنتی CSS است که اغلب با آن آشنا هستیم.

تنها حالت مجاز برای سه مقدار در ویژگی display

تا اینجا درباره ویژگی display چندمقداری صحبت کردیم که می‌تواند دو مقدار دریافت کند، اما در یک مورد خاص امکان استفاده از سه مقدار نیز وجود دارد. زمانی که از مقدار list-item استفاده می‌کنیم، می‌توانیم به‌همراه آن یک مقدار outer-display (مثل block یا inline) و یکی از دو مقدار inner-display یعنی flow یا flow-root نیز مشخص کنیم.

.new {
  display: inline flow list-item;
}

البته این مورد کاربرد نسبتاً محدودی دارد؛ چراکه در اغلب مواقع، برای ایجاد یک المنت لیستی کافی است از تگ li استفاده کنیم. با این حال، آشنایی با این قابلیت می‌تواند مفید باشد؛ به‌ویژه زمانی که بخواهیم نمایشی مشابه list-item را برای المنتی غیر از li پیاده‌سازی نماییم.

مقادیر تک‌مقداری در ویژگی display در CSS

برخی از مقادیر ویژگی display وجود دارند که نمی‌توانیم آن‌ها را در ترکیب با مقادیر دیگر به‌کار ببریم. این مقادیر فقط به‌صورت تکی معتبر هستند:

• contents
• none

مقدار none احتمالاً آشناست و بارها از آن استفاده کرده‌ایم. اما مقدار contents نسبتاً جدیدتر است. در ادامه دقیقاً توضیح می‌دهیم که مقدار contents چه کاری انجام می‌دهد.

مقادیر کم‌تر شناخته شده display

بیش از ۲۰ مقدار مختلف برای ویژگی display در CSS وجود دارد، اما احتمالاً تاکنون از کم‌تر از ۱۰ مورد آن استفاده کرده‌ایم. در این بخش، برخی از مقادیر کم‌تر شناخته شده را بررسی می‌کنیم و نشان می‌دهیم چگونه می‌توان با استفاده از آن‌ها جلوه‌های جالب و متفاوتی ایجاد کرد.

بررسی مقدار contents در display

یکی از جذاب‌ترین و در عین حال کم‌تر شناخته شده‌ترین مقادیر ویژگی display در CSS، مقدار contents است. این مقدار رفتاری غیرمعمول دارد؛ زیرا المنت parent را عملاً از مدل DOM حذف می‌کند، در حالی که childهای آن المنت همچنان در ساختار DOM باقی می‌مانند.

درک کاربرد این مقدار ممکن است در ابتدا دشوار باشد. برای همین بهتر است یک مثال بررسی کنیم.

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div class="wrapper">
    <div>Item 3</div>
    <div>Item 4</div>
  </div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.wrapper:hover > * {
  background-color: red;
}

در کد بالا، یک شبکه دو ستونه با ۶ آیتم ایجاد کرده‌ایم که به‌صورت یک گرید ۲×۳ نمایش داده می‌شود. حال می‌خواهیم طوری تنظیم کنیم که وقتی روی آیتم‌های ۳ و ۴ (یعنی ردیف دوم گرید) هاور می‌کنیم، کل ردیف پس‌زمینه رنگ قرمز بگیرد.
این یک نیاز رایج در رابط‌های کاربری است؛ مثلاً زمانی که بخواهیم کل یک ردیف گرید در حالت هاور برجسته شود. اما این رفتار به‌صورت پیش‌فرض آن‌طور که انتظار داریم کار نمی‌کند. دلیل آن این است که ویژگی display: grid فقط روی childها مستقیم اعمال می‌شود. در نتیجه، ما در نهایت با گریدی مواجه می‌شویم که فقط ۵ آیتم دارد، چرا که آیتم‌های درون یک المنت wrapper، در یک سلول گرید مشترک قرار می‌گیرند.

برای حل این مشکل می‌توانیم به‌جای wrapper، از مقدار display: contents استفاده کنیم. در این حالت، CSS المنت wrapper را نادیده می‌گیرد و childهای آن را مستقیماً به‌عنوان آیتم‌های گرید در نظر می‌گیرد.

hter-language="css">.wrapper {
  display: contents;
}

بررسی مقدار flow-root در display

مقدار flow-root یکی دیگر از مقادیر کم‌تر شناخته شده ویژگی display است که تنها تفاوتش با مقدار flow در یک ویژگی خاص است: ایجاد یک بلاک Formatting Context. این یک اصطلاح فنی در CSS است که شامل سه رفتار مشخص می‌شود:

1. جلوگیری از بیرون زدن float المنت از محدوده آن
2. جلوگیری از ورود float المنت‌های خارجی به داخل المنت
3. جلوگیری از margin collapsing

در عمل، امروزه کم‌تر از ویژگی float استفاده می‌شود، بنابراین دو مورد اول اهمیت زیادی ندارند. اما مورد سوم یعنی جلوگیری از margin collapsing، می‌تواند بسیار کاربردی باشد.

به‌صورت پیش‌فرض در CSS، اگر دو المنت مجاور دارای margin مساوی (مثلاً ۱۰ پیکسل) باشند، فضای بین آن‌ها به جای ۲۰ پیکسل، تنها ۱۰ پیکسل خواهد بود؛ چرا که margin آن‌ها ادغام می‌شود. این رفتار گاهی غیرمنتظره به نظر می‌رسد. در چنین شرایطی می‌توان از مقدار flow-root برای حل این مسئله استفاده کرد. کافی است المنت موردنظر را در یک المنت با display: flow-root قرار دهیم تا از ادغام شدن حاشیه‌ها جلوگیری شود.

همچنین لازم به ذکر است که المنت‌های flex و grid نیز به‌طور پیش‌فرض یک بلاک Formatting Context ایجاد می‌کنند، به همین دلیل معمولاً شاهد ادغام نشدن حاشیه‌ها در چنین مواردی هستیم.

مقادیر display در CSS که نباید استفاده شوند

اگرچه بیش از ۲۰ مقدار مختلف برای ویژگی display وجود دارد، اما این به آن معنا نیست که باید از همه آن‌ها استفاده کنیم. بسیاری از این مقادیر برای شبیه‌سازی المنت‌های table مانند طراحی شده‌اند؛ مانند table، table-column، table-row و سایر مقادیر مشابه.

این مقادیر به‌طور کلی نباید مورد استفاده قرار گیرند؛ چرا که اگر نیاز داریم المنتی به‌صورت جدول نمایش داده شود، بهتر است از تگ HTML table استفاده کنیم. این روش نه‌تنها ساده‌تر است، بلکه برای صفحه‌خوان‌ها و فناوری‌های کمکی نیز قابل‌درک‌تر و دسترس‌پذیرتر است.

همچنین مقادیر دیگری مانند ruby، ruby-base-container و غیره وجود دارند که برای نمایش Ruby Textها طراحی شده‌اند. این موارد معمولاً در زبان‌هایی مانند ژاپنی برای افزودن تلفظ به بالای کاراکترها کاربرد دارند.

اما حتی در این مورد نیز استفاده از تگ‌های HTML خاص مانند ruby به جای مقادیر display مشابه توصیه می‌شود، چراکه هم دقیق‌تر هستند و هم توسط مرورگرها و ابزارهای کمکی بهتر پشتیبانی می‌شوند.

جمع‌بندی

ویژگی display در CSS، بسیار عمیق‌تر و پیچیده‌تر از آن چیزی است که در نگاه اول به نظر می‌رسد. استفاده از قابلیت‌های پیشرفته آن، امکانات بسیار جالب و قدرتمندی را برای طراحی رابط کاربری فراهم می‌کند.

با آشنایی با مقادیر کم‌تر شناخته شده‌ای مانند contents، flow-root و قابلیت استفاده چندمقداری، می‌توانیم کنترل بیشتری روی چیدمان المنت‌ها در صفحات وب داشته باشیم. در عین حال، دانستن اینکه از چه مقادیری نباید استفاده کرد نیز به همان اندازه مهم است تا کدی تمیزتر، بهینه‌تر و دسترس‌پذیرتر داشته باشیم.