CSS3
CSS یا شیوهنامه زبانی است که با استفاده از آن رنگ، شکل، اندازه و سایر عوامل ظاهری عناصر موجود در صفحات وب را تغییر میدهند.
بهترین مثالی که برای درک کاربرد CSS میتوان آورد، تشبیه کردن آن با ظاهر و رنگ پوست انسانها است. تمامی انسانها از نظر اسکلتبندی و اعضای داخلی( HTML ) با یکدیگر مشابه هستند ولی از نظر ظاهری( CSS ) با هم متفاوتند.
CSS یک سری از دستورالعملها است که در گذشت زمان تغییرات زیادی را به خود دیده است. در گذشتهای نه چندان دور، استاندارد فراگیری برای تعریف شیوهی عملکرد و کدنویسی آن وجود نداشته است. در چند سال اخیر با تلاشهایی که در جهت استانداردسازی این زبان به انجام رسید، دامنه و عملکرد آن بیش از پیش به سمت استانداردی فراگیر و یکسان در تمام مروگرها حرکت کرد.
در گذشته، برخی از ویژگیهای ظاهری پیادهسازی شده در برخی مرورگرها پشتیبانی میشد، برخی به درستی پشتیبانی نمیشد و برخی عملکردهای متفاوت میان این نرمافزارها وجود داشت. این تفاوتها مانع بزرگی در جهت ایجاد سایتی با ظاهر یکسان در محیطهای مختلف به شمار میرفت.
در حال حاضر زبان CSS نگارش ۳ به عنوان آخرین استاندارد موجود، در تمامی مرورگرهای متداول به صورت تقریبا یکسان عمل میکند و از این جهت حرکتی رو به جلو و ارزشمند در طراحی سایت با گرافیک و شکل ظاهری جذاب به شمار میرود.
زبان CSS همچنان در حال گسترش و بهبود است. این تغییرات بیش از گذشته به صورت سازمانیافته و با همکاری مرورگرهای مختلف از جمله فایرفاکس، گوگل کروم و سایر مرورگرهای متداول در حال طرحریزی و اجرا است.
کیفیت طراحی سایت با CSS
تعیین شکل ظاهری سایت با یک زبان برنامهنویسی با شیوههای مختلف و به عبارتی دیگر با الگوریتمهای مختلفی قابل انجام است. دانستن بهترین روش و انتخاب بهترین الگوریتم از چند جهت اهمیت زیادی دارد. نخست، حجم صفحات است که در طراحی سایت هوشمندانه توسط CSS میتواند تا حد زیادی کم یا زیاد شود. نکتهی دیگر سرعت بارگزاری صفحات است.
طراحی به روشی بهینه میتواند در سرعت نمایش صفحات به کاربر و سرعت پاسخگویی بخشهای مختلف صفحه به ویژه در سایتهایی با محتوای زیاد اثربخش باشد. نکتهی مهم دیگر که در عملکرد CSS موثر است، سازگاری با مرورگرهای مختلف و ویژگیهای خاص مثل طراحی سایت واکنشگرا یا طراحی سایت ریسپانسیو است که به طور ویژه با استفاده از امکانات CSS به انجام میرسد.
یک طراحی خوب در تمامی مروگرهای رومیزی و تمامی مرورگرهای موبایل به خوبی و به صورت یکسان نمایش داده میشود.
طراحی سایت ریسپانسیو با CSS
همان گونه که در بخش قبل گفته شد، طراحی سایت واکنشگرا( Responsive ) به طور عمده با استفاده از امکانات CSS به انجام میرسد. طراحی سایت ریسپانسیو، روشی از طراحی سایت است که وابسته به عرض مرورگر و نوع محیط اجرا از جمله مرورگرهای رومیزی، مرورگرهای موبایل و تبلت و چاپ روی کاغذ، وضعیت قرارگیری و عملکرد کلی ظاهر سایت تغییراتی را تجربه میکند.
این تغییرات میتواند شامل، تغییر مکان، تغییر ظاهر، مخفی و ظاهر شدن و سایر تغییرات باشد.
برای آشنایی بیشتر با «طراحی سایت واکنش گرا» اینجا کلیک کنید.
امکانات جدید CSS3
CSS زبانی پویا و در حال توسعه است. بسیاری از امکانات اضافه شده در آخرین نگارش این استاندارد در تمامی مروگرهای متداول به صورت کامل پیادهسازی نشدهاند. بنابراین استفاده از آنها سبب میشود کاربرانی که هنوز از نگارشهای قدیمیتر مرورگرها استفاده میکنند( به ویژه در محیطهای اداری و سازمانی ) نتوانند ظاهر سایت را همان گونه که طراحی شده است مشاهده کنند. تعیین مرزی برای استفاده از امکانات جدید به تسلط کافی بر درصد استفاده از مروگرهای مختلف در گروه مخاطبان سایت وابسته است. برای طراحی سایتی که بنا است توسط جامعهای خاص از کاربران مورد استفاده قرار گیرد، در مقابل سایتی که بنا است به عنوان یک پورتال سازمانی در داخل یک شرکت یا سازمان به کار گرفته شود، طراحیهای متفاوتی میبایست انجام شود.
CSS و تصاویر متحرک( Animation )
از ویژگیهای قابل توجه و مهم که در نگارش آخر CSS به آن اضافه شدهاند، امکانات متحرکسازی یا Animation از جایگاه خاصی برخوردار هستند. پیش از معرفی این ویژگیها، متحرکسازی صفحات تنها با استفاده از Flash یا به صورت محدود با استفاده از Javascript امکانپذیر بود. در استاندارد جدید، متحرکسازی عناصر به عنوان بخشی از امکانات موجود در مرورگر طراحی و پیادهسازی شدهاند.
با استفاده از امکان متحرکسازی میتوان صفحات Demo برای ابتدای سایت یا افکتهای تصویری زیبا برای بخشهای مختلف سایت طراحی و پیادهسازی کرد.
با توجه به منسوخ شدن استفاده از Flash در متحرکسازی، دانش متحرکسازی با استفاده از CSS مهارتی جدید است که روکاوب تجربیات و نمونه کارهای موفقی در این زمینه در اختیار دارد.
CSS و فضای سه بعدی
یکی دیگر از امکانات جدید و جذاب در CSS3 امکان ایجاد محیطی سه بعدی با استفاده از Perspective در صفحات وب است. با استفاده از این قابلیت میتوان برخی اشکال ساده را در فضایی سه بعدی ایجاد و به نمایش گذاشت. روکاوب آمادگی دارد با به کارگیری امکانات سه بعدی در CSS3 سایتهایی جذاب و منحصر به فرد طراحی و پیادهسازی کند.