بسم الله الرحمن الرحیم

حتما شما نیز با کاربرانی که به دلیل آشنا نبودن به مرورگرهای دیگر، از مرورگر قدرتمند IE استفاده می کنند در وب سایت داشته، دارید و خواهید داشت!
خوب به دلیل مشکل کاربران در عدم استفاده از ابزار بهتر شما مجبور هستید که سایت خود را به نحوی برای کاربرانتان تغییر دهید که بتوانند آن را به خوبی مشاهده کنند:
 
لطفا مقاله "طراحی وب سایت برای مرورگرهای مختلف" را مطالعه کنید.

چطور می توان یک استایل CSS اختصاصی برای IE نوشت؟ Cross-Browser

برای این کار می توانید از روشهای زیر استفاده کنید:
در روش اول کافی است درون تگ head مانند تمامی link هایی که قرار می دهید تگ مربوط به لود کردن استایل IE را نیز قرار دهید اما با چند ویژگی، که می توانید تعیین کنید این استایل برای چه نسخه ای از مرورگر IE است.
شما می توانید با دستور IF تعیین کنید که این استایل فقط برای مرورگرهای IE مورد استفاده قرار گیرد
در دستور IF می توانید از شرطهای منطقی استفاده کنید:

• ! به معنی not است. مثال !IE یعنی برای IE استفاده نشود.
• gt به معنی greater than (بزرگتر از)
• gte به معنی greater than or equal (بزرگتر مساوی)
• lt به معنی less than (کوچکتر از)
• lte به معنی less than or equal (کوچکتر مساوی)

بسم الله الرحمن الرحیم

آموزش طراحی قالب Responsive

در این بخش قصد دارم به صورت مختصر آموزش ساخت یک قالب Responsive را آموزش دهم. بدون هیچ بحث اضافی سراغ مباحث مربوطه می رویم:

برای نمایش عناصر صفحه در مقایس های مختلف مثل کامپیوتر ها یا تبلت و در نهایت موبایل به نحوی که بتوان اطلاعات را به صورت صحیح نمایش داد نیاز است شما در مورد هر مقایس تصمیمی اخذ نمایید برای این فرایند کافی است از دستور media@ استفاده نمایید. ساختار این دستور بسیار ساده می باشد. در دستور زیر ما مشخص کردیم که اگر خروجی ما صفحه نمایش بود و سایز ما حداقل 1200 پیکسل بود تغییرات مورد نظر صورت گیرد. این کار را به صورت های زیر می توان انجام داد:

درون یک فایل StyleSheet

@media screen and (min-width : 1200px) {  
  /* let's do somethin' */ 
} 

لینک دادن به یک StyleSheet

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="small.css" /> 

در روش بالا اگر سایز ما حداقل 1200 پیکسل بود فایل مشخص شده به صفحه ما اضافه می گردد.

لینک دادن به یک فایل StyleSheet (در صورت موبایل بودن دستگاه یا هر دستگاهی با نهایت وضوح 480 پیکسل)

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" />  

لینک دادن به یک فایل StyleSheet درون دستورات CSS

@import url( small.css ) screen and ( min-width: 1200px );  

استفاده از عملگرهای منطقی

AND

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

OR

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

NOT

@media not all and (max-width: 600px) {
  html { background: red; }
}

Exclusive

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}

Overriding

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

در نهایت یک مثال کامل

@media 
  only screen and (min-width: 100px),
  not all and (min-width: 100px),
  not print and (min-height: 100px),
  (color),
  (min-height: 100px) and (max-height: 1000px),
  handheld and (orientation: landscape)
{
  html { background: red; }
}

مرورگرهایی که دستورات media@ را پشتیبانی می کنند:

• Firefox 3.5+
• Opera 9.5+
• Safari 3+
• Chrome
• Internet Explorer 9+

یک قالب سایت ساده برای آموزش

یک مثال برای طراحی