دستور قدیمی و بی نوای important! همیشه مورد انتقاد طراحان وب بوده است. اگرچه در خطایابی CSS کاربرد خوبی دارد اما کد CSS که در نهایت شامل important! باشد کد چندان حرفه ای شناخته نمی شود. به طور مثال اگر شما این دستور را در کد خود قرار دهید و بعد از مدتی قصد ویرایش کد خود را داشته باشید این کار برای شما به یک کابوس تبدیل خواهد شد زیرا دلیل اعمال برخی استایل ها را متوجه نخواهید شد. این دستور روند آبشاری CSS را به هم می زند. اما اکنون قصد معرفی یک قابلیت جالب این دستور را دارم : صفحه های استایل پرینت.

فرض کنید که قصد داریم یک گالری عکس ایجاد کنیم. طبق مفاهیم توصیه شده در کد نویسی، تصاویر را به صورت یک لیست در می آوریم. سپس از یک کد جاوا اسکریپت برای ایجاد یک جلوه ویژه ورود و خروج استفاده می کنیم ولی اساس کار ما ستون ساده ای از تصاویر است. در صورتی که کاربری جاوا اسکریپت را غیر فعال کرده باشد تصاویر را به این صورت می بیند.

خوب تا اینجا چیز جدیدی یاد نگرفتیم. اما هنگامی که قصد ساختن یک استایل شیت برای پرینت داشته باشیم متوجه یک ایراد در طرحمان می شویم. هنگامی که شما از جاوا اسکریپت برای ایجاد انیمیشن در المنت های HTML استفاده کنید، نچارا باید Attribute مربوط به style آن استایل را تغییر دهید. در افکت ایجاد شده در طرح ما جاوا اسکریپت position و opacity تصاویر را تغییر می دهد پس در یک لحظه فقط یکی از آنها آشکار می شود. هنگامی که به استایل پرینت برویم، اگرچه ما انتظار دیدن ستونی از تصاویر داریم اما تنها یک تصویر نمایش داده می شود. و این به این دلیل است که شما قادر به تغییر مقصد media در استایل درون خطی نیستید. شما نمی توانید بگویید که تمام استایل های موجود در اتریبیوت استایل برای screen است.

بنابراین به روشی نیاز دارید که استایل های مربوط به پرینت را بر استایل های درون خطی غالب کند. تنها یک راه برای این کار وجود دارد و آن استفاده از important! است. در استایل شیت مربوط به پرینت، مقادیر position و opacity را reset کنسد و سپس از important! استفاده کنید.

img.gallery {
  position: static !important;
  opacity: 1 !important;
}

خوب به هدفمان رسیدیم.