احتمالا اکثر افرادی که در حال مطالعه این مقاله می باشند با فناوری جدید و بسیار کاربردی CSS3 آشنایی کم یا زیادی دارند و شاید استفاده از آن را در طراحی ها خود تجربه کرده اند . آیا شما هم از این فناوری استفاده کرده اید ؟ آیا از مشکلات آن با برخی از مرورگرها اطلاع دارید؟ احتمالا جواب شما بله است زیرا مقالات و آموزش های زیادی در این زمینه ها و رفع مشکلات منتشر شده و بسیاری از طراحان حرفه ای و مبتدی وب به صورت آزمایشی و یا اجرایی از این فناوری استفاده کرده اند و از مشکلات مربوط به پشتیبانی آن در برخی از مرورگرهای به اصطلاح “عقب مانده از فناوری های روز” باخبرند ! فناوری ای که انجام برخی از کارها را بسیار ساده و روان کرده و هر طراحی علاقمند به استفاده از آن بدون هیچ محدودیتی می باشد . در این مقاله سعی داریم تا در مورد استفاده از CSS3 و مشکلات آن در مروگرهای قدیمی صحبت کنیم . برای خواندن مقاله به ادامه مطلب مراجعه کنید . مرورگر اینترنت اکسپلورر (IE) یکی از مرورگرهای قدیمی و با سابقه ای بود که از این فناوری پشتیبانی نمیکرد و مشکلات بسیاری را برای افرادی که علاقمند به استفاده از کدهای CSS3 بودند به وجود می آورد . درصورتی که مرورگرهای دیگر مانند فایرفاکس (Mozilla FireFox) ، کروم (Google Chrome) و اپرا (Opera) به سرعت ، قدرت پشتیبانی خود را نه تنها در مورد CSS3 بلکه در زمینه های دیگر ، از جمله jQuery و… گسترش می دادند . این مرورگر آنقدر در این زمینه ها عقب مانده بود که یکی از بزرگترین مشکلات طراحان به حساب می آمد و تنفر از این مرورگر پیر روز به روز بیشتر میشد . البته قابل به ذکر است که همین مرورگر پیر ، پر استفاده ترین مرورگر در بین کاربران اینترنتی می باشد . افراد زیادی سعی بر رفع این مشکل داشتند و برخی از آنها با استفاده از جاوا اسکریپت قابلیت های CSS3 را شبیه سازی کردند که باز هم در نسخه های قدیمی IE قابل استفاده نبود و هر کسی توانایی استفاده از آن را نداشت . فردی هم که قصد استفاده از CSS3 را داشت قید Cross Browser بودن وب سایت را میزد و خیلی راحت و بدون استرس از آن استفاده می کرد . در این میان افراد بی فکری نیز بودند که بدون هیچ دانشی در زمینه های تخصصی طراحی وب ، استفاده از این کدها را به حد میرساندند و در هر جایی از وب سایت خود که می توانستند چند خطی از این کدها را اضافه می کردند که بگویند مثلا از فناوری های جدید استفاده می کنند و ظاهرا وب سایتشان را زیباتر جلوه میدهند ! در صورتی که اصول طراحی وب ۲ بر اصل ساده و کاربردی بودن استوار است و استفاده از کدهای بی مورد و بدون استفاده فقط در جهت زیبایی اصلا معنی ندارد ! در طراحی وب باید ابتدا به نیاز کاربران آن وب توجه داشت و در کنار آن به زیبایی ، در حد نیاز توجه کرد . مشکلات مربوط به مرورگر IE تا قبل از نسخه ۹ آن ادامه داشت . و در این نسخه از مرورگر IE (نسخه ۹) توانایی پشتیبانی از برخی از قابلیت های پرکاربرد CSS3 اضافه شد ! اما CSS3 روز به روز در حال گسترش می باشد . مورد دیگر این است که نسخه ۹ این مرورگر در ویندوز XP نصب نمیشود و می دانید که هنوز استفاده کنندگان این ویندوز کم نیستند ! پس نتیجه میگیریم که هنوز مشکلات حل نشده اند . همیشه به خاطر داشته باشید که استفاده از فناوری های جدید و جالب در حد نیاز مفید است و استفاده های بیش از حد و بی اندازه آن نه تنها مفید نیست بلکه باعث می شود تا طرح شما شلوغ و گیج کننده ، غیر استاندارد ، تنفر آمیز و… به نظر آید . پس استفاده با اندازه و هدفمند بسیار اهمیت دارد . برخی از قابلیت های جدیدی که به CSS3 اضافه شده اند را در زیر به طور مختصر شرح خواهم داد : 1- قابلیت Border Image قابل پشتیبانی در مرورگرهای زیر : Google Chrome 7.0+, Firefox 3.6+, Opera 11, Safari 3.0ویژگی ها :border-image, border-corner-imageپیشوندها :-webkit-border-image, -moz-border-imageمثال :.somediv { -webkit-border-image: url(images/border-image.png) 10 10 repeat; -moz-border-image: url(images/border-image.png) 10 10 repeat; border-image: url(images/border-image.png) 10 10 repeat; } توضیحات : این قابلیت به شما اجازه میدهد تا در حاشیه (Border) از عکس استفاده کنید و اندازه و تکرار آن را تنظیم کنید . استفاده از این قابلیت می تواند کاربردی و جالب باشد . از این قابلیت استفاده های بی مورد نکنید ! 2- قابلیت Transformقابل پشتیبانی در مرورگرهای زیر :Google Chrome 7.0+, Firefox 3.6+, Opera 10.5+, Safari 3.0+حالت سه بعدی :فقط در مرورگر Safariویژگی ها :transformپیشوندها :-o-transformبرای مثال :.somediv { -webkit-transform: scale(0.50) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg); -webkit-transform-origin: 50% 50%; -moz-transform: scale(0.50) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg); -moz-transform-origin: 50% 50%; -o-transform: scale(0.50) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg); -o-transform-origin: 50% 50%; transform: scale(0.50) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg); transform-origin: 50% 50%; } توضیحات : با استفاده از این قابلیت میتوانید برای شئ مورد نظر خود انواع تغییر حالت ها را مانند کوچک و بزرگ کردن ، تغییر سایز هر یک از گوشه ها ، سه بعدی کردن و … را انجام دهید . استفاده از این قابلیت نیز میتواند بسیار جالب و مورد توجه باشد . 3- قابلیت Animations و TransitionsTransitions قابل پشتیبانی در مرورگرهای زیر :Google Chrome 7.0+, Firefox 4.02, Opera 10.5+, Safari 3.0+Animations قابل پشتیبانی در مرورگرهای زیر :Google Chrome 7.0+, Safari 3.0+ویژگی ها :transitionپیشوندها :-webkit-transition, -moz-transition, -o-transitionمثال برای Transitions :.somediv:hover { color: #000; -webkit-transition: color 1s linear; -moz-transition: color 1s linear; -o-transition: color 1s linear; transition: color 1s linear; }مثال برای Animations :@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .somediv:hover { -webkit-animation-name: spin; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 10s; } توضیحات : این دو قابلیت مخصوصا Animations به راحتی توسط مرورگرها پشتیبانی و اجرا نمیشوند . شاید در آینده ای نزدیک ، استفاده از این امکانات نیز کاملا رایج و عمومی شود . اگر از آنها در مرورگرهایی که از این قابلیت ها پشتیبانی نمی کنند استفاده کنید ، چیز قابل توجه ای اتفاق نخواهد افتاد و همه چیز عادی به نظر می رسد . می توانید از نمونه بسیار جذابی که با استفاده از انیمیشن طراحی شده دیدن کنید . توجه کنید که با مرورگر کروم آن را مشاهده کنید . 4- قابلیت Columnsقابل پشتیبانی در مرورگرهای زیر :Google Chrome 7.0+, Firefox 2.0+, Safari 3.0+, Opera 11.10+ویژگی ها :column-countپیشوندها :-webkit-column-count, -moz-column-countبه عنوان مثال : (مثال زیر ، متن مرتبط شده به این استایل را در ۳ ستون نمایش میدهد).somediv { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } توضیحات :این قابلیت بسیار کاربردی می باشد و با استفاده از آن میتوانید محتویات بخش مربوط شده به استایل را در ستون ها مختلف نشان دهید و مطالب را به صورت روزنامه ای در بیاورید ! 5- استفاده از چند پس زمینه !قابل پشتیبانی در مرورگرهای زیر :Google Chrome 7.0+, Firefox 3.6+, Safari 2.0+, IE 9ویژگی ها :backgroundبه عنوان مثال :.somediv { background: url('background1.jpg') top left no-repeat, url('background2.jpg') bottom left repeat-y, url('background3.jpg') top right no-repeat; }توضیحات : این قابلیت می تواند یکی از جالب ترین و حتی پرکاربردترین ویژگی ها CSS3 به شمار بیاید ! شما با استفاده از این قابلیت میتوانید برای وب سایت خود چند پس زمینه در مکان ها مختلف صفحه در نظر بگیرید که میتواند بسیار جذاب باشد ! به این صورت که هر کد پس زمینه را با کاراکتر کاما (,) از هم جدا می کنید . ———————————————————————–در بالا به چند مورد از امکانات CSS3 اشاره کردم و توضیحات مختصری هم در مورد آنها ارئه دادم که امیدوارم مفید واقع شود .این مقاله از سایت smashingmagazine و اضافه گفته های بنده تهیه شده است که امیدوارم مورد استفاده و رضایت شما عزیزان واقع شود
