در دنیای طراحی وب، CSS یکی از اصلی‌ترین ابزارها برای ایجاد استایل و طراحی صفحات وب است. یکی از ویژگی‌های کمتر شناخته‌شده در CSS خاصیت @starting-style است. این ویژگی به طراحان اجازه می‌دهد تا استایل‌دهی اولیه‌ای برای عناصر خاص ایجاد کنند، بطوریکه هنگام بارگیری صفحه به خوبی نمایش داده شوند.
این خاصیت به شما این امکان را می‌دهد که انواع مختلفی از استایل‌ها را برای شروع بارگیری صفحه تعریف کنید. در اکثر مواقع، این ویژگی برای بهبود عملکرد وب‌سایت و جلوگیری از مشکلات مربوط به ظاهر عناصر هنگام بارگیری اطلاعات استفاده می‌شود.
استفاده از این خاصیت می‌تواند در طراحی وب‌سایت‌هایی که نیاز به بارگیری سریع و بهینه هستند، بسیار مفید باشد. به عنوان مثال، در صفحاتی که شامل تصاویر بزرگ یا منابع سنگین هستند، استفاده از @starting-style می‌تواند به نمایش سریع‌تر و بهتر المان‌های صفحه کمک کند.
این ویژگی در ترکیب با سایر امکانات CSS مانند انیمیشن‌ها و ترنزیشن‌ها نیز بسیار کارآمد است. مثلا می‌توان طرح اولیه‌ای را با @starting-style تعریف کرد و سپس به کمک انیمیشن‌ها جلوه‌های ویژه‌ای را برای ظاهر شدن آن‌ها اجرای کرد.
حال برای تشریح بهتر این موضوع، به مثالی از کد @starting-style نگاهی می‌اندازیم:
<style>
@starting-style {
body {
background-color: #f3f3f3;
margin: 0;
}
img {
opacity: 0;
}
}
</style>
تشریح کد
@starting-style: تعریف یک بلوک سبک اولیه برای عناصر انتخاب‌شده.
body: هدف قرار دادن عنصر بدن (body) برای اعمال استایل اولیه.
background-color: تنظیم رنگ پس‌زمینه بدن (body) به خاکستری روشن (#f3f3f3).
margin: حذف فاصله‌ها در اطراف بدن (body) برای جلوگیری از حاشیه‌های پیش‌فرض.
img: هدف قرار دادن تمام عناصر تصویری (img) در صفحه.
opacity: تنظیم شفافیت تصاویر روی صفر، برای اجرا شدن پیش از بارگیری کامل منابع.