عمومی

css چیست؟

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

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

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

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

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

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

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

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

browser-support-css

زبان CSS 1 چیست

اولین نسخه از 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  مورد تایید و توصیه می گردد.

زبان css 3 چیست

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

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

پیشنهاد می شود مقاله “طراحی وبسایت های تاثیر گذار با CSS3” را مطالعه بفرمایید.

زبان css 4 چیست

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

پشتیبانی مرورگرها

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

از آنجایی که اکثر مرورگرهای اولیه به کندی و با کیفیت خیلی پایینی کدهای CSS را نمایش (Render) می دادند، تقریبا تمام طراحان وب سایت از CSS Filter ها استفاده می کردند تا مرورگر مربوطه از کدهایی که از آن به درستی پشتیبانی نمی کند، چشم پوشی نماید. مرورگر معروف Internet Explorer پشتیبانی از 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

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

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

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

به این نوشته امتیاز دهید
[Total: 3 Average: 5]

با کارت بانکی باشگاه ایران هاست پولتان به حسابتان باز می گردد.

همین حالا رایگان عضو شوید

مدیر بلاگ

مشخصات مدیر

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید

بستن
دکمه بازگشت به بالا
بستن
بستن