ارث بری در css با جزئیات بیشتر

بیایید فرض کنیم که ویژگی font-family را بر روی Font Google که در استایل‌شیت خود وارد کرده‌ایم با استفاده از انتخابگر * (Asterix) تنظیم می‌کنیم که اساساً همه عناصر موجود در استایل‌‌شیت ما را انتخاب می‌کند. اگر به جای انتخابگر *‌، از انتخابگر <body> استفاده کنیم چه اتفاقی می‌افتد؟

حال بیایید نتیجه را نگاه کنیم:

body {
  font-family: Lato; /* this is a property that will be applied to all the child elements in the DOM */
}

۱.jpg

لیست Pokemon مورد علاقه من

هیچ تغییری اتفاق نمی‌افتد! اگرچه استفاده معمول از ویژگی font-family در اسناد، هنگام استفاده از * و body متفاوت است‌، اما ما شاهد نکته جالب تری هستیم. همه عناصر وراثتی ما در داخل <body> این فونت را به ارث می‌برند; نیازی به اعمال واضح بر روی هر عنصر فرزند درون استایل‌شیت نیست.

تصویر زیر نحوه انتقال خصوصیات از طریق DOM به عناصر فرزندشان را نشان می‌دهد.

۲.jpg

خصوصیات ارثی که از DOM عبور می‌کنند

یک مفهوم مهم که باید در خاطر داشته باشید این است که همه ویژگی‌ها(properties) نمی‌توانند به ارث برسند. برخی از متداول ترین ویژگی‌هایی که می‌توانند به ارث برسند‌، ویژگی‌های مربوط به color, font, font-family, font-size, font-weight, line-height, letter-spacing, text-align, white-space و ویژگی‌های دیگر مربوط به متن. ویژگی‌های لیست نیز به ارث می‌برند و برخی از متداول ترین ویژگی‌های لیست ارثی شامل،list-style, list-style-type, list-style-position و list-style-image است.

استفاده از مقادیر خاص

وراثت را می‌توان با استفاده از دو مقدار خاص دستکاری کرد: initial و inherit.

Inherit می‌تواند وراثت را در مکان‌هایی که cascade از آن جلوگیری می‌کند‌، تحمیل کند. این باعث می‌شود که عنصر هر مقداری را از عنصر پدر به ارث برساند. چگونه می‌توانیم این موضوع را آزمایش کنیم؟ اگر به یاد داشته باشید ما رنگ متن anchor خود را سیاه تنظیم کرده‌ایم‌، و underline را که استایل اصلی است حذف کردیم. اگر این دو قاعده را به عنصر پدر منتقل کنیم (#main-list) چه می‌شود. استایل‌های ما به هم می‌ریزد!

#main-list {
  list-style: none;
  display: flex;
  color: black; /* we moved these two lines here */
  text-decoration: none;
}

#main-list a {
  /*color: black;
  text-decoration: none; */
  background-color: pink;
  padding: 20px;
  margin: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 6px;
}

۳.png

توجه کنید که CSS چگونه به هم ریخت (پیوندهای anchor از یک سبک پیش فرض برخوردارند)

به منظور به ارث بردن مجموعه قوانین مربوط به color و text-decoration از عنصر اصلی‌، از مقدار inherit برای هر دو ویژگی استفاده خواهیم کرد. این موضوع بسیار مفید است زیرا اکنون می‌توانیم مجموعه قوانین عنصر پدر را ویرایش کنیم به عنوان مثال با استفاده از JavaScript و anchor باید این قوانین تازه تغییر یافته را اعمال کنیم. همچنین می‌توانیم از کلمه کلیدی inherit برای تحمیل به ارث بردن ویژگی‌هایی که به طور معمول به ارث نمی‌رسد‌، مانند border یا padding استفاده کنیم. با تغییرات زیر، اسکریپت موردنظر باید مانند قبل به نظر برسد (داشتن متن سیاه و بدون underline decoration):

#main-list a {
  color: inherit;
  text-decoration: inherit;
  background-color: pink;
  padding: 20px;
  margin: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 6px;
}

از طرف دیگر‌، کلمه کلیدی Initial هنگامی استفاده می‌شود که استایل‌های اعمال شده را می‌خواهیم باطل کنیم. هر خاصیت CSS به طور پیش فرض‌، یک مقدار اولیه دارد و ما با استفاده از کلمه کلیدی ‌initial، در واقع قانون را برای آن مقدار پیش‌ فرض تنظیم می‌کنیم. (اگر می‌خواهید در استایل خود از initial استفاده کنید‌، توجه کنید که در IE یا Opera Mini پشتیبانی نمی‌شود).

در لیست زیر CSS داریم که در آن رنگ در داخل anchor به رنگ قرمز تنظیم شده است، اما ما کلاس رنگ را روی مقدار اولیه قرار می‌دهیم. از آنجا که خاصیت رنگ به طور پیش فرض سیاه است (color: black)‌، عنصر هم سیاه خواهد بود.

#main-list a {
  color: red;
  text-decoration: inherit;
  background-color: pink;
  padding: 20px;
  margin: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 6px;
}

#main-list .rare {
  background-color: salmon;
  color: initial;
}

۴.png

نتیجه استفاده از لیست بالا

همانطور که احتمالاً متوجه شدید این ایده کاملاً با ایده cascade‌ها همراه است و در حقیقت بسیاری از مبتدیان این دو مفهوم را با هم ترکیب می‌کنند! امیدوارم که این مقاله مقداری از ابهام مربوط به inheritance و cascade‌ها را برطرف کند.

نتیجه

در اینجا ما codepen مقاله را داریم:

منبع