آموزش CSS

آموزش CSS - کار با Media Typeها

Media Typeها در CSS به شما اجازه فرمت صحیح اسنادتان در انواع مختلف رسانه ها مانند screen (صفحه نمایش)، print (پرینت)، aural browser (مرورگر (aural  و غیره را می دهد.

مقدمه ای بر Media Typeها

یکی از مهم ترین ویژگی های style sheetها  این است که می توانید style sheet جداگانه ای را برای انواع مختلف رسانه ها مشخص نمایید. این امر یکی از بهترین راه های  ایجاد صفحات وب مناسب برای چاپگر می باشد که تنها با اختصاص style sheet متفاوت برای نوع رسانه "print" امکان پذیر است.

برخی از خاصیت های CSS تنها  برای رسانه های خاص طراحی شده اند برای مثال، خاصیت  page-break-after تنها برای رسانه های صفحه اعمال می شود. با این حال، چندین خاصیت (property) وجود دارد که می توانند در media type های مختلف مشترک باشند، اما ممکن است مقادیر مختلفی برای آن  property مورد نیاز باشد. برای مثال خاصیت font-size می تواند برای رسانه های صفحه نمایش و پرینت با مقادیر مختلف استفاده شود.

معمولا document بر روی صفحه کامپیوتر جهت درک بهتر نیاز به فونت بزرگتری نسبت به کاغذ دارد و همچنین فونت های sans-serif برای خوانده شدن بر روی صفحه نمایش آسان تر می باشند در حالی که فونت های serif برای پرینت محبوب ترند. بنابراین مشخص نمودن این که style sheet یا مجموعه ای از قوانین استایل به کدام media type اعمال می شود، امری ضروری است.

ایجاد  Style Sheet وابسته به media

سه روش معمول برای ایجاد Style Sheet وابسته به media وجود دارد.

روش 1: استفاده از At-rules  @media

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

در مثال زیر style declaration (اعلان استایل ) به مرورگر می گوید تا محتوای body در 14 پیکسل و فونت Arial را بر روی صفحه نمایش دهد، اما در صورت پرینت در فونت Times  با اندازه 12 می شود. با این حال، مقدار خاصیت 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 typeهای درون style sheet اعمال می شود. قوانین درون @media در css2.1 نا معتبر می باشند.

 

روش 2: استفاده از @import At-rules

قانون @import راه دیگری برای تنظیم اطلاعات استایل برای هدف خاص رسانه ای است. تنها کافی است تا media type های جدا شده با کاما را بعد از URL از style sheet ها وارد شده مشخص نمایید.

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

media type پرینت در دستورات @import به مرورگر  دستور بارگیری یک style sheet  خارجی (print.css) و استفاده از استایل های آن تنها برای رسانه های پرینت را می دهد.

نکته: تمامی دستورات @import باید در ابتدای یک style sheet و پیش از هر گونه declaration ای  رخ دهد. هر قاعده ای که در style sheet مشخص شده، قوانین استایل متناقض وارد شده در style sheet را منع می نماید.

 

روش 3: استفاده از المان <link>

ویژگی media در خاصیت المان <link> جهت  مشخص نمودن رسانه هدف style sheet خارجی در سند HTML استفاده می شود.

<link rel="stylesheet" type="text/css" media="all" href="css/common.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">

این مثال ویژگی media به مرورگر دستور بارگذاری style sheet خارجی " screen.css"  را می دهد و از استایل های آن تنها برای صفحه نمایش در زمان print.css  برای پرینت استفاده می کند.

نکته: شما همچنین می توانید چندین media type را (هر کدام را مانند مثال با کاما جدا کنید، media="screen, print") مانند رسانه برای المان <link> مشخص نمایید.

 

Media Typeهای مختلف

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

Media Type

شرح

all

برای تمام دستگاه های media type استفاده می شود.

aural

برای ترکیب بندی های سخنرانی و صدا مورد استفاده قرار می گیرد.

braille

 برای فیدبک دستگاه های لمس بریل استفاده می شود.

embossed

برای پرینتر های صفحات بریل ورد استفاده قرار می گیرد.

handheld

برای دستگاه های دستی کوچک استفاده می شود - معمولا دستگاه های صفحه نمایش کوچک مانند تلفن های همراه و یا PDA ها می باشد.

print

برای پرینترها استفاده می شود.

projection

برای سخنرانی ها به عنوان مثال پروژکتور استفاده می شود.

 

screen

در درجه اول برای صفحه نمایش های رایانه ای رنگی استفاده می شود

tty

برای رسانه ها با استفاده از کاراکتر fixed-pitch ، مانند تله تایپ ها، پایانه ها یا دستگاه های قابل حمل با قابلیت های نمایش محدود استفاده می شود.

tv

 برای انواع دستگاه های تلویزیون با رزولوشن پایین، رنگ، صفحه نمایش محدود و دسترسی صدا استفاده می شود.

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

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...