استایل شیت های جایگزین در CSS

 این امکان وجود دارد که یک استایل شیت(برگه ی استایل) جایگزین نیز تعریف کنیم. برای تعریف کردن برگه های استایل جایگزین باید مقدار خصوصیت rel را برابر با alternate stylesheet قرار دهیم. این نوع استایل ها، تنها اگر توسط کاربر انتخاب شوند، در ارائه سند، مورد استفاده قرار می گیرند. مرورگر باید بتواند از برگه های استایل جایگزین، استفاده کند. مرورگر از مقادیر خصوصیت های title عناصر این لینک استفاده می کند تا یک لیست از کدهای جایگزین را ایجاد کند. بنابراین بعنوان مثال ما باید برگه های استایل خود را به طریق زیر بنویسیم:

<link rel="stylesheet" type="text/css" href="/sheet1.css" title="Default">
<link rel="alternate stylesheet" type="text/css" href="/bigtext.css" title="Big Text">
<link rel="alternate stylesheet" type="text/css" href="/zany.css" title="Crazy colors!">

 سپس کاربران می توانند استایل هایی که می خواهند را مورد استفاده قرار دهند و مرورگر مثلا از استایل برچسب خورده به نام Default به استایل انتخاب شده توسط کاربر انتقال می یابد. تصویر 1.6 راهی را نشان می دهد که می تونایم این کار را انجام دهیم(در حقیقت به زودی با پیشرفت CSS قادر خواهیم بود چنین کنیم).

(تصویر 1.6: انتخاب برگه ی استایل جایگزین در منوهای مرورگر)

نکته: از اواخر سال 2016، برگه های استایل جایگزین در اکثر مرورگرهای مبتنی بر Gecko مثل فایرفاکس و اپرا پشتیبانی می شود. این استایل ها در مرورگر اینترنت اکسپلورر از طریق استفاده از جاوا اسکریپت قابل پشتیبانی هستند اما به صورت بومی در این مرورگر پشتیبانی نمی شود. خانواده ی مروگرهای Web‐Kit از برگه های استایل جایگزین پشتیبانی نمی کنند. مقایسه ی این پیشرفت ها در زمان  مرورگر نشان داده شده در تصویر 1.6 تقریبا تکان دهنده است.

 این امکان وجود دارد که برگه های استایل جایگزین را با دادن یک title یکسان به آنها، با یکدیگر گروه بندی کنیم. بنابراین ما این امکان را فراهم می آوریم که کاربر در هردوی مدیای screen و print از برگه های استایل متفاوتی استفاده کند:

<link rel="stylesheet" type="text/css" href="/sheet1.css" title="Default" media="screen">
<link rel="stylesheet" type="text/css" href="/print-sheet1.css" title="Default" media="print">
<link rel="alternate stylesheet" type="text/css" href="/bigtext.css" title="Big Text" media="screen">
<link rel="alternate stylesheet" type="text/css" href="/print-bigtext.css" title="Big Text" media="print">

 اگر یک کاربر، از مکانیزم انتخاب برگه ی استایل جایگزین، استایل Big Text را انتخاب کند، آنگاه استایل bigtext.css بعنوان استایل برای سند در محیط screen مورد استفاده قرار می گیرد و استایل print-bigtext.css در محیط print مورد استفاده قرار می گیرد.  اما هیچ یک از sheet1.css یا  print-sheet1.css در این محیط ها مورد استفاده قرار نمی گیرند. چرا چین می شود؟ زیرا اگر ما یک تگ link با یک title به نام stylesheet داشته باشیم، آنگاه ما تعیین می کنیم که stylesheet  برگه ی استایل پیش فرض ما است. این یعنی از این برگه ی استایل، بعنوان برگه ی استایل جایگزین پیش فرض استفاده می شود و وقتی که سند برای اولین بار نمایش می یابد، از آن استفاده می شود. وقتی که ما یک برگه ی استایل جایگزین را انتخاب کنیم، دیگر از برگه ی استایل پیش فرض استفاده نمی شود. علاوه بر این، اگر ما تعدادی برگه ی استایل را بعنوان برگه ی استایل پیش فرض تخصیص دهیم، آنگاه همه ی آنها به جز یکی، نادیده گرفته خواهند شد. کدهای مثالی زیر را در نظر بگیرید:

<link rel="stylesheet" type="text/css" href="/sheet1.css" title="Default Layout">
<link rel="stylesheet" type="text/css" href="/sheet2.css" title="Default Text Sizes">
<link rel="stylesheet" type="text/css" href="/sheet3.css" title="Default Colors">

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

{module کمک نقدی به نویسنده}