برنامه نویسی -
28 شهریور 1401
تاریخچهی CSS و شکلگیری این زبان
در ابتدای ظهور وب، ظاهر وبسایتها بسیار ساده بود، یک وبسایت شامل متن ساده و بدون هیچ نوع آراستگی و ظاهری دلنشین بود. عناوین و تیترها به صورت بزرگ و Bold نمایش داده میشدند و پیوندها به رنگ آبی و دارای زیرخط بودند. کل ظاهر وبسایتها در همین ویژگیهای تکراری و خسته کننده خلاصه میشد. اما با ظهور CSS در 10 اکتبر 1994 دنیای وب رنگ دیگری به خود گرفت و هر روز به گستردگی انتخاب در آن افزوده شد.
CSS کار خود را با اولین ورژن خود با عنوان CSS-1 شروع کرد که مورد تایید کنسرسیوم جهانی وب یعنی W3C نیز بود. پس از آن نسخههای توسعه و بهبود یافته دیگری مانند CSS-2 و CSS-2.1 ارائه شدند که به دلیل نواقص و منقضی شدن بخشهایی از آن هیچ کدام از این ورژنها دیگر مورد استفاده قرار نمیگیرند.
در حال حاضر با وجود ارائه شدن نسخه ۴ این زبان، نسخه ۳ پرطرفدارترین است؛ اما دلیل این محبوبیت برتری این نسخه از CSS-4 نیست چرا که این نسخه با ارائه ویژگیهای بزرگی نظیر Flex انقلابی عظیم در طراحی وب ایجاد کرده است و تنها ساپورت مرورگرها طراحان را وادار به استفاده از ورژن CSS-3 میکند تا مرورگرها در به روزرسانیهای خود پشتیبانی از آخرین نسخه را نیز به مرور به کاربردهای خود بیفزایند.
تعریف و مفهوم CSS
Css مخفف Cascading Style Sheets است که در معنای لغوی به روشی گفته می شود که برای قالب بندی و طراحی اجزای صفحه وبسایت کارایی دارد. شما می توانید بدون استفاده از کدهای HTML از طریق این استایل شیت ها (Style Sheet) می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگزاری صفحه در اینترنت می شود جلوگیری کنیم.
برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکریپت نیز استفاده کنیم و همانند مشکلات جاوا اسکریپت که در بعضی اوقات مثل غیر فعال بودن جاوا اسکریپت در مرورگر همراه نیست و با خیالی آسوده تر می توانیم از آن استفاده کنیم.
در نسخه های مختلفی به بازار وب عرضه شد که در جلسه ی بعدی کاملا درباره نسخه های css صحبت می کنیم. فایل استایلها با فرمت css. ذخیره میشوند. سی اس اس از یک سری کد تشکیل شده که با استفاده از این کدها می تونید به راحتی به عناصر و کدهای HTML شمایل بدهید، به عنوان مثال می توانید تعریف کنید که سرتیتر خبر با فونت ضخیم آبی رنگ از خانواده Tahoma نمایش داده بشه.
هدف و کاربرد css چیست ؟
هدف از تولید css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.
برخی از کاربردهای CSS عبارتند از:
تعیین ارتفاع و عرض
طراحی رسپانسیو صفحات
انتخاب پس زمینه
انتخاب محل قرار گرفتن یک عنصر مانند متن یا عکس و…
تعیین چیدمان نوشته ها (چپ چین، راست چین و…)
مشخص کردن میزان فاصله ی عناصر از همدیگر
تغییر در نوع نوشتاری (فونت، رنگ و…)
چرا باید از CSS استفاده کنیم؟
زبان CSS به عنوان سنگ بنای طراحی در کنار HTML در تمامی پلاگینها و سایتهای موجود در اینترنت وجود دارد که افراد مختلف با توجه به نیاز و علمشان از آن بهره میبرند. بیشترین کاربردهای CSS در پلاگینهایی مانند Animate.js و پلاگینهای مربوط به منوهای مختلف است. اما این زبان محدود به همین جا نمیشود و پلاگینها و قطعه کدهای رایگان بدون JS زیادی برای افزودن به صفحه دارد.
انواع منوهای زیبا و سبک که میتوانند جایگزین منوهای سنگین جاوا اسکریپتی باشند و انیمیشنهای بسیار زیبا و کاربردی که میتوانند جای تصاویر متحرک پر حجم امروزی را برایمان پر کنند، اگر چه بازار پلاگینهای JavaScript به دلیل افکتها و جذابیتهای بیشتر کمی داغتر است اما سئو و موتورهای جستجو به دلیل اعطای امتیاز به سایتهای سبکتر و سریعتر، سبب شده بسیاری از طراحان حرفهای به این سمت حرکت کرده و استفادهی خود را از JS تا حد قابل توجهی کاهش دهند.
آشنایی با پیش پردازندههای CSS و نحوه عملکرد آنها
یکی از مشکلات عمده زبانهایی مانند زبان CSS قانون از پیش تعریف شده بودن کدهای آن است و همین ویژگی که سبب ساده بودن آن شده است مشکل تکرار کد را به همراه دارد که این موضوع در پروژههای بزرگ یک معضل به حساب میآید چرا که با افزایش استایلها اولویت و ارث بری کدها بیشتر شده و مدیریت کردن آنها دشوار میشود.
علاوه بر آن فرض کنید که شما طراحی یک پروژه بزرگ را به عهده دارید؛ اگر پس از طراحی شرکت سفارش دهنده درخواست تغییر رنگ بخشی از سایت را بدهد چقدر باید میان کدها و اولویتها بگردید تا آنها را پیدا کرده و تک به تک تغییر دهید! اما اگر در این زبان مانند زبانهای برنامهنویسی دیگر امکان تعریف متغیر، توابع و کلاسها را داشتید قطعا کار برایتان راحتتر بود و تنها با تغییر مقدار متغیر رنگ آن بخش، تمامی رنگهای مربوط به بخش مورد نظر تغییر میکرد.
برای رفع این مشکل و رعایت اصول برنامهنویسی یعنی عدم تکرار کد و هوشمندی؛ پیش پردازندهها به کمک زبان CSS آمدند و بستر کدنویسی حرفهای را برای کاربران خود فراهم آوردند، پیش پردازندههای مختلفی برای این زبان وجود دارد که از معروفترین و پرکاربردترین آنها میتوان به SASS ،LESS و SCSS اشاره کرد.
نسخهها
سیاساس، روش چاپ شدن، روش شنیده شدن صدا برای کاربرانی با مشکل دسترسایی، و دستورهای فراوان دیگری را برای چگونگی نمایش سایه زیر قلمها و پس زمینههای هر صفحه وب را در خود جای میدهند. آخرین نسخه پیشنهاد شده از استاندارد سیاساس، نسخه ۳ میباشد که هنوز در مسیر پیشنهادی قرار دارد و مرورگرهای اینترنتی، هنوز تمام دستورهایش را پشتیبانی نمیکنند.