زبان CSS چیست و چه کاربردی در زیباتر شدن صفحات وب دارد؟

زبان نشانه‌گذاری CSS در حقیقت زبانی برای توصیف نحوه‌ی نمایش صفحات وب‌سایت است. اگر یک وب‌سایت را مانند یک ساختمان در نظر بگیریم HTML اسکلت‌بندی و ساختار کلی سایت محسوب شده و CSS نمای ساختمان، رنگ‌ها، کاغذ دیواری‌ها و تمام بخش‌های مربوط به دکوراسیون و زیباسازی ساختمان را شامل می‌شود. زبان‌هایی مانند ASP و PHP را نیز می‌توان مانند قفل‌ها، گاو صندوق‌ها، سیستم اطفاء حریق و تمامی امور مربوط به هوشمند سازی ساختمان تشبیه کرد.

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

دلیل نام‌گذاری CSS چیست؟

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

مفهوم آبشاری بودن این زبان زمانی بیشتر به چشم می‌خورد که به یک المان در صفحه چندین بار استایل‌دهی شده باشد. در این صورت آخرین کدی که به آن المان اشاره کند به صورت آبشاری روی همه کد‌های مربوط به آن Overwrite شده و اجرا خواهد شد. به عبارت ساده می‌توانیم عبارت Cascading Style Sheets را استایل‌دهی صفحات وب به صورت آبشاری نیز معنا کنیم.

تاریخچه‌ی CSS و شکل‌گیری این زبان

در ابتدای ظهور وب، ظاهر وب‌سایت‌ها بسیار ساده بود، یک وبسایت شامل متن ساده و بدون هیچ نوع آراستگی و ظاهری دلنشین بود. عناوین و تیترها به صورت بزرگ و Bold نمایش داده‌ می‌شدند و پیوندها به رنگ آبی و دارای زیرخط بودند. کل ظاهر وب‌سایت‌ها در همین ویژگی‌های تکراری و خسته کننده خلاصه میشد. اما با ظهور CSS در ۱۰ اکتبر ۱۹۹۴ دنیای وب رنگ دیگری به خود گرفت و هر روز به گستردگی انتخاب در آن افزوده شد.

CSS کار خود را با اولین ورژن خود با عنوان CSS-1 شروع کرد که مورد تایید کنسرسیوم جهانی وب یعنی W3C نیز بود. پس از آن نسخه‌های توسعه و بهبود یافته‌ دیگری مانند CSS-2 و CSS-2.1 ارائه شدند که به دلیل نواقص و منقضی شدن بخش‌هایی از آن هیچ کدام از این ورژن‌ها دیگر مورد استفاده قرار نمی‌گیرند.

در حال حاضر با وجود ارائه شدن نسخه ۴ این زبان، نسخه ۳ پرطرفدار‌ترین است؛ اما دلیل این محبوبیت برتری این نسخه از CSS-4 نیست چرا که این نسخه با ارائه ویژگی‌های بزرگی نظیر Flex انقلابی عظیم در طراحی وب ایجاد کرده است و تنها ساپورت مرورگرها طراحان را وادار به استفاده از ورژن CSS-3 می‌کند تا مرورگرها در به روزرسانی‌های خود پشتیبانی از آخرین نسخه را نیز به مرور به کاربردهای خود بیفزایند.

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

تنوع و امکانات فوق‌العاده در کنار انعطاف‌پذیری بی ‌نهایت دلچسب CSS، این زبان را جزئی جدایی ناپذیر از وب‌سایت‌ها ساخته است، همچنین به روز رسانی‌ها و ویژگی‌های جذاب روز افزون این زبان طراحان را شیفته خود کرده، امکان افزودن افکت‌های فوق‌العاده جذاب در ورژن ۳ این زبان (CSS-3) بدون افزودن صدها خط کد جاوا اسکریپت رویای طراحان را برای ساخت صفحاتی زیبا و سبک را به حقیقت پیوند داده است.

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

آشنایی با یک قطعه کد CSS ساده

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

p {
  text-align: center;
  color: red;
}

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

تبریک می‌گویم! شما ماهیت کدنویسی CSS را به همین سادگی متوجه شدید. بزرگترین موضوع در نوشتار CSS انتخابگرها یا همان سلکتورها (Selector) هستند یعنی همان انتخاب دایره‌ها و جدا سازی آن‌ها که روش‌های مختلفی دارند؛ مابقی قضایا بیشتر بر اساس نوشتن علایق با فرمتی بسیار ساده و یکنواخت است درست مثل نحوه‌ی رنگ زدن دایره‌ها که با رنگ نحوه‌ی زدن مثلث‌ها فرقی ندارد.

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

اکنون زمان تشریح بخش‌های مختلف این مثال است؛ کد بالا در بخش‌های مختلف اجرا می‌شود که هر کدام کارایی خاصی دارند:

• p به عنوان انتخابگر یا Selector است که به <p> در HTML اشاره دارد.
• color یک خصیصه است که رنگ دلخواه red به عنوان value یا مقدار آن شناخته می‌شود.
• text-align نیز مانند color یک خصیصه است و center مقداری است که برای این خصیصه تعیین می‌شود.

در کل می‌توان گفت مقادیر (Value) همان دستوراتی هستند که درخواست ما را تکمیل می‌کنند. بر این اساس در “تگ‌های p را قرمز کن!“؛ رنگ‌ آمیزی تگ‌های p درخواست ما و قرمز کن دستوری است که برای انجام درخواست، اعلام می‌شود.

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

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

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

آشنایی با پیش پردازنده‌های CSS و نحوه عملکرد آن‌ها

یکی از مشکلات عمده زبان‌هایی مانند زبان CSS قانون از پیش تعریف شده بودن کدهای آن است و همین ویژگی که سبب ساده بودن آن شده است مشکل تکرار کد را به همراه دارد که این موضوع در پروژه‌های بزرگ یک معضل به حساب می‌آید چرا که با افزایش استایل‌ها اولویت و ارث بری کدها بیشتر شده و مدیریت کردن آن‌ها دشوار می‌شود.

علاوه بر آن فرض کنید که شما طراحی یک پروژه بزرگ را به عهده دارید؛ اگر پس از طراحی شرکت سفارش دهنده درخواست تغییر رنگ بخشی از سایت را بدهد چقدر باید میان کدها و اولویت‌ها بگردید تا آن‌ها را پیدا کرده و تک به تک تغییر دهید! اما اگر در این زبان مانند زبان‌های برنامه نویسی دیگر امکان تعریف متغیر، توابع و کلاس‌ها را داشتید قطعا کار برایتان راحت‌تر بود و تنها با تغییر مقدار متغیر رنگ آن بخش، تمامی رنگ‌های مربوط به بخش مورد نظر تغییر می‌کرد.

برای رفع این مشکل و رعایت اصول برنامه‌نویسی یعنی عدم تکرار کد و هوشمندی؛ پیش پردازنده‌ها به کمک زبان CSS آمدند و بستر کدنویسی حرفه‌ای را برای کاربران خود فراهم آوردند، پیش پردازنده‌های مختلفی برای این زبان وجود دارد که از معروف‌ترین و پرکاربردترین آن‌ها می‌توان به SASS ،LESS و SCSS اشاره کرد.

تفاوت پیش پردازنده‌های SCSS, SASS, LESS با CSS

هیچ کدام از این پیش پردازنده‌ها همانطور که از اسم‌شان پیداست جایگزینی برای CSS نیستند و تنها برنامه‌نویسی با CSS را برای طراحان راحت‌تر می‌کنند. کدهای ایجاد شده توسط این پیش پردازنده‌ها نیز در نهایت به زبان CSS کامپایل (ترجمه) خواهد شد چرا که مرورگرها تنها CSS را می‌شناسند.  

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

شاید این سوال برایتان پیش آمده باشد که تفاوت این پیش پردازنده‌ها با یکدیگر چیست و چرا برای یک زبان ساده مثل CSS چندین و چند پیش پردازنده وجود دارد با اینکه با یک پیش پردازنده منسجم کار طراحان نیز ساده تر می‌شد. 

یکی از دلایل تفاوت‌های ساختاری میان این پیش پردازنده‌هاست. به عنوان مثال زبان برنامه نویسی پیش پردازنده LESS که مخفف Leaner Style Sheets است با استفاده از جاوا اسکریپت کار می‌کند که یک زبان سمت کلاینت یا Client side است (یعنی روی سیستم کاربر دانلود و اجرا می‌شود) که معایبی را به همراه دارد. برای مثال اگر کاربر اجرای جاوا اسکریپت خود را در مرورگر غیر فعال کند اجرای LESS نیز دچار مشکل خواهد شد. اما در عوض نمایش خطاها در این پیش پردازنده دقیق‌تر است.

زبان پیش پردازنده SASS مخفف Syntactically Awesome Style Sheets که یکی از پرطرفدارترین‌هاست. یک زبان سمت سرور یا Server Side است که روی زبان Ruby اجرا می‌شود و برای کد نویسی با آن ابتدا باید Ruby را نصب کنید. یکی از مزایای این زبان این است که کاربران حق انتخاب بین دو نوع کد نویسی یا Syntax دارند؛ یعنی می‌توانند بین SCSS و Indented که هر دو زیر مجموعه SASS هستند یکی را برای کارکرد انتخاب کنند.

از مزایای دیگر این زبان این است که روی همه داده‌ها چه عددی و چه هر نوع دیگر پیمایش می‌کند در حالی که زبان LESS تنها روی داده‌های عددی پیمایش می‌کند و مزایای فوق العاده‌ی دیگری همچون sass-convert برای تبدیل پرونده‌ها از یک syntax به یک syntax دیگر این زبان را یکی از پر طرفدار‌ترین‌ها کرده است.

در مورد SCSS نیز همانطور که گفته شد یکی از سینتکس‌های این زبان و یا به عبارتی زیرمجموعه آن است که به دلیل انعطاف پذیری و کاربردهای فوق‌ العاده آن بیشتر از نوع دیگر مورد توجه قرار گرفته است.