همه چیز درباره CSS

وقتی صحبت از طراحی وب سایت به میان می آید، اولین سوال این است که html css چیست ؟ در یک کلام باید گفت پایه و اساس طراحی وب سایت، این دو زبان است. اما Css مخفف چیست Cascading Style Sheet (CSS) یک زبان طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت می باشد. این ابزار یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط زبان HTML و یا XHTML می باشد و همچنین از زبان های اسکریپت دیگری مانند plain XML، SVG و XUL نیز به خوبی پشتیبانی می نماید.

هدف از زبان css چیست ؟

هدف از تولید زبان برنامه نویسی css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.

مفهوم webkit چیست ؟

در پاسخ به webkit در css چیست بایستی گفت WebKit یک موتور طراحی است که به مرورگرهای وب اجازه ارائه صفحات وب را می دهد. Webkit موتور ارائه دهنده html / css است که در مرورگر Safari اپل و در Chrome Chrome استفاده می شود.

مفهوم stylesheet چیست ؟

یک stylesheet مجموعه ای از قوانین و کدهای css است که به مرورگر می گوید که چگونه  tag HTML نمایش داده شود.

کاربرد css چیست ؟

کاربرد CSS را می توان این چنین بیان کرد که سی اس اس زبانی است برای توصیف ارائه صفحات وب ، از جمله رنگ بندی ، چیدمان و فونت سایز و رنگهاست… همین طور زبان css این امکان را به شما می دهد تا وب سایت خود را در هر سایزی به صورت سفارشی سازی نمایش دهید.

فایل css چیست ؟

زبان برنامه نویسی css با ایجاد فایل .css همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا ( برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.

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

مشخصات و قابلیت های زبان برنامه نویسی css توسط کنسرسیوم تایین استاندارد World Wide Web  (W3C) و همچنین موسسه (Internet Media Type (MIME Type مورد تایید و در استاندارد RFC 2318 قرار گرفته است.حال که با مفاهیم زبان css چیست؟ آشنا شدید در امتداد مقاله به بررسی نوع دستوری آن می پردازیم.

فرمت css چیست ؟

در پاسخ به این پرسش بایستی گفت فرمت فایل سی اس اس، .css می باشد.

نوع دستوری (Syntax) در زبان css چیست ؟

زبان css نحوی ساده ای دارد که از کلمات کلیدی انگلیسی آسانی برای طراحی و تنظیم مشخصات صفحات استفاده می نماید. یک صفحه طراحی (Style Sheet) تشکیل شده از لیستی از قوانین (Rule) می باشد. هر قانون تشکیل شده از یک یا چند انتخاب کننده (Selector) و یا بلوک های اعلان (Declaration block) می باشد. هر کدام از بلوک های اعلان تشکیل شده از لیستی از بلوک های اعلان متغیر دیگر می باشد. هر یک از اعلان گر های متغیر شامل یک کلون (:) و یک مقدار می باشد. همچنین در صورتی که قرار باشد چندین متغیر در یک بلوک اعلان شود، هر یک از متغیر ها توسط یک سمی کلون (;) از هم جدا می شوند.

انواع css

زبان CSS 1 چیست ؟

در پاسخ به پرسش ccs چیست بایستی گفت اولین نسخه از زبان برنامه نویسی css که توسط موسسه استاندارد سازی W3C نیز مورد تایید قرار گرفت، در دسامبر سال ۱۹۹۶ منتشر شد. این نسخه از CSS از قابلیت های زیر پشتیبانی می کرد :

• امکان تنظیم نمودن مشخصه های فونت مانند قابلیت Fontface و Emphasis
• امکان تغییر دادن رنگ متون، مشخص نمودن تصویر یا رنگ پس زمینه و سایر مشخصه های ظاهری.
• امکان تغییر سایر مشخصه های متون، مانند تنظیم نمودن فاصله بین کلمات، حروف و سطرها.
• هم تراز نمودن نوشته ها، تصاویر و جداول
• قابلیت اضافه نمودن حاشیه، کادر و لایه بندی صفحات
• امکان دسته بندی و نشانه گزاری مشخصه ها و امکانات وب سایت

قابل ذکر است که WC3 دیگر نسخه CSS 1  را توصیه نمی نماید.

زبان CSS 2 چیست ؟

نسخه دوم زبان برنامه نویسی css نیز در ماه می سال ۱۹۹۸ منتشر و به کاربران ارایه شد. این نسخه از CSS دارای قابلیت های اضافه نسبت به نسخه قبلی بود. برخی از این امکانات شامل : قابلیت تنظیم جایگاه اجسام به صورت ثابت، متغیر و یا بسته به دیگر اجسام و همچنین قابلیت z-index ، مفهوم انواع فایلهای چند رسانه ای، پشتیبانی از طراحی Aural صفحات، امکان تنظیم نمودن متن به صورت راست چین و همچنین اضافه شدن قابلیت های تازه ای به نوشته ها مانند سایه بود.

این نسخه از زبان برنامه نویسی css نیز دیگر توسط W3C  توصیه نمی گردد.

نسخه CSS 2.1 چیست ؟

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

مزیت ۳ css چیست ؟

نسخه CSS 3  بر خلاف نسخه های قبلی که تمامی تعاریف و امکانات در قالب یک نرم افزار مورد استفاده کاربر قرار می گرفت، دارای ساختاری ماژولار است. هر یک از ماژول ها، قابلیت های خاصی را به نرم افزار اضافه می نماید. این نسخه از CSS در ماه ژوئن سال ۱۹۹۹ منتشر گردید.

با بوجود آمدن ساختار ماژولار، امکانات مختلفی به تفکیک ماژول های مختلف قابل اضافه شدن به نرم افزار گردید. طبق آخرین اخبار، در ماه نوامبر سال ۲۰۱۱ بیش از ۵۰ نوع ماژول مختلف با امکانات ویژه ای توسط تیم طراحی زبان برنامه نویسی css به کاربران ارایه شد. برخی از ماژول ها امکاناتی مانند اضافه نمودن تصاویر ویژه به عنوان پس زمینه، محاسبه اطلاعات رسانه ای و قابلیت اضافه نمودن فرم های چند ستونی در صفحه بندی وب سایت می باشد.

زبان css 4 چیست؟

استاندارد WC3 شروع به طراحی و تکمیل نسخه چهارم زبان css در ماه سپتامبر سال ۲۰۰۹ نمود، گرچه هنوز هیچ یک از مرورگرهای معروف از تمامی امکانات آن پشتیبانی نمی کنند، اما پیشبینی می شود تا چندین سال آینده این نسخه از زبان css به عنوان یکی از رایج ترین ابزارهای طراحی با امکانات ویژه ای مورد استفاده قرار بگیرد.

مزایای سی اس اس چیست ؟

• سازگاری بیشتر در طراحی
  گزینه های قالب بندی بیشتر
  کد سبک
  بارگیری سریعتر
  بهینه سازی موتور جستجو
  دسترسی بهتر به کد

ابزار Scss چیست ؟

تکنولوژی Scss پسوند نحوی CSS است. این بدان معنی است که هر شیوه نامه معتبر CSS یک پرونده SCSS معتبر با همان معنی است. علاوه بر این ، SCSS بیشتر هک های CSS و نحو اختصاصی فروشنده ، مانند فیلتر قدیمی IE را می فهمد.

منظور از پشتیبانی مرورگرها از زبان css چیست ؟

همه مرورگرهای قادر نیستند تا کد های CSS را به خوبی تجزیه (Parse) نمایند، به همین دلیل تکنیک کدنویسی خاصی به نام CSS HACK ایجاد گشته که مرورگرهای خاصی را فیلتر می نماید. این تکنیک مشخص می نماید که قسمت های مشخصی از کد های css در مرورگرهایی که پشتیبانی کاملی از آن ندارند، نمایش داده نشوند. برخی از طراحان حرفه ای تر وب سایت از نسخه های مختلف زبان برنامه نویسی css به همرا CSS Filter Hack استفاده می نمایند تا وب سایت آن ها در هر مرورگری به صورت کامل نمایش داده شود.

از آنجایی که اکثر مرورگرهای اولیه به کندی و با کیفیت خیلی پایینی کد های css را نمایش (Render) می دادند، تقریبا تمام طراحان وب سایت از CSS Filter ها استفاده می کردند تا مرورگر مربوطه از کدهایی که از آن به درستی پشتیبانی نمی کند، چشم پوشی نماید. مرورگر معروف ie پشتیبانی از CSS را از نسخه ۳ خود آغاز نمود و در هر نسخه پشتیبانی خود را از آن کامل تر نمود. در سال ۲۰۰۸ نسخه آزمایشی Internet Explorer 8 پشتیبانی خود را از CSS 2.1 با رعایت تمامی استاندارد های آن اعلام کرد.

یکی از مشکلات (Bug) شناخته شده مرورگرها در لود کردن فایل های CSS، به Internet Explorer box model bug  معروف می باشد. در این حالت اندازه عرض فرم ها و اشکال مربعی در نسخه های مختلف مرورگر به صورت پیش بینی نشده تغییر پیدا میکند. این مشکل باعث می شد تا فرم های مربع شکل در Internet explorer  به صورتی بسیار باریک دیده شوند. قابل ذکر است که این مشکل در Internet Explorer  نسخه ۶ برطرف گردید. CSS Hack و CSS Filter جهت جلوگیری از بروز چنین مشکلاتی در مرورگرهای مختلف ایجاد شده اند. تا بحال چند صد مورد از مشکلات پیش بینی نشده ای مانند مورد مذکور در انواع مرورگرهای Internet Explorer، Netscape، Mozilla Firefox و Opera  ثبت شده است.

امروزه حتی با اینکه اکثر مرورگر ها پشتیبانی کامل خود را از زبان css اعلام نموده اند، طراحان وب سایت همچنان با مشکلاتی در طراحی CSS مواجه می گردند. این مشکلات با انتشار نسخه های جدیدتر در طراحی وب سایت های مناسب با چندین مرورگر (Cross-browser) پیچیده تر گشته است.

در حال حاضر رقابت شدیدی بین موتور نمایش صفحه وب شرکت موزیلا به نام Mozilla’s Gecko که در مرورگر Firefox  استفاده می گردد، موتور Webkit مربوط به مرورگر های Safari شرکت Apple و همچنین Google Chrome، موتور KHTML مربوط به مرورگر KDE’s conqueror، و موتور مرورگر Opera به نام Presto وجود دارد که هر یک از آن ها تمرکز خود را بر روی قسمتی از قابلیت های زبان css قرار نمودند.در ماه آگوست سال ۲۰۰۹ دومرورگر معروف Internet Explorer 8  و FireFox 2 و ۳ پشتیبانی کامل خود را از نسخه CSS2.1 اعلام نمودند.

برخی از محدودیت های زبان cssچیست ؟

کنترل ضعیف صفحه بندی های قابل انعطاف

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

عدم امکان انتخاب گزینه های والد

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

محدودیت در کنترل فرم های عمودی

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

عدم وجود توضیحات لازم در زبان css چیست ؟

در حال حاضر هیچ گونه توضیحی حتی مختصر در مورد مقادیر قابلیت های موجود در زبان css وجود ندارد. توضیحاتی مانند : Margin-left : 10 – ۳em + 4px . چنین توضیحاتی به کاربر در شرایط مختلفی کمک می نماید، مانند زمانی که کاربر قصد محاسبه سایز ستون ها و ردیف های وب سایت خود را دارد. مرورگر مایکروسافت یعنی Internet Explorer  در نسخه های ۵ تا ۷ خود، توضیحات مختصری را در این موارد گنجانده بود، اما در نسخه ۸ این مرورگر، توضیحات مذکور از آن حذف گردید و این شرکت علت حذف آن را، دلایل امنیتی بیان نموده است.

بروز مشکلاتی در ساخت ستون ها

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