کوئری های رسانه ای

CSS3 تمامی انواع رسانه های تحت پشتیبانی CSS2.1 ، مانند screen , print و handheld را پشتیبانی می کند. اما چندین ویژگی رسانه ای جدید شامل max-width , device-width , orientation و color نیز به آن اضافه شده است. دستگاه های جدید ارائه شده پس از ارائه CSS3 (مانند آی-پد و اندرویید) مطمئنا ویژگی های رسانه ای را پشتیبانی خواهند کرد. پس، فراخوانی یک رسانه برای هدف گیری این دستگاه ها توسط ویژگی های CSS3 درست کار خواهد کرد و همچنین در صورت دسترسی به این رسانه ها توسط یک مرورگر کامپیوتر قدیمی که CSS3 را پشتیبانی نمی کند، از آنها چشموشی خواهد شد.

به مثال زیر توجه کنید :

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

این کوئری رسانه ای مسلما خود بیانگر می باشد. اگر مرورگر این صفحه را بر روی یک نمایشگر نشان دهد و اگر عر نمایشگر 480 پیکسل باشد یا کمتر باشد ، Shetland.css بارگزاری خواهد شد.

ویژگی های جدید CSS3 شامل orientation (عمودی و افقی) ، device-width ، min-device-width و بسیاری ویژگی دیگر نیز می باشد.

کوئری های چند رسانه ای همچنین می توانند در یک استایل شیت تکی گذاشته شوند که کارآمدترین گزینه برای استفاده می باشند :

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

کد بالا از یک قالب رایگان برای کوئری های چند رسانه ای بین دستگاه های محبوب، می باشد.

 

کوئری های رسانه ای CSS3

موارد بالا مثال هایی از چگونگی عملکرد کوئری های رسانه ای در هر دو زبان CSS3 و CSS2.1 می باشد. حال بیاید به مواردی بپردازیم که نحوه کار با کوئری های رسانه ای CSS3 برای طراحی واکنشی را توضیح می دهند.

خواص min-width و max-width دقیقا کاری را می کنند که از ظاهرشان برداشت می کنیم. خاصیت min-width حداقل عرضی را که یک استایل مشخص (یا یک استایل شیت جداگانه) در نمایشگر یا مرورگر باید بر روی آن تنظیم شود ، تعیین می کند. هرچیزی که زیر این محدوده باشد به استایل شیت مرتبط خواهد شد و در غیر اینصورت استایل ها نادیده گرفته خواهند شد. خاصیت max-width دقیقا عکس قبلی است.

هر چیزی که بالاتر از عرض حداکثری تعیین شده مرورگر یا نمایشگر باشد، بر روی کوئری رسانه ای واکنشی اعمال نخواهد شد. به این نکته نیز توجه کنید که در مثال های زیر از ترکیبی برای کوئری های رسانه ای استفاده می کنیم که می توان همه آنها را در یک استایل شیت استفاده کرد.همانطور که در بالا گفتیم تاثیرگذارترین و کارآمدترین روش در استفاده از کوئری های رسانه ای این است که همه آنها را در کنار بقیه استایل های وب سایت ، در یک استایل شیت CSS قرار دهیم. با این روش ، درخواست های چندگانه برای هر استایل شیت چندین بار ایجاد نخواهند شد.

 

@media screen and (min-width: 600px) {
     .hereIsMyClass {
          width: 30%;
          float: right;
     }
}

کلاسه مشخص شده (hereIsMyClass ) در کوئری بالا، فقط زمانی عمل خواهد کرد که عرض نمایشگر یا مرورگر بیشتر از 600 پیکسل باشد. بعبارتی دیگر این کوئری زمانی کار خواهد کرد که عرض حداقل ، 600 پیکسل باشد (حال، 600 باشد یا عریضتر).

@media screen and (max-width: 600px) {
     .aClassforSmallScreens {
          clear: both;
                   font-size: 1.3em;
     }
}

حال با استفاده از max-width، این کوئری رسانه ای فقط در مرورگر یا نمایشگری اعمال خواهد شد که حداکثر عرض آنها 600 پیکسل یا کمتر باشد.

بااینکه هر دو خاصیت عرض حداکثر و حداقل می توانند بر روی هر دو مقدار عرض نمایشگر یا مرورگر اعمال شوند ، برخی مواقع می خواهیم که کوئری بطور مخصوص متناسب با عرض دستگاه باشد. ان بدان معناست که حتی اگر مرورگر یا هر محدوده نمایشی بر روی مقداری کوچکتر تنظیم شده باشد، کوئری همچنان بر روی اندازه واقعی دستگاه اعمال خواهد شد.

خواص min-device-width و max-device-width، خواصی عالی برای انجام این کار می باشد.

@media screen and (max-device-width: 480px) {
     .classForiPhoneDisplay {
          font-size: 1.2em;
     }
}
@media screen and (min-device-width: 768px) {
     .minimumiPadWidth {
          clear: both;
                   margin-bottom: 2px solid #ccc;
     }
}

برای آی- پد بطور مخصوص، خاصیت کوئری رسانه ای با نام orientation وجود دارد. مقدار آن می تواند landscape (نمایش افقی) یا portrait (نمایش عمودی) باشد.

@media screen and (orientation: landscape) {
     .iPadLandscape {
          width: 30%;
                   float: right;
     }
}
@media screen and (orientation: portrait) {
     .iPadPortrait {
          clear: both;
     }
}

متاسفانه این خاصیت فقط بر روی آی- پد کار می کند.

کوئری های رسانه ای زیادی نیز وجود دارند که وقتی با یکدیگر ترکیب شوند ، همچنان معنی دار هستند. بطور مثال : کوئری های min-width و max-width همیشه با یکدیگر برای تنظیم یک استایل خاص در محدوده ای مشخص ترکیب می شوند.

@media screen and (min-width: 800px) and (max-width: 1200px) {
     .classForaMediumScreen {
          background: #cc0000;
          width: 30%;
          float: right;
     }
}

کد بالا در این کوئری فقط بر روی نمایشگر ها و یا مرورگرهایی که عرضشان بین 800 تا 1200 پیکسل باشد اعمال خواهد شد. یک استفاده خوب از این تکنیک این است که محتوای مشخص یا کل محتوای ستون کناره در یک قالب بندی را بر اساس مقدار فضای افقی موجود ، نشان دهیم.

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

احتمالا بخواهید بمنظور نمونه ، مانند موارد بالا ، برای دستگاه هایی مانند آی – پد ، تمام کوئری های رسانه ای را در یک استایل شیت قرار دهید. زیرا در چنین دستگاهی که از تغییر نمایش افقی به عمودی و بالعکس پشتیبانی می کند، اگر این گوئری ها در استایل شیت های جداگانه ای قرار گیرند ، هربار که کاربر از حالت نمایش عمودی و افقی به دیگری تغییر دهد، وب سایت مجبور خواهد بود هر بار هردو فایل استایل شیت ها را فراخوانی کند. قرار دادن این کوئری ها در یک استایل شیت بیشتر کارایی خواهد داشت.

مثالی دیگر برای طراحی انعطاف پذیر، برای کامپیوترهای استانداردی که دارای مرورگرهای قابل تغییر اندازه هستند، می باشد. اگر مرورگر بطور دستی قابل تغییر اندازه باشد ، قرار دادن تمام کوئری های رسانه ای متغیر در یک استایل شیت ، بهترین کار خواهد بود.

با این وجود ، سازماندهی می تواند کلید کار باشد ، و طراح می تواند کوئری های رسانه ای را در یک تگ لینک HTML استاندارد ، تعریف کند :

 

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