وراثت

پادکست CSS - 005: Inheritance

فرض کنید شما فقط مقداری CSS نوشتید تا عناصر شبیه یک دکمه به نظر برسند.

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

سپس یک عنصر پیوند را به یک مقاله از محتوا اضافه می‌کنید، با مقدار class .my-button . با این حال، مشکلی وجود دارد، متن آن رنگی نیست که انتظار داشتید باشد. چگونه این اتفاق افتاد؟

اگر مقداری برای آن‌ها تعیین نکنید، برخی از ویژگی‌های CSS ارث می‌برند. در مورد این دکمه، color را از این CSS به ارث برده است:

article a {
  color: maroon;
}

در این درس خواهید آموخت که چرا این اتفاق می افتد و چگونه وراثت یک ویژگی قدرتمند است که به شما کمک می کند کمتر CSS بنویسید.

جریان ارثی

بیایید با استفاده از این قطعه HTML به نحوه عملکرد وراثت نگاهی بیندازیم:

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

عنصر ریشه ( <html> ) هیچ چیزی را به ارث نمی برد زیرا اولین عنصر در سند است. مقداری CSS روی عنصر HTML اضافه کنید، و آن شروع به آبشاری سند می کند.

html {
  color: lightslategray;
}

ویژگی color به طور پیش فرض توسط عناصر دیگر به ارث می رسد. عنصر html دارای color: lightslategray ، بنابراین همه عناصری که می توانند رنگ را به ارث ببرند اکنون دارای رنگ lightslategray خواهند بود.

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

فقط <p> متن ایتالیک خواهد داشت زیرا عمیق ترین عنصر تودرتو است. وراثت فقط به سمت پایین جریان می یابد، نه به عناصر والد.

کدام ویژگی ها به طور پیش فرض به ارث می رسند؟

همه ویژگی‌های CSS به‌طور پیش‌فرض به ارث برده نمی‌شوند، اما بسیاری از ویژگی‌ها هستند. برای مرجع، در اینجا لیست کاملی از ویژگی هایی است که به طور پیش فرض به ارث برده می شوند، که از مرجع W3 تمام ویژگی های CSS گرفته شده است:

وراثت چگونه کار می کند

هر عنصر HTML دارای هر ویژگی CSS است که به طور پیش فرض با مقدار اولیه تعریف شده است. مقدار اولیه خاصیتی است که به ارث نمی رسد و اگر آبشار نتواند مقداری را برای آن عنصر محاسبه کند به عنوان یک پیش فرض نشان داده می شود.

ویژگی هایی که می توانند به ارث برده شوند به سمت پایین حرکت می کنند و عناصر فرزند یک مقدار محاسبه شده دریافت می کنند که نشان دهنده مقدار والد آن است. این بدان معناست که اگر والدین font-weight روی bold تنظیم کرده باشد، همه عناصر فرزند پررنگ خواهند بود، مگر اینکه font-weight آنها روی مقدار دیگری تنظیم شده باشد، یا شیوه نامه عامل کاربر مقداری برای font-weight برای آن عنصر داشته باشد.

نحوه ارث بردن و کنترل ارث به صراحت

وراثت می تواند عناصر را به روش های غیرمنتظره ای تحت تأثیر قرار دهد، بنابراین CSS ابزارهایی برای کمک به آن دارد.

کلمه کلیدی inherit

شما می توانید هر ویژگی را با کلمه کلیدی inherit کاری کنید که ارزش محاسبه شده والد خود را به ارث ببرد. یک راه مفید برای استفاده از این کلمه کلیدی ایجاد استثناها است.

strong {
  font-weight: 900;
}

این قطعه CSS همه عناصر <strong> را به‌جای font-weight bold پیش‌فرض، که معادل font-weight: 700 900 می‌کند.

.my-component {
  font-weight: 500;
}

کلاس .my-component font-weight روی 500 تنظیم می کند. برای ساختن عناصر <strong> داخل .my-component همچنین font-weight: 500 اضافه کنید:

.my-component strong {
  font-weight: inherit;
}

اکنون، عناصر <strong> داخل .my-component دارای font-weight 500 خواهند بود.

می‌توانید این مقدار را به صراحت تنظیم کنید، اما اگر inherit و CSS تغییرات .my-component در آینده استفاده کنید، می‌توانید تضمین کنید که <strong> شما به‌طور خودکار با آن به‌روز خواهد ماند.

کلمه کلیدی initial

وراثت می تواند باعث ایجاد مشکل در عناصر شما شود و initial یک گزینه بازنشانی قدرتمند را در اختیار شما قرار می دهد.

قبلاً یاد گرفتید که هر ویژگی یک مقدار پیش فرض در CSS دارد. کلمه کلیدی initial یک ویژگی را به مقدار اولیه و پیش فرض باز می گرداند.

aside strong {
  font-weight: initial;
}

این قطعه وزن پررنگ را از تمام عناصر <strong> داخل یک عنصر <aside> حذف می‌کند و به جای آن، آنها را وزن عادی می‌کند که مقدار اولیه است.

کلیدواژه unset

اگر یک ویژگی به طور پیش فرض به ارث برده شود یا خیر، ویژگی unset رفتار متفاوتی دارد. اگر یک ویژگی به طور پیش‌فرض به ارث برده شود، کلمه کلیدی unset همان inherit خواهد بود. اگر ویژگی به طور پیش‌فرض به ارث نمی‌رسد، کلمه کلیدی unset برابر با initial است.

به خاطر سپردن ویژگی‌های CSS که به‌طور پیش‌فرض به ارث برده می‌شوند، می‌تواند سخت باشد، unset می‌تواند در این زمینه مفید باشد. به عنوان مثال، color به طور پیش فرض به ارث می رسد، اما margin اینطور نیست، بنابراین می توانید این را بنویسید:

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

اکنون، margin حذف شده و color به مقدار محاسبه شده ارثی برمی گردد.

می توانید مقدار unset با ویژگی all نیز استفاده کنید. اگر به مثال بالا برگردیم، اگر استایل های p سراسری چند ویژگی اضافی دریافت کنند، چه اتفاقی می افتد؟ فقط قانونی که برای margin و color تنظیم شده است اعمال می شود.

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

اگر قانون aside p را به all: unset در عوض، مهم نیست که در آینده چه سبک های جهانی برای p اعمال می شود، آنها همیشه تنظیم نشده خواهند بود.

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

درک خود را بررسی کنید

دانش خود را در مورد وراثت آزمایش کنید

کدام یک از خواص زیر قابل ارث است؟

animation
انیمیشن ها به بچه ها منتقل نمی شوند.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

کدام مقدار مانند inherit عمل می کند مگر اینکه چیزی برای ارث بردن وجود نداشته باشد و سپس مانند initial رفتار می کند؟

reset
یک مقدار معتبر نیست، دوباره امتحان کنید!
unset
🎉
superset
یک مقدار معتبر نیست، دوباره امتحان کنید!

منابع