CSS چیست ؟

طراحی سایت هم مانند ساختن ساختمان است؛ یعنی چه؟ یعنی همانطور که یک ساختمان برای ساخته شدن نیاز به نقشه، مصالح و اسکلت دارد، سایت نیز برای شکل گرفتن به چیزهای مشابهی نیازمند است.

همانطور که در مقاله «HTML  چیست؟ » هم اشاره کردیم، کدهای اچ‌تی‌ام‌ال، مانند اسکلت ساختمان هستند و پایه یک سایت را تشکیل می‌دهند. قبل از سال 1998 همین html کار طراحان سایت را راه می‌انداخت و آن‌ها می‌توانستند به وسیله اچ‌تی‌ام‌ال سایت‌های ایستایی با امکانات محدود بسازند. در سال 1996 تا 1998 با توسعه مرورگرهای وب و نیازهای جدید در طراحی وب‌سایت، css متولد شد و به جمع ملزومات طراحی سایت پیوست. به عبارت دیگر، همانند  نقش دیوارها و رنگ و نقش ساختمان است.

در مقاله امروز معرفی کوتاهی از CSS و تاریخچه آن خواهیم داشت. اگر قصد یادگیری زبان CSS را دارید، خواندن این مطلب به عنوان پیش‌زمینه‌ای برای یادگیری CSS توصیه می‌شود.

معرفی css

CSS مخفف Cascading Style Sheets (به معنی الگوهای آبشاری یا استایل آبشاری صفحات) است. در نگاه اول شاید عنوان "الگوهای آبشاری" برایتان عبارتی گنگ و نامفهوم باشد؛ ولی خیالتان راحت، چیز سختی در انتظارتان نیست.

منظور از Style Sheets همان فونت، رنگ، اندازه، مدل متن و سایر ویژگی‌های یک صفحۀ وب است. و اما، Cascading یا آبشاری یعنی چه؟

ببینید، در HTML فقط می‌توانستید اندازه متن یا یک جدول را تعیین کنید و برای هر صفحه به صورت جداگانه ساختار مرتبط با آن را طراحی کنید. برای همین صفحاتی که تنها با HTML ساخته شوند، صفحات ایستایی هستند و قابلیت‌های چندانی ندارند.

در CSS به لطف استایل آبشاری دست شما خیلی بازتر است. با کمک CSS می‌توانید یک بار استایل مورد نظرتان را داخل سند تعریف کنید و سپس در هر صفحه یا در هر بخشی از صفحه که خواستید آن را اعمال کنید.

برای مثال اگر یک توسعه دهنده وب بخواهد سایز تیتر مقالات را در 20 صفحه از سایت از 11 به 13 تغییر دهد، کافیست این تغییر را روی یکی از صفحات اعمال کند. این در صورتی است که بدون CSS مجبور به تغییر کدهای هر 20 صفحه خواهید شد.

و حالا با این دو تعریف فکر می‌کنم ماهیت CSS را بهتر درک کنید.

مرورگرهای وب و CSS

همانطور که پیش‌تر نیز اشاره کردم، نیازهای برنامه‌نویسان روز به روز بیشتر می‌شد و HTML دیگر برای طراحی صفحات وب کافی نبود. از این روی، در 14 دسامبر سال 1996 کنسرسیوم جهانی وب (W3C) اولین استاندارد زبان CSS را منتشر کرد. اولین شرکتی که پشتیبانی از CSS را به مرورگر خود (Internet Explorer 3) اضافه کرد مایکروسافت بود.

شاید الان مرورگر اینترنت اکسپلورر در کامپیوترهایمان بلااستفاده مانده باشد اما در آن زمان IE 3 حسابی گرد و خاک کرده بود. این مرورگر قادر بود بیشتر رنگ‌ها، فونت‌ها، استایل نوشته (بُلد یا آندرلاین) و بکگراندها را نمایش دهد؛ این موفقیت خوبی بود، ولی هنوز نمی‌شد گفت که تمام نیازهای کاربران رفع شده است. مثلاً CSS هنوز نمی‌توانست بسیاری از باکس مدل‌ها (Box Models) را پیاده کند. (باکس مدل مانند جعبه‌ای است که تعدادی از عناصر HTML مثل margin، Padding و border داخل آن قرار گرفته باشند.)

سومین شرکتی که پشتیبانی از ویژگی های CSS1 را به مرورگرش اضافه کرد Opera بود. اُپرا با اینکه شرکت کوچکی در نروژ بود پا به پای مایکروسافت و نت‌اسکیپ پیش رفت و در نوابر سال 1998 نسخه جدید مرورگر خود را با نام Opera 3.5 معرفی کرد.

CSS از دیروز تا به امروز ...

قبل از ورود به مباحث تخصصی CSS و آموزش طراحی سایت با CSS بد نیست نگاهی مختصر به تاریخچه آن داشته باشیم و ببینیم که در طی این سال‌ها دست‌خوش چه تغییراتی شده است.

CSS 1

نسخه اولیه CSS تحت عنوان CSS 1 در تاریخ ۱۷ دسامبر سال ۱۹۹۶ توسط کنسرسیوم جهانی وب تایید و به صورت رسمی در دسترس عموم  قرار گرفت.از ویژگی‌های نسخۀ CSS1 موارد زیر را می‌توان نام برد:

• امکان تخصیص فونت
• تعریف رنگ و پس زمینه برای متن
• امکان تنظیم چپ چین و راست چین بودن متن و سایر عناصر صفحه وب
• امکان ایجاد حاشیه و مرزبندی در صفحه

CSS 2

حدود 2 سال بعد، یعنی در سال 1998 کنسرسیوم جهانی وب  نسخه دیگری را که شباهت‌های زیادی به نسخه اولیه CSS داشت ارائه کرد. ویژگی‌هایی که به نسخه CSS 2 اضافه شد عبارتند از:

• امکان قرار دادن عناصر ثابت در صفحه (منظور از عناصر ثابت بخش‌هایی از صفحه هستند که هنگام اسکرول کردن ثابت میمانند و با بالا و پایین رفتن صفحه تغییر نمی‌کند، برخی منوهای موجود در سایت‌ها این قابلیت را دارند.)
• رسم جدول (Table)
• و برخی ویژگی‌های بصری، از جمله قابلیت تشخیص مدیاهای مختلف

CSS 3

نسخه سوم CSS که در سال 1999 منتشر شد را می‌توان نقطۀ عطفی در تاریخ زبان سی‌اس‌اس دانست. این نسخه، بر خلاف دو نسخه قبلی که دیگر از سمت کنسرسیوم جهانی پیشنهاد نمی‌شوند، هنوز هم پا برجاست و اکثر برنامه‌نویسان از آن در طراحی سایت استفاده می‌کنند. در نسخه CSS 3 یک سری سند متمایز جدید به نام ماژول (Modules) به این زبان اضافه شد که کار را برای برنامه‌نویسان به مراتب راحتتر و سریعتر می‌کرد.

از جمله ماژول‌های اضافه شده به CSS 3 می‌توان به انیمیشن، سایه دادن بلوک، افکت‌های دو بعدی و سه بعدی (مثل چرخ یا تغییر رنگ تصویر)، گرادیانت، ریسپانسیو، گرد کردن گوشه کادرها و ... اشاره کرد.

CSS 4

خب، راستش را بخواهید نسخۀ جدیدی به نام CSS 4 وجود ندارد و دلیل آن هم این است که با وجود ماژول‌ها و قابلیت‌هایی که به وسیله ماژول می‌شود به css اضافه کرد، دیگر نیازی به معرفی نسخه جدید نیست. البته ماژول‌ها را می‌توان به شکل Level 3 و Level 4 سطح‌بندی کرد.

از جمله تغییرات ماژول‌های Level 4 می‌توان به قابلیت افزودن افکت به تصویر و پس‌زمینه‌ها (Background blend mode) و بهبود سلکتورها و رابطه بین فرزند و والد اشاره کرد. (اگر نیاز به آشنایی با سلکتورهای سطح 4 داشتید و بررسی آخرین ویژگی‌های CSS داشتید به وبسایت drafts.csswg.org مراجعه کنید.)

یک پیشنهاد: با سر زدن به سایت css4-selectors.com می‌توانید ببینید که مرورگر شما چند درصد از css 1، css 2، css 3 و css 4 را پشتیبانی می‌کند.

جمع‌بندی

فکر می‌کنم که دیگر به خوبی با ماهیت CSS و نقش آن در طراحی وب سایت آشنا شده‌اید. با توجه به اینکه نسخه‌های CSS 1 و CSS 2 دیگر توسط کنسرسیوم جهانی وب پیشنهاد نمی‌شوند، بهتر است آموزشتان را از CSS 3 شروع کنید.