تاریخچه CSS

CSS  هم مانند HTML برای اولین بار در مجموعه CERN متولد شد. اولین بار در تاریخ ۱۰ اکتبر سال ۱۹۹۴ بود که Hakon Wium Lie با همکاری «تیم برنرز لی» بحث CSS را وسط کشیدند. در همین زمان‌ها بود که چندین و چند زبان Style Sheet دیگر توسط افراد دیگر معرفی شدند و بحث‌های مختلفی که بین عموم افراد و همچنین در «کنسرسیوم وب جهان گستر» اتفاق افتاد، باعث شد تا در نهایت در سال ۱۹۹۶، زبان CSS به صورت رسمی معرفی شود.

CSS چیست؟

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

اگر از ما بپرسید اولین قدم برای یادگیری طراحی سایت چیست، قطعا جواب ما آموزش HTML و سپس CSS است. این دو زبان در کنار یکدیگر معنی پیدا می کنند. زیرا CSS را می توان مکملی بر زبان HTML دانست که با هدف پر کردن نقاط ضعف و خلاء های آن توسعه یافته است. CSS مخفف عبارت Cascading Style Sheets و به معنی “برگه های آبشاری” است.

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

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

آیا متوجه شدید اگر CSS وجود نداشت دنیای وب چه چهره زشت و ناخوشایندی به خود می گرفت؟ در گذشته برای ساخت صفحات وب سایت همه چیز در کدهای HTML خلاصه می شد. طراحان سایت برای ساخت یک صفحه وب و اعمال ویژگی های ظاهری مختلف مانند تغییر رنگ، اندازه و… عناصر صفحه، کافی بود با خاصیت های داخلی HTML دست و پنجه نرم کنند. آن ها می بایست این تغییرات را در تک تک صفحه های مورد نظر و بر روی تک به تک اجزای آن اعمال می کردند. این عوامل طراحی سایت را با صرف زمان و سختی های زیادی همراه ساخته بود.

فرانت اند (Front End) به چه معناست؟

CSS یکی از پرکاربردترین زبان ها در زمینه طراحی فرانت اند است. به مجموعه تکنولوژی هایی که روی ظاهر و گرافیک سایت تاثیر گذاشته و هیچ ارتباطی با عملکرد آن ندارند فرانت اند گفته می‌شود. در فرانت اند فقط با عناصر بصری سایت کار می‌کنیم و هر تغییری که ایجاد می‌کنیم در چهره سایت مشخص می‌شود. زبان های HTML، JS و CSS جزو اصلی‌ترین عناصر فرانت اند هستند.

چرا باید از CSS استفاده کنیم؟

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

مزایای CSS

با CSS علاوه بر اینکه کدنویسی تمیزتری نیز خواهید داشت، از یک قطعه کد می توانید برای صفحات مختلف HTML استفاده کرده و در زمان صرفه جویی کنید. CSS همچنین به بهبود سئو سایت نیز کمک می‌کند و به اصطلاح SEO Friendly است. زیرا استفاده از این کدها می تواند تاثیر بسیار خوبی در زیبایی و دسترسی پذیری صفحات وب، پشتیبانی از صفحات وب در دستگاه ها و مرورگرهای مختلف و در نهایت بهبود تجربه کاربری داشته باشد. برخی دیگر از مزایای این زبان به صورت زیر می باشند:

• ویژگی های بیشتری برای کار با اجزای صفحات نسبت به HTML دارد.
• بهبود بخشیدن به سرعت وب سایت و زمان بارگذاری کمتر برای صفحات وب
• امکان ساخت جلوه های تصویری و انیمیشنی جذاب
• نگه‌ داری آسان کدها
• جلوگیری از کدنویسی کثیف و غیر اصولی

معایب CSS چیست؟

زبان CSS در مقابل مزایای بسیار زیادی که دارد، شامل ضعف‌ها و محدودیت‌هایی هم می باشد. برخی از محدودیت‌های این زبان عبارتند از:

• ناتوانی در انتخاب والد در CSS نمی‌توان برای هر عنصر، گزینه بالاتر یا والد را انتخاب کرد. دلیل اصلی آن، بهبود کارایی در نمایش صفحات وب در مرورگرهای مختلف است.
• ناتوانی در نام گذاری نقش ها در زمان ارجاع script های بخش کاربر و تغییر Selectorها
• تفاوت کارکرد CSS در مرورگرهای مختلف که ممکن است مشکلاتی برای برنامه نویسان ایجاد کند.
• دسترسی برای ایجاد هرگونه تغییر به علت متن باز بودن CSS می‌تواند برنامه نویسان را در دام تغییرات ناخواسته ای بیندازد که ممکن است روی ظاهر کل سایت تاثیر بگذارند.

آشنایی با نسخه های CSS

هر کدام از نسخه های CSS به منظور تکمیل نسخه قبلی و ارائه ویژگی های جدید معرفی شدند که در این قسمت به شرح مختصر هر یک می پردازیم. داشتن نسخه های متعدد CSS ممکن است برای کسانی که آشنایی چندانی با آن ندارند گیج کننده باشد، اما معرفی این نسخه ها اشاره مختصری به تاریخچه css و تنها به منظور آشنایی با آن‌ها است زیرا امروزه از نسخه سوم و چهارم بیشتر استفاده می‌شود.

CSS 1

ولین نسخه از CSS که به طور رسمی در سال 1996 معرفی شد،  CSS 1 بود.

با معرفی نسخه های جدیدتر، در حال حاضر استفاده از CSS 1 پیشنهاد نمی شود. برخی از ویژگی های اصلی این نسخه از CSS به صورت زیر می باشند:

• افزودن امکاناتی برای فونت مانند ایجاد سبک و تنظیم Font face و Emphasis
• امکان تغییر رنگ، تخصیص رنگ به پس زمینه و سایر عناصر دیگر به متن
• امکان تنظیم فاصله بین کلمات و سطرها در متن (Alignment)
• امکان اضافه کردن کادر (Border)، حاشیه (Margin) و لایه بندی (Padding) صفحات وب
• امکان کلاس بندی گروهی از ویژگی ها (Attributes)

CSS 2

این نسخه در 1998 معرفی شد و برخی از امکانات جدید آن عبارت اند از:

• امکان تنظیم جایگاه اجسام به سه روش ثایت، متغیر و وابسته به سایر اجسام
• شناخت انواع فایل های چند رسانه ای
• قابلیت هایی برای طراحی متن مانند تنظیم راست چین بودن نوشته ها

این نسخه دارای دو اصلاحیه CSS 2.1 و CSS 2.2 نیز بود اما به طور کلی امروزه استفاده از این نسخه نیز پیشنهاد نمی شود.

CSS 3

CSS 3 در 1999 معرفی شد و تحول بزرگی در بهبود نسخه های CSS محسوب می‌شود. این نسخه ساختاری ماژول بندی شده دارد و امکانات آن در قالب ماژول های مختلف در دسترس طراحان قرار می گیرد. تا سال 2012 حدود 50 ماژول معرفی شدند که امکاناتی مانند استفاده از تصویر در پس زمینه، اضافه کردن فرم های چند ستونی و غیره را برای طراحی سایت ها فراهم می‌کنند.

CSS 4

در واقع استانداردی به نام CSS 4 وجود ندارد زیرا توسعه دهندگان CSS 3 به توسعه و بهبود هر کدام از ماژول ها پرداختند و این سطح، در واقع از تعدادی از ماژول های سطح 4 تشکیل شده است. برخی از این ماژول ها عبارت اند از Image value، Background و Selectors که بسیار کاربردی هستند.