شیوه‌نامه آبشاری یا سی‌اس‌اس ( به انگلیسی CSS: Cascading Style Sheets ) یک زبان طراحی صفحات وب برای تعیین مشخصات ظاهری عناصر و در واقع ساختار گرافیکی وب سایت می باشد . این زبان به همراه HTML هستۀ فناوری ساخت صفحه های وب هستند .
بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب HTML و XHTML است ولی آن را می‌توان بر هر نوع مستند XML از جمله SVG و XUL نیز اعمال کرد .
کاربرد CSS
هدف از تولید CSS در واقع جداسازی اطلاعات محتوا ( که توسط زبانی مانند HTML نوشته شده اند ) از اطلاعات ظاهری مانند صفحه بندی، رنگ ، سایز و نوع فونت می باشد . این جداسازی موجب افزایش سرعت در دسترسی به سایت ، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.
CSS همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ ، در زمان حالت شناسایی صدا ( برای مرورگرهای مبتنی بر قابلیت شناسایی صدا ) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.با استفاده از این ابزار همچنین می توان تنظیماتی را اعمال نمود که نمایش صفحه وب سایت مورد نظر بسته به اندازه صفحه نمایش کاربر متغیر باشد (Responsive) .
شیوه‌نامهٔ آبشاری(CSS) ، افزون بر سبک تر کردن هر صفحه وب و تمیزتر کردن آن ، از داده‌های تصویری و نمایشی استاندارد ، روش طراحی وب را به میزان فراوانی آسان تر و دسترسی و کارایی وب را بهتر کرده است .
مشخصات و قابلیت های CSS توسط کنسرسیوم تعیین استاندارد World Wide Web (W3C) و همچنین موسسه Internet Media Type (MIME Type) مورد تایید و در استاندارد RFC 2318 قرار گرفته است .
تاریخچه CSS
CSS1
اولین نسخه از CSS که توسط موسسه استاندارد سازی W3Cنیز مورد تایید قرار گرفت ، در دسامبر سال ۱۹۹۶ توسط Hakon Wium Lie و Bert Bos توسعه و منتشر شد . این نسخه از CSS از قابلیت های زیر پشتیبانی می کرد : امکان تنظیم نمودن مشخصه های فونت مانند قابلیتFontface و Emphasis – امکان تغییر دادن رنگ متون، مشخص نمودن تصویر یا رنگ پس زمینه و سایر مشخصه های ظاهری – امکان تغییر سایر مشخصه های متون، مانند تنظیم نمودن فاصله بین کلمات، حروف و سطرها – هم تراز نمودن نوشته ها، تصاویر و جداول – قابلیت اضافه نمودن حاشیه، کادر و لایه بندی صفحه – امکان دسته بندی و نشانه گزاری مشخصه ها و امکانات وب سایت .
قابل ذکر است که W3C دیگر نسخه CSS1 را توصیه نمی کند .
CSS2
نسخه دوم CSS نیز در ماه می سال ۱۹۹۸ منتشر و به کاربران ارایه شد. این نسخه از CSS دارای قابلیت های اضافه نسبت به نسخه قبلی بود. برخی از این امکانات شامل : قابلیت تنظیم جایگاه اجسام به صورت ثابت، متغیر و یا بسته به دیگر اجسام و همچنین قابلیت z-index ، مفهوم انواع فایلهای چند رسانه ای، پشتیبانی از طراحی Aural صفحات، امکان تنظیم نمودن متن به صورت راست چین و همچنین اضافه شدن قابلیت های تازه ای به نوشته ها مانند سایه بود.
این نسخه از CSS نیز دیگر توسط W3C توصیه نمی گردد .
CSS2/1
نسخه ۲٫۱ CSS به دلیل برطرف نمودن تعداد زیادی از مشکلات CSS2 منتشر و در اختیار کاربران قرار گرفت . این نسخه از CSS با وجود منتشر شدن نسخه های جدیدتر هنوز هم به عنوان یکی از استانداردهای طراحی وب سایت توسط W3C مورد تایید و توصیه می گردد .
CSS3
نسخه CSS3 برخلاف نسخه های قبلی که تمامی تعاریف و امکانات در قالب یک نرم افزار مورد استفاده کاربر قرار می گرفت ، دارای ساختاری ماژولار است . هر یک از ماژول ها ، قابلیت های خاصی را به نرم افزار اضافه می نماید . این نسخه از CSS در ماه ژوئن سال ۱۹۹۹ منتشر گردید.
با بوجود آمدن ساختار ماژولار، امکانات مختلفی به تفکیک ماژول های مختلف قابل اضافه شدن به نرم افزار گردید. طبق آخرین اخبار، در ماه نوامبر سال ۲۰۱۱ بیش از ۵۰ نوع ماژول مختلف با امکانات ویژه ای توسط تیم طراحی CSS به کاربران ارایه شد. برخی از ماژول ها امکاناتی مانند اضافه نمودن تصاویر ویژه به عنوان پس زمینه، محاسبه اطلاعات رسانه ای و قابلیت اضافه نمودن فرم های چند ستونی در صفحه بندی وب سایت می باشد .
CSS4
W3C شروع به طراحی و تکمیل نسخه چهارم CSS در ماه سپتامبر سال ۲۰۰۹ نمود ، گرچه هنوز هیچ یک از مرورگرهای معروف از تمامی امکانات آن پشتیبانی نمی کنند ، اما پیش بینی می شود تا چندین آینده این نسخه از CSS به عنوان یکی از رایج ترین ابزارهای طراحی با امکانات ویژه ای مورد استفاده قرار بگیرد .
نحو دستوری (Syntax)
CSS زبان نحوی ساده ای دارد که از کلمات کلیدی انگلیسی آسانی برای طراحی و تنظیم مشخصات صفحات استفاده می نماید . یک صفحه طراحی (Style Sheet) تشکیل شده از لیستی از قوانین (Rule) می باشد . هر قانون تشکیل شده از یک یا چند انتخاب کننده (Selector) و یا بلوک های اعلان (Declaration block) می باشد. هر کدام از بلوک های اعلان تشکیل شده از لیستی از بلوک های اعلان متغیر دیگر می باشد. هر یک از اعلان گر های متغیر شامل یک کلون (:) و یک مقدار می باشد. همچنین در صورتی که قرار باشد چندین متغیر در یک بلوک اعلان شود، هر یک از متغیر های توسط یک سمی کلون (;) از هم جدا می شوند.
کدنویسی CSS
سه راه برای ایجاد CSS وجود دارد :
۱- بصورت خطی (Inline) در HTML : در این روش کد CSS درون تگ HTML قرار می گیرد . این راه مناسب زمانی است که بخواهیم یک Style را برای یک بار به یک عنصر اعمال کنیم .
۲- درون صفحه (Internal) : روش بهتر قرار دادن کدهای CSS به صورت یکجا درون صفحه HTMl است . این روش زمانی مناسب است که بخواهید چندین Style را به عناصر مختلف اعمال کنید .
۳- بصورت جدا (External) : بهترین روش برای اعمال CSS است . Style ها همگی در یک سند (فایل) جدا نوشته شده و به صفحه مورد نظر لینک داده می شود . این روش مزیت های زیادی دارد :حجم فایل بسیار کاهش می یابد چون فقط یکبار نوشته می شود – مصرف پهنای باند کاهش می یابد چون فقط یکبار بارگذاری می شود – به راحتی قابل به روز رسانی است – طراحی Style و قرار دادن مطالب سایت از هم جدا می شوند .
محدودیت های CSS
گرچه نسخه جدید CSS3 امکانات ویژه ای را برای صفحه بندی ، فونت ها ، رنگ ها ، حاشیه ها و سایر قابلیت ها ارایه داده است اما همچنان دارای محدودیت هایی در زمینه طراحی صفحات وب از قبیل بلوک ها، حاشیه ها، سایز فرم ها و جایگذاری آن ها وجود دارد . این محدودیت ها باعث شده است تا برای طراحی صفحات پویای وب سایت مجبور به کد نویسی دستی در CSS باشیم . برخی از این محدودیت ها عبارتند از :
– کنترل ضعیف صفحه بندی های قابل انعطاف
– عدم امکان انتخاب عناصر والد (بالاتر)
– محدودیت در کنترل فرم های عمودی مانند تنظیم نمودن عنصری در وسط صفحه
– عدم وجود توضیحات لازم در مقادیر صفات مانند زمانی که کاربر قصد محاسبه سایز ستون ها و ردیف های وب سایت خود را دارد .
– بروز مشکلاتی در ساخت ستون ها از جمله ماژول Column – count
پشتیبانی مرورگرها
همه مرورگرهای قادر نیستند تا کد های CSS را به خوبی تجزیه (Parse) نمایند ، به همین دلیل تکنیک کدنویسی خاصی به نام CSS HACK ایجاد گشته که مرورگرهای خاصی را فیلتر می نماید . این تکنیک مشخص می نماید که قسمت های مشخصی از کدهای CSS در مرورگرهایی که پشتیبانی کاملی از آن ندارند ، نمایش داده نشوند . برخی از طراحان وب سایت ها از نسخه های مختلف CSS به همراه CSS Filter Hack استفاده می نمایند تا وب سایت آن ها در هر مرورگری به صورت کامل نمایش داده شود. از آنجایی که اکثر مرورگرهای اولیه به کندی و با کیفیت خیلی پایینی کدهای CSS را نمایش (Render) می دادند ، تقریبا تمام طراحان وب سایت ها از CSS Filter استفاده می کردند تا مرورگر مربوطه از کدهایی که از آن به درستی پشتیبانی نمی کند ، چشم پوشی نماید .
امروزه حتی با اینکه اکثر مرورگر ها پشتیبانی کامل خود را از CSS اعلام نموده اند ، طراحان وب سایت همچنان با مشکلاتی در طراحی CSS مواجه می گردند . این مشکلات با انتشار نسخه های جدیدتر در طراحی وب سایت های مناسب با چندین مرورگر (Cross-browser) پیچیده تر گشته است .
در حال حاضر رقابت شدیدی بین موتور نمایش صفحه وب شرکت موزیلا به نام Mozilla’s Gecko که در مرورگر Firefox استفاده می گردد، موتور Webkit مربوط به مرورگر های Safari شرکت Apple و همچنین Google Chrome، موتور KHTML مربوط به مرورگر KDE’s conqueror، و موتور مرورگر Opera به نام Presto وجود دارد که هر یک از آن ها تمرکز خود را بر روی قسمتی از قابلیت های CSS قرار داده اند .
تالیف و گردآوری : سجاد عزیززاده
