تمام استایل ها را با یک خط CSS حذف کنید

ek3nk4r 2023-02-19

0 95 خواندن این مطلب 4 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

مسئله

بسیاری از اوقات در کار خود به عنوان یک توسعه دهنده frontend مجبور بودید اجزایی را با سبک های سفارشی مطابق با طرح های خلاقانه ایجاد کنید. سبک های پیش فرض عناصر HTML مانند <button /> یا <a /> هرگز آن سبکی که ما می خواهیم نیست.

رایج ترین راه حل برای این مشکل نادیده گرفتن سبک های پیش فرض است، به عنوان مثال:

.reset {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    // and so on...
}

من خودم این کار را انجام می دادم تا زمانی که راه حل بسیار سریعتر و راحت تری را کشف کردم!

تمام استایل ها را حذف کنید

را all: unset ویژگی CSS تمام ویژگی های CSS را به مقادیر اولیه یا ارثی آنها بازنشانی می کند. این بدان معنی است که همه ویژگی ها به مقادیری که در شیوه نامه عامل کاربر تنظیم شده اند یا مقادیری که از عنصر والد منتقل شده اند باز می گردند.

با استفاده از all: unset، می توانید به سرعت و به راحتی تمام استایل ها را برای یک عنصر خاص بازنشانی کنید که می تواند در بسیاری از موقعیت ها مفید باشد. به عنوان مثال، ممکن است از آن برای ایجاد یک کلاس «تنظیم مجدد» استفاده کنید که می‌توانید زمانی که می‌خواهید همه استایل‌ها را حذف کنید و تازه شروع کنید، روی یک عنصر اعمال کنید.

مثال ها

ایجاد کلاس “تنظیم مجدد”:

.reset {
    all: unset;
}

زمانی که می‌خواهید تمام استایل‌های آن را حذف کنید، می‌توانید این کلاس را به یک عنصر اعمال کنید:

<div class="reset">This element has had its styles reset.</div>

سبک های اعمال شده توسط جاوا اسکریپت:

.override {
    all: unset;
    background-color: yellow;
    padding: 10px;
}

در این مثال، شما از all: unset برای حذف هر سبکی که قبلاً روی یک عنصر اعمال شده بود، و سپس استایل های خود را اعمال کنید (در این مورد، پس زمینه زرد و بالشتک 10 پیکسلی).

بازنشانی سبک‌ها برای بخش خاصی از صفحه:

.section {
    all: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: lightgray;
    padding: 20px;
}

در این مثال، شما از all: unset برای حذف تمام سبک ها برای یک بخش از صفحه، و سپس اعمال مجموعه ای جدید از سبک ها برای ایجاد یک طرح بندی سفارشی.

تمام ارزش های `all` ویژگی

ویژگی all یک ویژگی مختصر در CSS است که تمام خصوصیات CSS یک عنصر را به آنها تنظیم می کند initial یا ارزش های ارثی ویژگی all می تواند چهار مقدار داشته باشد: initial، برگرداندن، ارث بردن و تنظیم نشده است.

initial: تمام خصوصیات را به مقادیر اولیه آنها تنظیم می کند. مقدار اولیه یک ویژگی مقداری است که توسط شیوه نامه CSS مرورگر تعریف شده است، یا مقدار پیش فرض تعریف شده در مشخصات CSS در صورتی که شیت وجود نداشته باشد. به عنوان مثال، تنظیم all دارایی به initial در یک عنصر، تمام ویژگی های CSS آن به مقادیر پیش فرض بازنشانی می شود.
revert: تمام خصوصیات را به مقادیر ارثی آنها تنظیم می کند. مقادیر ارثی از یک عنصر والد به فرزندان آن منتقل می شود. به عنوان مثال، اگر شما تنظیم کنید color ویژگی یک عنصر والد به redو سپس تنظیم کنید all ویژگی یک عنصر فرزند به revert، عنصر فرزند به ارث می برد color دارایی از والد خود و دارای رنگ red.
inherit: همه ویژگی ها را با مقادیر یکسان عنصر والد تنظیم می کند. به عنوان مثال، اگر شما تنظیم کنید color ویژگی یک عنصر والد به redو سپس تنظیم کنید all ویژگی یک عنصر فرزند به inherit، عنصر فرزند همان را خواهد داشت color دارایی به عنوان والد خود و دارای رنگ red.
unset: همه خصوصیات را بر روی مقادیر اولیه آنها (اگر ارثی نیستند) یا مقادیر ارثی آنها (اگر ارثی باشند) تنظیم می کند. این مقدار مشابه است revert، اما در صورت عدم ارث بری، خواص را به مقادیر اولیه خود بازنشانی می کند. به عنوان مثال، اگر شما تنظیم کنید color ویژگی یک عنصر والد به redو سپس تنظیم کنید all ویژگی یک عنصر فرزند به unset، عنصر فرزند به ارث می برد color دارایی از والد خود و دارای رنگ red.

<body>
  <div>
    <button class="initial">initial</button>
    <button class="revert">revert</button>
    <button class="inherit">inherit</button>
    <button class="unset">unset</button>
  </div>
  <div>
    <button>unstyled</button>
  </div>
</body>

body {
  background-color: gray;
  padding: 20px;
}

div {
  display: flex;
  justify-content: center;
  color: white;
  gap: 10px;
}

button {
  width: 200px;
  height: 75px;
  margin: 10px;
  font-size: 18px;
  border: 2px solid black;
}

.initial {
  all: initial;
  background-color: lightgray;
}

.revert {
  all: revert;
  background-color: lightblue;
}

.inherit {
  all: inherit;
  background-color: lightgreen;
}

.unset {
  all: unset;
  background-color: lightpink;
}

قطعه کد ارائه شده

به طور خلاصه، می توانید از ویژگی all برای بازنشانی تمام خصوصیات CSS یک عنصر به آنها استفاده کنید initial یا مقادیر به ارث برده شده یا به ارث بردن تمام خصوصیات CSS از عنصر والد آن. انتخاب مقدار مورد استفاده بستگی به مورد استفاده خاص و رفتار مورد نظر دارد.

هشدارها

اخطارهایی برای استفاده وجود دارد all: unset، با این حال. اول، همه ویژگی ها به طور کامل توسط بازنشانی نمی شوند all: unset. برخی از خواص، مانند display، visibility، و float، به مقادیر اولیه خود بازنشانی می شوند، در حالی که سایرین، مانند padding و margin، به هیچ وجه ریست نمی شوند. علاوه بر این، برخی از خواص که توسط بازنشانی می شوند all: unset ممکن است عواقب ناخواسته ای مانند تنظیم مجدد اندازه فونت یا رنگ پس زمینه داشته باشد.

سازگاری مرورگر

استفاده از all ویژگی به طور گسترده توسط مرورگرهای مدرن پشتیبانی می شود و برای اکثر برنامه های فعلی مشکلی نیست. تنها استثنای قابل توجه اینترنت اکسپلورر و اپرا مینی هستند که از این ویژگی پشتیبانی نمی کنند. با این وجود، همیشه توصیه می‌شود که کد خود را به طور کامل در مرورگرها و دستگاه‌هایی که می‌خواهید هدف قرار دهید آزمایش کنید تا مطمئن شوید که همه چیز همانطور که انتظار می‌رود کار می‌کند.