|
CSS3 نسل جدیدی از CSS
CSS3 شامل حجم تازه و شگفت انگیزی از عملکردها و خصیصه هایی مانند متن های سایه دار text-shadow, BOX-sizing, شفافیت یا opacity، پس زمینه های چند تایی یا (multiple-background)، حاشیه های هلالی یا (border-radius) و عکس هایی که به حاشیه تبدیل می شوند (border-image) می باشد. عملکرد هایی که برای طراحان وب تقریبا یک رویا بود تا بتوانند بدون استفاده از JQuery و Photoshop آنها را خلق نمایند.
Wikipedia این طور CSS3 را تعریف می نماید:
"به جای تعریف خصیصه ها در یک مفهوم بزرگ و انفرادی (آنچه که در Css2 وجود داشت) ، Css3 به چندین ملاک مجزا که به آنها medules گفته می شود، تقسیم می گردد. هر medule خود همان خصیصه های موجود در CSS2 است که ظرفیت هایی به آنها اضافه گریده و کار طراحان وب را در طراحی ساده تر نموده است. اما در مجموع همچنان سازگار با Css2 است و طراحان مجبور به تغییر عمده طراحی خود در استفاده از Css3 نمی باشند."
اولین پیش نویس Css3 در ژوئن ۱۹۹۹، منتشر گردید که در مارچ ۲۰۱۱ تحت چند medule منتشر و به کار گرفته شد.
Medule های CSS3
Medule های CSS3 شامل:
Selectors - انتخاب کننده ها
Box model - مدل جعبه ای
Text effect - جلوه های متنی
۲D/3D transformation - تبدیلات دو بعدی و سه بعدی
Animation - انیمیشن
Multiple column lay out - قالب چند ستونی
User interface - پوسته کاربری
می باشد. CSS3 نیز مانند ویرایش قدیم آن تحت نظارت و گسترش W3C می باشد.
به نظر می آید که از CSS3 انتظار می رود یک بار دیگر به طور کامل توسط مرورگرهای مختلف بسط و توسعه و پشتیبانی گردد. در این صورت حجم عمده ای از ترکیبات و افکت های داینامیک بصری را به سادگی و با انعطاف پذیری بیشتری خلق خواهد نمود.
علارغم این حقیقت با این حال هنوز مرورگرهای پیشرو در میان مخاطبان وب، ویژگیهای جدید CSS را که همان Css3 می باشد به طور کامل پشتیبانی نمی کنند. اما برخی مرورگرها مانند Firefox, Safari, و Chrome در آخرین ویرایش خود با ویژگی های جدید CSS3 سازگار و منطبق شده اند و آنها را پشتیبانی می نمایند.
زمان، زمان آشنایی و تحقیق و پذیرفتن نسل جدید CSS یا CSS3 است و این در حالی است که باید بدانیم خصیصه های CSS3 به طور مستقیم و کامل در اختیار طراحان قرار ندارد و علت اصلی آن همان حمایت نشدن از جانب مرورگرهای مطرح و فراگیر در میان کاربران مانند (Internet Explorer Browser) می باشد. ما در این مقاله قصد نفی IE را نداریم ، چون معتقدیم هنوز مطرح ترین مرورگر در میان کاربران خصوصا کاربران ایرانی همان IE است. اما منکر این حقیقت که IE6,7,8 CSS3, را پشتیبانی نمی کنند نیز نخواهیم شد.
البته ویرایش جدیدتر IE که IE9 است در موارد بیشتری CSS3 را پشتیبانی می نماید و ماه گذشته شرکت مایکروسافت در کمال افتخار مخاطبان خود را شگفت زده کرده و اعلام نمود که ویرایش ۱۰ IE بیشتر خصوصیات CSS3 را پشتیبانی نموده و کاربران می توانند از این پس با خیال راحت از ویرایش های جدیدتر IE همگام با بروز شدن برنامه نویسی استفاده نمایند!!!
مرورگر Safari 4 تنها خصیصه Geolocation API را از میان ویژگی های جدید CSS پشتیبانی نمی کند که این نشان دهنده به روز بودن این مرور گر می باشد.
مرورگر Firefox 3.5، شش مورد از ۱۴ مورد و Chrome تنها ۲ مورد از موارد جدید CSS3 را پشتییبانی نمی کنند.
اما مرورگر های IE 6,7,8 تنها یک ویژگی و مرورگر Opera 10 ، پنج ویژگی از کل ویژگی های تازه و شگفت انگیز نسل CSS3 را پشتیبانی می کنند و این نشان از ضعف این مرورگرها در پشتیبانی از نسل جدید Css دارد.
بیشترین ویژگی های مورد حمایت از میان ویژگی های Css3 در مرورگرهای وب شامل ویژگی های زیر می باشد:
RGBA
Hsla
Opacity
Border-radius به جز Opera
Canvas
اشکال اساسی در استفاده از Css3 این است که در کد نویسی آن ، برای هر مرورگر باید کدهای اختصاصی مربوط به همان مرورگر را در Css آن بنویسید تا اگر کاربر شما از هر مرورگری استفاده نماید ، بتواند طراحی صفحات شما را به همان شکلی که شما انتظار دارید ،ببیند.
برای مثال اگر می خواهید از Transform Property استفاده نمایید ، باید پنج خط کدهای تقریبا مشابه بنویسید تا اگر مخاطب شما از هر یک از مرورگرهای موجود استفاده کرد، بتواند شکل صحیح طراحی شما را ببیند:
Div { transform: rotate(30deg);
-ms-transform:rotate(30deg) /*IE9*/
-moz- transform:rotate(30deg) /*firefox*/
-webkit- transform:rotate(30deg) /*safari & chrome*/
-o- transform:rotate(30deg) /*opera*/
}
با این حال به نظر می آید Css که برای راحتی کار طراحان در طراحی صفحات وب و به نوعی نیز برای خلاصه کردن کدهای HTML آمده بود، حالا کمی از هدفش دور شده است و آیا این مربوط به نقص ویرایش جدید Css است یا به عدم همکاری مرورگرها با تکنولوژی های جدید معرفی شده در بازار برنامه نویسی مرتبط می باشد؟
|
