ویژگی مختصر CSS به نام “all” تمام ویژگی‌های یک عنصر را با استثنای ویژگی‌های “unicode-bidi”، “direction” و ویژگی‌های سفارشی CSS را بازنشانی می‌کند.
این ویژگی به ویژگی‌ها را به مقادیر اولیه یا ارثی تنظیم می‌کند یا به مقادیر به طور صریحی که در یک لایه پشته یا در مبدا صفحه‌نمایش قرار دارند.
ویژگی‌های مؤلفه این ویژگی به عنوان یک نمایش مختصر برای تمام ویژگی‌های CSS، با استثنای ویژگی‌های “unicode-bidi”، “direction” و ویژگی‌های سفارشی CSS عمل می‌کند.
ویژگی “all” با یکی از مقادیر کلیدی CSS جهانی مشخص می‌شود. لازم به ذکر است که هیچ‌کدام از این مقادیر تأثیری بر روی ویژگی‌های “unicode-bidi” و “direction” ندارند.
مقادیر ممکن
در زیر لیستی از مقادیر ممکن برای تمام ویژگی‌ها آورده شده است:
initial – نشان می‌دهد که تمام ویژگی‌های عنصر باید به مقادیر اولیه آن بازنشانی شوند.
inherit – نشان می‌دهد که تمام ویژگی‌های عنصر باید به مقادیر ارثی آن تنظیم شوند.
unset – نشان می‌دهد که ویژگی‌های عنصر باید به مقادیر ارثی تنظیم شوند در صورتی که به ارث‌بری پیش‌فرض اشاره داشته باشند، در غیر این صورت به مقادیر اولیه آنها بازنشانی شود.
revert – رفتار مشخصات را بسته به مبدأ شیوه‌نامه مرتبط با اعلام کننده مشخص می‌کند:
اگر قاعده به مبدأ نویسنده متصل باشد، مقدار revert اعتباری به سطح کاربر بر می‌گرداند و مقادیر مشخص شده را بازمحاسبه می‌کند و گویا قوانین سطح نویسنده بر روی عنصر اعمال نشده است.
در سیاق revert، مبدأ نویسنده شامل مبدأ های override و animation می‌شود.
اگر قاعده قسمت مبدأ کاربری باشد، مقدار revert را به سطح عامل کاربر بازمی‌گرداند.
این بدان معناست که مقادیر مشخص شده محاسبه می‌شوند و گویا هیچ قانونی در سطح نویسنده یا کاربر برای عنصر تعریف نشده است.
اگر قاعده از مبدأ عامل کاربری برخوردار باشد، مقدار revert مانند unset عمل می‌کند.
revert-layer – به بازگشت ویژگی‌های عنصر به یک لایه پیشین از ترتیب پشته اشاره می‌کند، در صورت موجود بودن. این هنوز در مرحله آزمایشی است.
اگر هیچ لایه دیگری از ترتیب پشته موجود نباشد، ویژگی‌های عنصر به قاعده مطابقت دار در لایه کنونی بازنشانی می‌شوند، اگر موجود باشد، یا به یک مبدأ سبک از پیش بازنشانی می‌شوند.
Basic Example
در این مثال زیر، ویژگی CSS all برای کاملاً تنظیم تمام ویژگی‌های استایل در عناصر خاص استفاده شده است.
<div> اول با شناسه custom1، نمایشی از استایل پیش‌فرض بدون استفاده از ویژگی all دارد، در حالی که عناصر <div> بعدی (custom2، custom3 و custom4) تأثیر all: inherit؛، all: initial؛ و all: unset؛ را به ترتیب نشان می‌دهند.
<html>
<head>
<style>
html {
font-size: x-large;
color: #2c3e50;
}
#custom1 {
background-color: #ecf0f1;
color: #e74c3c;
font-family: 'Verdana', sans-serif;
font-weight: bold;
}
#custom2 {
background-color: #ecf0f1;
color: #e74c3c;
font-family: 'Verdana', sans-serif;
font-weight: bold;
all: inherit;
}
#custom3 {
background-color: #ecf0f1;
color: #e74c3c;
font-family: 'Verdana', sans-serif;
font-weight: bold;
all: initial;
}
#custom4 {
background-color: #ecf0f1;
color: #e74c3c;
font-family: 'Verdana', sans-serif;
font-weight: bold;
all: unset;
}
</style>
</head>
<body>
<p>No all property:</p>
<div id="custom1">Hello from a creative and innovative universe!</div>
<p>all: inherit:</p>
<div id="custom2">Discover the virtually endless possibilities in your head.</div>
<p>all: initial:</p>
<div id="custom3">Welcome the start of an interesting new trip.</div>
<p>all: unset:</p>
<div id="custom4">Use the power of new ideas to realize your full potential.</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام