2 سال پیش / خواندن دقیقه

آموزش انواع رسانه در CSS به زبان ساده با مثال

آموزش انواع رسانه در CSS به زبان ساده با مثال

انواع رسانه ها در CSS این امکان را فراهم می کنند تا بتوانید اسناد خود را به درستی روی انواع رسانه های مختلف مانند: صفحه نمایش، چاپ، مرورگر شنیداری و …. قالب بندی کنید.

آشنایی با انواع رسانه ها

یکی از مهمترین ویژگی های برگه های سبک این است که، می توانید برای انواع مختلف رسانه برگه های سبک جداگانه تعیین کنید. این یکی از بهترین راه ها برای ایجاد صفحات وب سازگار با چاپگر است – کافیست فقط یک برگه سبک متفاوت برای نوع رسانه “چاپ” اختصاص دهید.

برخی از ویژگی های CSS فقط برای رسانه های خاصی طراحی شده اند. به عنوان مثال، ویژگی page-break-after، فقط روی رسانه های کاغذی اعمال می شود. با این وجود چندین ویژگی وجود دارد که توسط انواع رسانه های مختلف به اشتراک گذاشته می شوند اما ممکن است مقادیر متفاوتی برای آن ویژگی وجود داشته باشد. به عنوان مثال ویژگی font-size را می توان برای هر دو رسانه صفحه نمایش و چاپی استفاده کرد، اما احتمالاً با مقادیر متفاوت.

برای خوانایی بیشتر، یک سند معمولاً به یک فونت بزرگتر روی کامپیوتر در مقایسه با رسانه کاغذی نیاز دارد، همچنین فونت های sans-serif راحت تر در صفحه خوانده می شوند، در حالی که قلم های serif برای چاپ رایج تر هستند. بنابراین لازم است که یک برگه سبک (یا شیوه نامه) یا مجموعه ای از قوانین سبک برای اعمال روی هر نوع رسانه خاص، مشخص کنیم.

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

سه روش رایج برای مشخص کردن وابستگی های رسانه ای برای برگه های سبک استفاده می شود:

روش ۱: استفاده از قوانین media@

قانونmedia@  برای تعریف قوانین سبک مختلف برای انواع رسانه های مختلف در یک شیوه نامه واحد استفاده می شود. برگه سبک شامل لیستی از انواع رسانه (که با کاما از یکدیگر جدا می شوند) و عبارت های CSS حاوی قواعد سبک برای رسانه هدف است.

در مثال زیر، قانون سبک به مرورگر می گوید که محتوایbody را در ۱۴ پیکسل روی قلم Arial در صفحه نمایش دهد اما در صورت چاپ آن را با قلم ۱۲ نقطه روی قلم Times چاپ کند. اما مقدار ویژگی line-height برای هر دوی آنها ۱٫۲ است:

مثال

@media screen{
body {
color: #32cd32;
font-family: Arial, sans-serif;
font-size: 14px;
}
}
@media print {
body {
color: #ff6347;
font-family: Times, serif;
font-size: 12pt;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}

توجه: قوانین سبک خارج از قوانین media@ روی انواع رسانه ها که شیوه نامه برای آنها اعمال می شود، به کار می رود. قوانین داخل media@ در CSS2.1 نامعتبر است.

روش ۲: استفاده از قوانین@import

قانون import@ روش دیگری برای تنظیم اطلاعات سبک برای رسانه هدف خاص است – فقط انواع رسانه ها (جدا شده با کاما) را بعد از آدرس برگه های سبک ورودی مشخص کنید.

مثال

@import url(“css/screen.css”) screen;
@import url(“css/print.css”) print;
body {
background: #f5f5f5;
line-height: 1.2;
}

نوع رسانه print در اعلانimport@ به مرورگر دستور می دهد تا یک شیوه نامه خارجی (print.css) را بارگیری کند و از سبک های آن فقط برای رسانه چاپ استفاده کند.

توجه: همه اعلان هایimport@ باید قبل از هرگونه اعلانی، در ابتدای صفحه شیوه نامه رخ دهد. هر قانون سبک مشخص شده در شیوه نامه، روی قوانین متضاد سبک در برگه های سبک ورودی بازنویسی می شود.

روش ۳: استفاده از عنصر <link>

ویژگی media  در عنصر <link> برای مشخص کردن رسانه هدف برای یک شیوه نامه خارجی در سند HTML استفاده می شود.

مثال

<link rel=”stylesheet” media=”all” href=”css/common.css”>
<link rel=”stylesheet” media=”screen” href=”css/screen.css”>
<link rel=”stylesheet” media=”print” href=”css/print.css”>

در این مثال ویژگیmedia  به مرورگر دستور می دهد تا صفحه سبک خارجی “screen.css” را بارگذاری کند و از سبک های آن فقط برای صفحه نمایش استفاده کند در حالی که “print.css” به هدف چاپ استفاده می شود.

نکته: همچنین می توانید چندین نوع رسانه (هر کدام با کاما از هم جدا می شوند؛ مانند: media=”screen, print”) را به عنصر <link> اختصاص دهید.

انواع مختلف رسانه

در جدول زیر انواع رسانه ها مختلف آورده شده است که ممکن است انواع دستگاه های مختلف، از قبیل چاپگر، دستگاه های دستی (مانند موبایل)، صفحه نمایش رایانه و … مورد هدف قرار دهد.

توضیحات نوع رسانه
برای همه انواع دستگاه های رسانه استفاده می شود. All
برای سینت سایزرهای گفتاری و صدا استفاده می شود. Aural
برای دستگاه های بازخورد لمسی بریل استفاده می شود. Braille
برای چاپگرهای بریل صفحه ای استفاده می شود. Embossed
برای دستگاه های کوچک یا دستی استفاده می شود – معمولاً دستگاه های صفحه نمایش کوچک مانند تلفن های همراه یا PDA. Handheld
برای چاپگر استفاده می شود. print
برای ارائه های تصویری، مانند پروژکتورها استفاده می شود. projection
بیشتر برای صفحه نمایش کامپیوتر رنگی استفاده می شود. screen
برای رسانه ها با استفاده از یک شبکه کاراکتری گام ثابت – مانند تله تایپ، پایانه ها یا دستگاه های قابل حمل با قابلیت نمایش محدود استفاده می شود. tty
برای دستگاه های نوع تلویزیونی استفاده می شود – وضوح پایین، رنگ، صفحه نمایش با پیمایش محدود، صدا. tv

هشدار: اگرچه چندین نوع رسانه وجود دارد که می توانید انتخاب کنید، اما اکثر مرورگرها فقط از انواع رسانه all، screen  و print  پشتیبانی می کنند.

شاید از نوشته‌های زیر خوشتان بیاید
نظر خود را درباره این پست بنویسید ...

منوی سریع