ویژگی display contents - سری نوت های CSS من

سلام دوستان. از چند وقت پیش تصمیم گرفتم یه دستی به سر و روی نوت های CSS ام بکشم و به عنوان مطالب کوتاه باهاتون به اشتراک بزارم و این دومین مطلب از این سری هست که براتون آماده کردم. (مطالب قبلی این سری رو میتونید در پایین این مطلب ببینید)ویژگی display توی CSS مشخص میکنه که عنصر (element) چطور ساخته و رندر بشه. میدونید که هر نود (node) در html یک جعبه ی مستطیل شکل هست. این جعبه از اجزای مختلفی تشکیل شده که میشه به دو فضا تقسیمشون کرد. یکی فضای border, padding, margin و دومی هم فضایی که محتوا عنصر در اون قرار داده میشه.تقسیم فضای عنصروقتی به یک عنصر ویژگی display:contents میدیم، عملا از موتور چیدمان میخوایم که باکسی که قراره برای المنت بسازه رو محدود به عناصر داخلی و محتوای اون المنت کنه و بخش border, padding, margin رو حذف کنه/رندر نکنه.با یک مثال ادامه میدم توضیحات رو، در زیر دو تا div داریم (آبی و سبز)، و هر دو دیو، padding margin و border یکسان دارن. قراره به div والد display:contents بدیم.دو باکس بدون اعمال display:contentsنتیجه ای که به دست میاد رو در تصویر زیر میتونید ببینید (خط قرمز خارجی فقط برای جدا کردن تصویر از پس زمینه است). همونطور که مشاهده میکنید باکس خارجی محدود شد به محتوای داخلش که در این مثال میشه یک نود متنی "باکس خارجی" و یکی هم باکس سبز رنگ داخلی.دو باکس بعد از اعمال 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 باکس من به وسعت و بزرگی اولش نخواهد بود و ممکنه یه فضاهایی رو به خاطر چیدمان عناصر داخل از دست بدم (تصویر پایین; قسمت های هاشور خورده فضای از دست رفته است)، پس نباید انتظار داشته باشیم که با کلیک روی قسمت هایی که جزئی از باکس ما نیست رویداد کلیک ما صدا زده بشه.فضای باکس بعد از display:contentsو اما به چه دردی میخوره؟وقتی میخواید عناصرتون بدون تغییر ساختار html ای که دارن، به صورت مستقیم در یک عنصر گرید یا یک فکس و یا هر container دیگه ای شریک باشن و به عنوان sibling (خواهر برادر) در اون container باشن، از display:contents استفاده کنید.در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.انیمیشن فرار - حس خوبی که مدیون CSS اممربع بدون ارتفاع - سری نوت های CSS منمحیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020چند نکته خودمانی در مورد برنامه نویسی JS و ReactJSبررسی iterable و iterator در جاوا اسکریپتامیدوارم لذت برده باشید. خوشحال میشم منو در توییتر دنبال کنید.