آموزش برنامه نویسی و مجله تخصصی فناوری
آموزش CSS - انواع رسانه ها
یکی از ویژگی های مهمی که در استایل‌دهی با استفاده از style sheets در CSS وجود دارد، Media Types نام دارد. این ویژگی به طراحان و توسعه‌دهندگان این امکان را می‌دهد که تنظیمات استایل خود را بر اساس نوع رسانه که ممکن است صفحه وب را نمایش دهد، تغییر دهند
ما معمولاً با نمایش صفحه وب روی صفحه نمایش کامپیوتر آشنا هستیم، اما هر رسانه ممکن است نحوه نمایش متفاوتی داشته باشد. برای مثال، ممکن است صفحه وب شما روی یک چاپگر یا دستگاه بریل نمایش داده شود. هرکدام از این رسانه‌ها نیازمند تنظیمات استایل خاصی هستند تا بهترین تجربه را برای کاربران فراهم کنند بنابراین Media Types به طراحان این امکان را می‌دهد تا استایل‌های خود را به طور خاص برای رسانه‌های مختلف مشخص کنند. به عبارت دیگر، می‌توانید استایل‌های خود را به‌طور خاص برای نمایش روی صفحه نمایش کامپیوتر یا چاپگر یا حتی ترکیب‌گرهای صدا (screen readers) تعیین کنید.
استفاده از Media Types ها به توسعه‌دهندگان این امکان را می‌دهد که تجربه کاربری را در هر نوع رسانه بهینه‌سازی کنند. این به معنای این است که آن‌ها می‌توانند بهترین استایل و ظاهر را برای هر محیط خاص ارائه دهند، از جمله نمایش روی صفحه نمایش، چاپ یا حتی دستگاه‌های بریل و ...
در حال حاضر، دو روش وجود دارد که به ما این امکان را می‌دهند تا وابستگی‌های مرتبط با رسانه را برای style sheets مشخص کنیم. این دو روش به تعیین نحوه اعمال استایل‌ها بر اساس ویژگی‌های محیط نمایش یا رسانه مشخصی می‌پردازند.
1-Media در یکstyle sheets در CSS با استفاده از media@ یا import @مشخص میشود
1-استفاده از media@ در CSS:
با استفاده از media@، شما می‌توانید قوانین CSS را بر اساس خصوصیات مختلف محیط نمایش تنظیم کنید. به عبارت دیگر، شما می‌توانید استایل‌های مختلفی را برای محیط‌های مختلف مشخص کنید
2-استفاده ازimport@ در CSS:
با استفاده از import@، شما می‌توانید یک فایل استایل دیگر را به داخل فایل اصلی خود وارد کرده و استفاده کنید. این فایل‌های وارد شده می‌توانند مرتبط با رسانه‌های خاصی مثل چاپ یا صفحه نمایش باشند.
2- یکی دیگر ار روش ها استفاده از ویژگی‌های مربوط به رسانه در داخل کد یک سند وب (مثل HTML) میباشد.زمانی که در طراحی و توسعه وبسایت‌ها، ما با زبان‌های سند مانند HTML سر و کار داریم، ممکن است نیاز باشد تا خصوصیات مربوط به نمایش محتوا را بر اساس رسانه مورد نظر تنظیم کنیم. این کار به معنای تعیین ویژگی‌ها و استایل‌های مختلف بر اساس نوع رسانه (مانند صفحه نمایش، چاپگر یا صدا) است.
قانون media@
قانون media@مجموعه‌ای از قوانین را مشخص می‌کند.
مثال:
<style tyle = "text/css">
<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
-->
</style>
زبان سند
در HTML 4.0، ویژگی رسانه در عنصر LINK، تعیین رسانه مورد نظر یک استایل شیت خارجی را مشخص می کند
مثال:
<style tyle = "text/css">
<!--
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>پیوند به یک رسانه هدف</title>
<link rel = "stylesheet" type = "text/css" media = "print,
handheld" href = "foo.css">
</head>
<body>
<p>بدنه
</body>
</html>
-->
</style>
انواع رسانه های
| شماره | مقدار و توضیحات |
|---|---|
| 1 |
all مناسب برای تمامی دستگاه ها |
| 2 |
aural برای ترکیب‌گر صدا در نظر گرفته شده است. |
| 3 |
braille برای دستگاه های بازخورد لمسی بریل در نظر گرفته شده است. |
| 4 |
embossed برای چاپگرهای بریل صفحه‌دار در نظر گرفته شده است. |
| 5 |
handheld برای دستگاه های دستی (معمولاً صفحه نمایش کوچک، تک رنگ، پهنای باند محدود) در نظر گرفته شده است. |
| 6 |
برای مواد صفحه‌دار، مات و اسنادی که روی صفحه در حالت پیش‌نمایش چاپ مشاهده می‌شوند در نظر گرفته شده است. لطفاً به بخش رسانه صفحه‌دار مراجعه کنید. |
| 7 |
projection برای ارائه های پیش بینی شده، به عنوان مثال پروژکتورها یا چاپ روی شفاف ها در نظر گرفته شده است. لطفاً به بخش رسانه صفحه‌دار مراجعه کنید. |
| 8 |
screen در درجه اول برای صفحه نمایش رنگی کامپیوتر در نظر گرفته شده است. |
| 9 |
tty در نظر گرفته شده برای رسانه‌هایی که از شبکه کاراکتر با صدای ثابت استفاده می‌کنند، مانند تله تایپ، پایانه‌ها یا دستگاه‌های قابل حمل با قابلیت‌های نمایش محدود. |
| 10 |
tv برای دستگاه های تلویزیونی در نظر گرفته شده است. |
توجه :نام نوع رسانه به حروف بزرگ و کوچک حساس نیست.