منوی برگه ها
TwitterRssFacebook
منوی دسته ها

ارسال شده توسط در تاریخ ۳۰ بهم ۱۳۸۸ در طراحی وب | ۵ دیدگاه

مقاله شماره ۳ طراحی وب – یک کاربرد بسیار جالب برای important! در CSS

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

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

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

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

[codesyntax lang=”css”]

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

[/codesyntax]

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

۵ دیدگاه

  1. سلام
    با تشکر از شما و سایت ارزشمند شما
    شاد و پیروز باشید

  2. با تشکر از سایت خوبتون…اگه امکان داره بحث فایل های css روکاملترتوضیح بدین مثلاچگونگی فراخوانی فایل های inlineو…

  3. سلام . میتونم با وبسایت شما تبادل لینک داشته باشم ؟

  4. با بیان ساده بسیار زیبا آموزش میدید…ممنون از سایت خوبتون

  5. با سلام و خسته نباشید
    سپاسگزارم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!