CSS یا Cascading Style Sheets یا شیوه نامه آبشاری ،بهتون امکان میده صفحات وب با ظاهری عالی ایجاد کنین، این زبان برنامه نویسی یکی از رایج‌ترین و محبوب‌ترین ابزارها برای طراحی صفحات سایت است و از زبان‌های اسکریپت دیگه‌ای مثل SVG, Plain XML و XUL نیز به خوبی پشتیبانی میکنه!
با استفاده از CSS می‌تونین دقیقاً چگونگی ظاهر عناصر HTML رو در مرورگر کنترل کنید و مارکاپ خودتون رو با استفاده از هرچیزی که دلتون میخواد طراحی کنین، نشون بدین.
این زبان برنامه نویسی قطعاً شامل مزایا و معایبی هست که باید قبل از شروع به کار از اون‌ها خبر داشته باشین، من تا جایی که تونستم موارد مربوط به CSS رو براتون آماده کردم و امیدوارم که به دردتون بخوره:
CSS چیست؟
همونطوری که در قسمت مقدمه هم گفتم، CSS زبانی برای تعیین نحوه ارائه (نحوه طراحی، تنظیم و غیره) اسناد به کاربران است. یه سند معمولاً یه فایل متنی است که با استفاده از یه زبان نشانه گذاری ساخته شده؛ HTML رایج‌ترین نوع این زبان است، اما ممکنه شما به زبان‌های نشانه گذاری دیگه‌ای مثل SVG و XML هم برسین!
این که شما یه سندی رو به کاربر ارائه میدین تا ازش استفاده کنه یعنی اون رو به شکلی تبدیل کردین که توسط مخاطب‌تون قابل استفاده باشه. مرورگرهایی مثل کروم، فایرفاکس یا Edge برای ارائه اسناد بصری در صفحه کامپیوتر مثل یه پروژکتور یا چاپگر طراحی شدن.
CSS میتونه برای طراحی هر سند متنی اساسی استفاده بشه، مثلاً تغییر رنگ و اندازه عنوان‌ها و لینک ها! یا این که می‌تونین از اون برای ایجاد طرح جدید استفاده کنین مثل تبدیل یه ستون متنی به چیدمانی با یه محدوده برای محتوای اصلی و یک نوار کناری یا Sidebar برای اطلاعات مربوط به اون! حتی میشه برای جلوه‌هایی مثل انیمیشن هم از اون استفاده کرد.
در نتیجه این زبان برای فرم دهی صفحات وب HTML و اجزای مختلف اون که به وسیله کنسرسیوم بین المللی شبکه جهانی وب W3C توسعه داده شده، در واقع یه زبان نشانه گذاری است که بهتون اجازه میده صفحات وب رو از چیدمان عناصر گرفته تا تغییر رنگ بندی و فونت‌ها شکل بدین و خوشگلشون کنین ? این زبان کنار HTML و JavaScript از هسته‌های اصلی طراحی صفحات وب به حساب میان.
ترکیب CSS در دنیای واقعی
CSS یه زبان مبتنی بر قانون است، شما قوانینی رو تعیین میکنین که گروه‌های خاصی از طراحی که باید برای عناصر به خصوصی روی صفحه وب اعمال بشن رو مشخص میکنه. مثلاً من میخوام که عنوان اصلی متن در صفحه با رنگ قرمز و بزرگ نشون داده بشه.
h1 { color: red; font-size: 5em; }
این قانون با یه Selector شروع میشه و اون دسته از عناصر HTML که قراره برای طراحی ازشون استفاده کنیم رو انتخاب میکنه. تو این مورد ما در حال طراحی هدینگ شماره یک هستیم! سپس مجموعه‌ای از براکت‌ها {} رو خواهیم داشت که داخلشون یک یا چندتا مورد به صورت ویژگی‌های جفتی نوشته میشه. هر جفت از این موارد نوشته شده، یه ویژگی از عنصر مورد نظر و مقداری که می‌خوایم اون ویژگی رو ارائه بدیم رو مشخص میکنن.
قبل از دو نقطه : یا Colon یه ویژگی و بعد از اون یه مقدار داریم. بسته به این که چه ویژگی رو داخل براکت نوشته باشیم، مقدار اون هم تغییر میکنه یعنی میخوام بگم هر ویژگی برای خودش یه مقدار مجاز داره. مثلاً ما ویژگی رنگ رو داریم که میتونه مقادیر مختلفی از رنگ رو به خودش اختصاص بده! یا مثلاً ویژگی فونت که سایزهای مختلفی داره!
خلاصه که یه صفحه CSS پر از این قوانینی هست که یکی بعد از دیگری نوشته میشن:
h1 { color: red; font-size: 5em; } p { color: black; }
سایزها یا مقادیر چیزیه که سریعاً یاد میگیرین پس نگرانش نباشین، اما برای بقیه چیزها باید کم کم دنبالشون بگردین و یکم طول میکشه تا حفظ بشین. صفحات ویژگی اختصاصی روی MDN است که یه راه سریع برای جستجوی ویژگی‌ها و مقدار اون‌هاست (اگه یه موقع گمشون کردین یا خواستن از مقدارای جدیدی استفاده کنین برین سراغ این صفحات).
ماژول‌های CSS
از اون‌جایی که چیزهای زیادی وجود داره که می‌تونین با استفاده از CSS طراحی کنین و بهش سبک بدین، این زبان به ماژول‌ها تقسیم میشه. وقتی برین سراغ MDN می‌بینین که خیلی از صفحات اسناد تو یه ماژول خاص سازمان یافته‌اند و شما به این ماژول‌ها مراجعه میکنین. مثلاً اگه به ماژول Background and Banks یه نگاهی بندازین، متوجه میشین که هدف و ویژگی‌های اصلی اون چیه. همچنین می‌تونین با یه سرچ ساده تو گوگل لینک هایی رو که در مورد ویژگی‌های CSS توضیح دادن، پیدا کنین.
تو این مرحله لازم نیست زیاد نگران ساختار CSS باشین چون یه مفاهیم ساده، بهتون کمک میکنه بتونین یه سری ویژگی‌هایی که باهاشون آشنا هستین رو پیدا کنین، مثلاً شاید فکر کنین ویژگی رنگ حاشیه و پس زمینه ممکنه تو ماژول Background and Banks باشه و خب بله منطقیم هست!
مشخصات CSS
کلیه تکنولوژی‌های استاندارد وب (HTML, CSS, JavaScript و غیره) تو اسناد غول پیکری به اسم Specification یا Specs تعریف شد که توسط سازمان‌های استاندارد مثل W3C, WHATWG, ECMA یا Khronos منتشر میشن و تعریف میکنن که دقیقاً قراره این تکنولوژی‌ها چطوری رفتار کنن!
CSS یا CSS Working Group که فرقی هم با هم ندارن، از فروشندگان مرورگر و شرکت‌های دیگه‌ای که به CSS علاقمند هستند، تشکیل شده. البته افراد دیگه‌ای هم هستن که به عنوان کارشناس دعوت شدن و از هر شرکت یا گروه دیگه‌ای مستقل‌اند.
ویژگی‌های جدید CSS توسط کارگروه CSS تهیه و یا مشخص شده. بعضی اوقات به دلیل این که یه مرورگر خاص به داشتن بعضی از توانایی‌ها علاقمنده، یه وقت‌هایی بخاطر این که طراحان وب و یا توسعه دهندگان خواستار یه ویژگی هستند و یا شاید به این دلیل که گروه کاری خودشون یه شرطی رو مشخص کردن، CSS به طور مداوم در حال توسعه و بهبوده و ویژگی‌های جدیدی از اون در دسترسه. با این حال نکته اصلی درباره این زبان اینه که همه خیلی سخت کار میکنن تا هرگز تغییراتشون منجر به از بین بردن و خراب شدن سایت های قدیمی نشه، یعنی یه سایت که تو سال 2000 با اون ورژن قدیمی CSS ساخته شده باید هنوز هم تو مرورگرها قابل استفاده باشه.
نسخه‌های مختلف CSS
همیشه یه نسخه جدید برای تکمیل نسخه قبلی خودش وارد بازار میشه، درباره CSS هم همین موضوع صدق میکنه، در واقع ویژگی‌های جدیدی تو هر نسخه جدید معرفی میشه، البته بهتره بگم اگه با CSS آشنایی زیادی ندارین لازم نیست از همه نسخه‌های اون استفاده کنین چون یکم گیج کننده میشه!
بهتره بریم سراغ معرفی نسخه‌ها:
CSS1
خب اولین نسخه‌ای که از CSS معرفی شد همین نسخه بود، البته الان دیگه کسی استفاده از این نسخه رو پیشنهاد نمیکنه چون سری‌های جدیدتر و بهتری اومدن. به هرحال این نسخه هم ویژگی‌های خاص خودش رو داشت که عبارتند از:
- امکان تغییر رنگ، اختصاص دادن یه رنگ به عناصر متن و پس زمینه
- امکان کلاس بندی گروهی از ویژگی‌ها
- اضافه کردن امکاناتی برای ایجاد سبک و تنظیم Font face و Emphasis
- امکان تنظیم فاصله بین کلمات و سطرهای متن
- امکان اضافه کردن حاشیه، کادر و لایه بندی صفحات وب
CSS2
دومین نسخه که تو سال 1998 معرفی شد:
- شناخت انواع فایل‌های چند رسانه‌ای
- قابلیت‌هایی برای طراحی متن مثل راست چین یا چپ چین بودن نوشته
- امکان تنظیم جایگاه ترسیم ها به سه روش ثابت، متغیر و وابسته به سایر ترسیم ها در صفحه
CSS3
در سال 1999 معرفی شد و یه تحول بزرگی تو نسخه‌های CSS به حساب میومد:
- به صورت ماژول بندی و ارائه امکانات در قالب ماژول‌های مختلف
- افزودن امکاناتی مثل استفاده از تصویر در پس زمینه، اضافه کردن فرم‌های چند ستونی و غیره
CSS4
برای CSS4 یه سری ویژگی و استاندارد خاص وجود نداره چون CSS3 انقدر مناسب بود که توسعه دهندگان تصمیم گرفتن همون ماژول‌ها رو بهبود ببخشن و خب یه سری ماژول جدید تو این نسخه ایجاد شد مثل: Background, Image Value و Selectors که خیلی هم کاربردی هستند.
پشتیبانی مرورگرها از CSS
وقتی یه زبانی برای اولین بار وارد دنیای وب میشه ممکنه همه چی طبق میلش پیش نره و اصلاً مرورگرها نتونن اون رو بخونن و تجزیه و تفسیرش کنن، برای CSS هم همین اتفاق افتاد و کدهای اون تو مرورگرها تجزیه نمیشد بخاطر همین هم توسعه دهنده‌ها مجبور بودند از یه تکنیکی به اسم CSS Hack استفاده کنن. به کمک این تکنیک برنامه نویس تعیین میکنه اون قسمت‌هایی از CSS که تو مرورگر پشتیبانی نمیشه، نشون داده هم نشه.
البته بعد از این ماجرا دیگه نمیشد این کدها رو نادیده گرفت و ازشون پشتیبانی نکرد چون یه چیز به درد بخور و خوبی بودن و روز به روز کاربردشون بیشتر میشد، برای همین هم مرورگر Internet Explorer 3 پشتیبانی از کدهای این زبان رو شروع کرد و تو سال 2008 تو هشتمین نسخه خودش تونست به طور کامل از CSS پشتیبانی کنه.
در حال حاضر اکثر مرورگرها از این زبان پشتیبانی میکنن اما هنوز هم ممکنه توسعه نسخه‌های CSS یه سری مشکلاتی رو به وجود بیاره.
چرا لازمه از این زبان استفاده کنیم؟
مهم‌ترین کاربرد CSS اینه که باعث بهبود و زیبایی طراحی صفحات وب میشه. CSS خیلی از HTML منعطف‌تره و بهتون اجازه میده برای تغییر صفحات وب کمتر سراغ یه ساختاری مثل HTML برین و البته با سرعت بیشتری یه طراحی جذاب انجام بدین.
فرانت اند Front-end چیه؟
گفتیم که CSS برای زیباسازی و طراحی صفحات وب خیلی مهمه و خب این قشنگی روی فرانت اند نشون داده میشه! در واقع هر ویژگی و تکنولوژی که روی ظاهر سایت تاثیر بذاره ولی کاری به عملکرد اون نداشته باشه، فرانت اند است. پس با این حساب باید گفت که ما در فرانت اند با عناصری کار میکنیم که بصری هستند و ظاهر سایت رو تغییر میدن. از مهم‌ترین عناصر بصری یا فرانت اند میتونم به HTML, JS و CSS اشاره کنم.
مزایای CSS
احتمالاً تا این جای کار خیلی از مزایای CSS رو متوجه شدین مثلاً این که می‌تونین یه کد نویسی تر تمیزی داشته باشین! یا میشه از یه قطعه کد برای صفحات مختلف HTML استفاده کرد و در زمان صرفه جویی کنین.
البته لازمه بگم CSS برای یهتر شدن سئو سایت هم یه مورد موثره و با سئو دوسته SEO Friendly، چرا با هم دوستن؟ خب معلومه بخاطر این که میتونه سایت شما رو خوشگل کنه و قابلیت دسترسی اون رو افزایش بده، از صفحات وب تو مرورگرهای مختلفی پشتیبانی کنه و آخر از همه اینکه باعث تجربه کاربر خوب بشه که این موارد برای سئو خیلی مهمن. اگه بخوام به چندتا دیگه از مزایای اون به صورت موردی اشاره کنم باید بگم که:
- از کدها خیلی راحت نگهداری میکنه.
- سرعت سایت رو بهبود میبخشه و زمان بارگذاری کمتری برای صفحات وب نیاز داره.
- از کدنویسی غیراصولی و زشت جلوگیری میکنه.
- نسبت به HTML ویژگی‌های بیشتری برای کار با اجزای صفحات داره.
- بهتون امکان میده تا جلوه‌های انیمیشنی جذاب بسازین.
معایب CSS
درسته که زبان CSS مزایای زیادی داره ولی هر تکنولوژی یه سری ضعف و مشکل هم داره که خب درباره CSS هم صدق میکنه:
- تفاوت کارکرد CSS تو مرورگرهای مختلف میتونه برای برنامه نویس مشکل پیش بیاره
- تو CSS نمیشه برای یه عنصر یه گزینه بالاتر یا والد انتخاب کرد
- چون CSS متن باز است پس هر تغییری میتونه برنامه نویس رو تو دام تغییرات ناخواسته‌ای بندازه که کل سایت رو تحت تاثیر قرار میدن
- ناتوانی تو نام گذاری نقش‌ها در زمان ارجاع اسکریپت های بخش کاربر و تغییر Selectors
