سلام به همه دوستان عزیز

میخوام در اینجا تفاوت بین چهار کلمه کلیدی ( Inherit, initial, unset, revert ) را توضیح بدم. امیدوارم که مفید واقع بشه برای همه دوستان 

استاد صالحی عزیز دو مقدار ( Inherit, initial ) را در ویدیو بطور کامل و واضح توضیح دادند، این دو مقدار از قدیم وجود داشته اما دو مقدار جدید نیز هم هستند که گاها بنا به نیاز پروژه میشه از اونها استفاده کرد.

اول یک توضیح کتابی بدم از این چهار مقدار و بعد با مثال توضیح میدم که خیلی درک مطلب واضح‌تر بشه

• initial: این مقدار ویژگی مورد نظر را ریست کرده و به مشخصات پیشفرض ( spec default ) خود برمیگرداند.
• Inherit: این مقدار باعث میشود که ویژگی مورد نظر از تولد والد خود مقدارش را به ارث ببرد.
• unset: آن ویژگی هایی که خاصیت ارثبری دارند ( مثل color ) از تگ والد، مقدار خود را به ارث ببرند و آن ویژگی هایی که قابلیت ارثبری ندارند ( مثل float ) از به مشخصات پیشفرض ریست خواهند شد همانند initial
• revert: آن ویژگی هایی که خاصیت ارثبری دارند ( مثل color ) از تگ والد، مقدار خود را به ارث ببرند و آن ویژگی هایی که قابلیت ارثبری ندارند مقدار خود را از مقادیر پیشفرض مرورگر ( User Agent Stylesheet ) میگیرد که باعث میشود مثلا خصوصیتی مثل display به مشخصات پیشفرض inline برنگردد و از مقدار پیشفرض مرورگر یعنی block پیروی کند

احتمالا با توضیحات بالا کمی گیج شدید و درکش کمی دشوار باشه در مثال زیر کامل توضیح براتون روشن میشه:

   <style>
       .wrapper {
            color: orange;
            display: block;
        }
        .wrapper p {
            color: purple;
        }
     p.one {
            color: initial;
            display: initial;
        }
        p.two {
            color: inherit;
            display: inherit;
        }
        p.three {
            color: unset;
            display: unset;
        }
        p.four {
            color: revert;
            display: revert;
        }
    style>
    <div class="wrapper">
        <p class="one">Onep>
        <p class="two">Twop>
        <p class="three">Threep>
        <p class="four">Fourp>
        <p>Fivep>
    div>

پنج تگ p داریم که داخل تگ والد با کلاس wrapper قرار گرفتند. به تگ والد یک سری ویژگی‌ها دادیم به خود تگ p هم همینطور

بعد هر کدام را با کلاس 1 تا چهار مشخص کردیم.

حالا ببینیم با preperty  هایی که دادیم چه بلایی بر سر پاراگراف‌های ما میاد :

p.one : رنگ پاراگراف اول مشکی میشود و زیرا در مشخصات پیشفرض رنگ ما مشکی هست و کاری به رنگی که ما در پروژه تعریف کردیم ندارد که نارنجی یا بنفش هست. display پاراگرف inline میشود زیرا بر خلاف تصویر اکثر افراد مشصخات پیشفرض تمام عناصر بصورت inline level هست نه block level !!! بله، غلط نگارشی وجود ندارد! بر خلاف باور همه عناصر بصورت inline هستند و این استایل پیشفرض مرورگر( User Agent Stylesheet ) هست که برای المان‌ها مقدار block را در نظر گرفته

یک تصویر هم پیوست میشه برای اینکه اگر هنوز باورنکردید متوجه داستان بشید یا اینکه در inspect هم میتونید ملاحظه کنید.

p.two: رنگ نوشته به رنگ نارنجی در می‌آید زیرا از تگ والد که نارنجی هست رنگ را به ارث میبرد و کاری ندارد که با به تگ p رنگ بنفش دادیم. همچنین display از والد خود به ارث میرود و block باقی می‌ماند زیرا خصویت تگ پاراگراف block level هست.

p.three : رنگ پاراگراف سوم مجددا نارنجی میشود زیرا خصوصیت color از نوع Inherited هست و میتواند به ارث برده شود اما برای display این دفعه بر خلاف پاراگراف دوم به مقدار مشخصات پیشفرض خود یعنی initial بر میگردد زیرا خصوصیت Display از نوع Non-Inherited است و به همین دلیل ارث بری از تگ والد انجام نمی‌پذیرد.

*** احتمالا یک چالش ذهنی اینجا پیش میاد و اینه که در پاراگراف دوم گفتیم که display:inherit از تگ والد خود به ارث میبره مقدار block را اما اینجا گفتیم که ارث بری نمیکنه. تفاوت اینجاست که ما وقتی از کلمه کلیدی inherit برای property استفاده میکنیم به اون اجبار میکنه که اون property مثلا display چه ذاتا از نوع Inherited باشه و چه نباشه باید و باید ارت بری کنه از تگ والد خودش !!! اما در مقداری که از کلمه کلیدی unset استفاده میکنیم اینجا دیگه به ذات اون property نگاه میکنه اگر در دات خودش از نوع Inherited بود که به ارث میبره اما اگر ذاتا از نوع Non-Inherited بود مقدار خودش را از مشخصات پیشفرض ( spec default ) میگیره.

این رو بگم که ما از مقدار unset بسیار به ندرت استفاده میکنیم به دلیل همین داستان هایی که داره و ممکنه خیلی گیج کننده باشه و بعضی جاها اون چیزی که میخوایم رو به ما نده مثل همین display که دوست نداریم inline باشه برای اکثر المان هامون

p.four: رنگ پاراگراف چهار همچنان نارنجی بنا به توضیحات قبل زیرا خصوصیت color از نوع Inherited هست و میتواند به ارث برده شود اما برای display اینجا مقدار آن را به مقدار پیشفرض مرورگر( User Agent Stylesheet)

برمیگرداند یعنی دقیقا همان چیزی که ما میخواهیم. یعنی مقدار display ما در پاراگراف چهارم block باقی میماند. برای زمان هایی خوبه و کاربرد داره که ما کلی خصوصیت دادیم به تگهامون و روی همدیگه دارن اعمال میشن و یک جا میخوایم بگیم همه برگردند به مقدار پیشفرض مرورگر و نه مشخصات پیشفرض و خب اینجا بهترین گزینه برای ما همین است.

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

https://css-tricks.com/inherit-initial-unset-revert/

https://www.digitalocean.com/community/tutorials/css-inherit-initial-unset

https://www.quirksmode.org/blog/archives/2021/06/inherit_initial.html

همچنین دو لینک هم قرار میدم برای اینکه property هایی که از نوع Inherited و non-Inherited هستند را بشناسید و بدونید داستان از چه قرار هست چون خیلی در متن ازشون استفاده شد.

https://gist.github.com/dcneiner/1137601

https://dev.to/muyunyun/inherited-and-non-inherited-in-css-mi4

موفق باشید دوستان عزیز