CssFx.js : اضافه کردن پیشوند ویژگی ها در Css و Css3 به صورت خودکار

- visibility ۸ mode_comment

سلام . امیدوارم حالتون خوب باشه در اولین پستم در سایت سون لرن میخوام شما رو با کتابخانه ای جالب آشنا کنم .

حتما شده هر وقت میخواستید از قابلیت های جدید سی اس اس (Css) استفاده کنید پیشوندهای زیادی رو اضافه کنید .

مثل :

  • border-radius
  • transform
  • transition

یعنی به جای اینکه از یه کد 1 خطی مثل زیر استفاده کنیم :

چنین چیزی رو بنویسیم :

ما به خاطر اینکه سایتمون در مرورگر های مختلف درست نمایش داده بشه مجبوریم برای هر مرورگر پیشوند خاصی قرار بدیم . آیا واقعا نیازه ؟

معایب

  • بالا بردن حجم فایل استایل شما
  • ندانستن در سازگاری بعضی عناصر با مرورگر های مختلف
  • خستگی از این شیوه کد نویسی
  • پایین آمدن سرعت کدنویسی
  • و...

CssFx

آقای ایوان مالوپین اسکای (Ivan Malopinsky) یا به اختصار ایم اسکای (ImSky) یه کتابخانه به نام CssFx نوشته که به طور خودکار پیشوند های مختلف اعم از :

  • Moz
  • Webkit
  • MS
  • O

را به عناصری که به صورت کامل در همه مروگر ها در حالت حادی پشتیبانی نمیشوند رو اضافه میکنه .

preview

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

  • FireFox نسخه 3 به بالا
  • Google Chrome نسخه 1 به بالا
  • Internet Explorer نسخه 6 به بالا
  • Safari نسخه 3 به بالا
  • Opera نسخه 9 به بالا

نحوه استفاده

بسیار آسان است فقط  بعد از دانلود اسکریپت اون رو در head کد هاتون بعد از فایل استایلتون قرار بدید .

 

info نکته :

حتما اسکریپت رو بعد از فایل استایل هاتون قرار بدید به دلیل اینکه ممکنه فایل های استایل رو پیدا نکنه

info نکته :

برای دانلود روی یکی از دو آیکون "zip" و "tar.gz" کلیک کنید 

info نکته :

در فایل دانلودی یک فایل با نام (properties.html) وجود دارد که خواص پشتیبانی شده توسط این کتابخانه رو نشان میدهد . 

comment دیدگاه کاربران
مهدی اکرمی

خیلی جالب بود ولی یه سوال دارم . این اسکرپیت خودش border-radius رو به -moz-border-radius و … تبدیل میکنه؟

لقمان آوند

بله
ویژگی های css3 رو شما باید بنویسید . این کتابخونه ورژن های -moz- و -webkit- رو خودش درون یک تگ style در head صفحه اضافه میکنه .

ابوالفضل ویسی

پیشوند های دیگه هم از قبیل -o- و -ms- رو هم اضافه میکند

Paria RVN

ممنونم ، جالب و کاربردیه

یا سلام
من این کد را امتحان کردم ولی کار نمی کند .
در هر کجای header و حتی بعد و قبل از style.css هم گذاشتم باز هم کار نکرد .
آیا خود شما این کد را امتحان کرده اید ؟

لقمان آوند

من تست کردم و جواب داد . جالب بود . این دموی من .

سلام این پلاگین نیازمند کتاب خانه ی جیکوئری است یا نه اگر هست کدام نسخه

سجاد دریس

خیر نیازی نداره

نیاز به لاگین

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