سلام دوستان. از چند وقت پیش تصمیم گرفتم یه دستی به سر و روی نوت های CSS ام بکشم و به عنوان مطالب کوتاه باهاتون به اشتراک بزارم و این دومین مطلب از این سری هست که براتون آماده کردم. (مطالب قبلی این سری رو میتونید در پایین این مطلب ببینید)
ویژگی display توی CSS مشخص میکنه که عنصر (element) چطور ساخته و رندر بشه. میدونید که هر نود (node) در html یک جعبه ی مستطیل شکل هست. این جعبه از اجزای مختلفی تشکیل شده که میشه به دو فضا تقسیمشون کرد. یکی فضای border, padding, margin و دومی هم فضایی که محتوا عنصر در اون قرار داده میشه.
وقتی به یک عنصر ویژگی display:contents میدیم، عملا از موتور چیدمان میخوایم که باکسی که قراره برای المنت بسازه رو محدود به عناصر داخلی و محتوای اون المنت کنه و بخش border, padding, margin رو حذف کنه/رندر نکنه.
با یک مثال ادامه میدم توضیحات رو، در زیر دو تا div داریم (آبی و سبز)، و هر دو دیو، padding margin و border یکسان دارن. قراره به div والد display:contents بدیم.
نتیجه ای که به دست میاد رو در تصویر زیر میتونید ببینید (خط قرمز خارجی فقط برای جدا کردن تصویر از پس زمینه است). همونطور که مشاهده میکنید باکس خارجی محدود شد به محتوای داخلش که در این مثال میشه یک نود متنی "باکس خارجی" و یکی هم باکس سبز رنگ داخلی.
ویژگی display: none هم تا یه جایی شبیه به display: contents جلو میره ولی تفاوت اصلیش اینه که وقتی یک المنت display: none هست، کلا از درخت رندر کنار گذاشته میشه و عناصر داخلش هم رندر نمیشه.
بالاتر هم اشاره کردم که وقتی عنصری ویژگی display: contents داره، ویژگی های border، padding، margin و تمام ویژگی های غیر ارثی (ویژگی هایی که امکان انتقالشون به عناصر داخلی وجود نداره) رندر نمیشن. مثلا ویژگی های چیدمان عنصر مثل position یا z-index یا مثلا ویژگی های مربوط به سایز و پس زمینه عنصر. ولی در عوض ویژگی های ارثی روی باکس عنصر هدفمون اعمال میشه. برای مثال ویژگی هایی مثل visibility، ویژگی های list، ویژگی های مربوط به چیدمان مثل text-align، تمام ویژگی های مربوط به فونت و غیره همچنان رندر میشه.
تغییراتی که ویژگی display:contents در عنصر ایجاد میکنه ظاهری هست و در حد خیلی ناچیزی منطقش رو ممکنه تغییر بده پس روی attribute ها و رویداد های عنصر اثری نمیزاره. فقط یک نکته وجود داره که اونم با استفاده از مثال بالا براتون توضیح میدم.
فرض کنیم من برای باکس خارجی (در مثال بالا) یک رویداد کلیک اضافه کردم، تا وقتی ویژگی display:contents رو به باکس خارجی ندادم، هر جاش که (هر دو قسمت آبی و سبز در تصویر) کلیک کنم اون رویداد صدا زده میشه. ولی بعد از دادن ویژگی display: contents باکس من به وسعت و بزرگی اولش نخواهد بود و ممکنه یه فضاهایی رو به خاطر چیدمان عناصر داخل از دست بدم (تصویر پایین; قسمت های هاشور خورده فضای از دست رفته است)، پس نباید انتظار داشته باشیم که با کلیک روی قسمت هایی که جزئی از باکس ما نیست رویداد کلیک ما صدا زده بشه.
و اما به چه دردی میخوره؟
وقتی میخواید عناصرتون بدون تغییر ساختار html ای که دارن، به صورت مستقیم در یک عنصر گرید یا یک فکس و یا هر container دیگه ای شریک باشن و به عنوان sibling (خواهر برادر) در اون container باشن، از display:contents استفاده کنید.
در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.
امیدوارم لذت برده باشید. خوشحال میشم منو در توییتر دنبال کنید.
