پیشوند های css3 – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Sat, 26 Sep 2015 20:32:08 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 پلاگین درج خودکار Prefix انواع مرورگرها در css3 https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%af%d8%b1%d8%ac-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1-prefix-%d8%a7%d9%86%d9%88%d8%a7%d8%b9-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1-%d9%87%d8%a7-%d8%af%d8%b1-css3.html https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%af%d8%b1%d8%ac-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1-prefix-%d8%a7%d9%86%d9%88%d8%a7%d8%b9-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1-%d9%87%d8%a7-%d8%af%d8%b1-css3.html#comments Sat, 26 Sep 2015 20:29:21 +0000 http://www.xn--mgbguh09aqiwi.com/?p=12688 همان طور که می دانید اکثرت مرورگرهای بعضا قدیمی , css3 را با استفاده از پیشوند های مخصوص پشتیبانی میکنند .

در اصطلاح به این پیشوند های prefix نیز میگویند گه شامل :

-ms- = اینترنت اکسپلورر

-moz- = موزیلا فایر فاکس

-o- = اپرا

-webkit- = سافاری و کروم

طبیغتا طراحان وب سایت به ازای هر بار استفاده از هر پراپرتی در css3 میبایست 4 پراپرتی اضافه برای استاندارد سازی بنویسند .

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

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

پلاگین درج خودکار Prefix انواع مرورگر ها در css3

و اما آموزش :

فقط کافیست فایل js ای که لینک دانلود آن در پایین همین پست آمده را دانلود و در سایت خود آپلود نمایید .

سپس با استفاده از تگ <script> , آن را به وب سایت خود لینک نمایید . ( ترجیحا در داخل تگ head )

به عنوان مثال :

<script src="js/prefixfree.js"></script>

نکته : در مثال بالا فرض بر این است که شما فایل prefixfree.js را در پوشه js قرار داده اید .

دانلود فایل پلاگین به نام prefixfree

پخش اختصاصی

آموزش : وحید مجیدی

]]> https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%af%d8%b1%d8%ac-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1-prefix-%d8%a7%d9%86%d9%88%d8%a7%d8%b9-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1-%d9%87%d8%a7-%d8%af%d8%b1-css3.html/feed 4 آموزش بهینه سازی Css3 برای تمامی مرورگرها ( پیشوند های کمکی ) https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-css3-%d8%a8%d8%b1%d8%a7%db%8c-%d8%aa%d9%85%d8%a7%d9%85%db%8c-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1%d9%87%d8%a7.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-css3-%d8%a8%d8%b1%d8%a7%db%8c-%d8%aa%d9%85%d8%a7%d9%85%db%8c-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1%d9%87%d8%a7.html#comments Tue, 11 Mar 2014 17:15:57 +0000 http://xn--mgbguh09aqiwi.com/?p=1163 چند سالی میشه که Css3 جایگاه مهمی در بین دیزاین های حرفه ای قالب ها پیدا کرده است .

اما همانطور که میدانید بجز مرورگر های IE 1 تا IE8 که به هیچ عنوان از css3 پشتیبانی نمیکنند . بقیه مرورگر ها , در ورژنهای قدیمی خود به دلیل اینکه Css3 یک قانون استاندارد نبود , برای نمایش آن باید از پیشوند های اختصاصی همان مرورگر برای نمایش Css3 استفاده کرد .

به دلیل اینکه هنوز کاربرانی از این ورژنهای قدیمی استفاده میکنند باید از این پیشوند ها در طراحی استفاده شود تا تمامی مرورگر های قدیمی و جدید از این امکام برخوردار شوند .

توجه : در زیر با خاصیت ها و پیشوند های مورد نیاز آشنا خواهید شد . اما باید در نظر داشته باشید که ما علاوه بر پیشوند ها , یک بار هم خود خاصیت رو بدون پیشوند ( برای مرورگرهای جدید ) به کار می بریم .

Selector{
    -webkit-Property:Value; /*برای مرورگر های کروم و سافاری*/
    -moz-Property:Value; /*برای مرورگر های فایرفاکس*/
    -o-Property:Value; /*برای مرورگرهای اپرا*/
    -ms-Property:Value; /*برای مرورگرهای اینترنت اکسپلورر*/
    Property:Value; /*برای تمامی مرورگرهای جدید*/
}

خاصیت هایی ( Property ) که باید از پیشود های بالا در آن استفاده کرد , به شرح زیر می باشد .

  •  Border-Radius 
  • Border-image
  •  background-size 
  •  Gradient 
  • Transform
  • Transition
  • Animation
  • keyframes@ برای انیمیشن ها استفاده میشود
  • Column
  • box-sizing

پخش اختصاصی 

گردآوری : وحید مجیدی

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-css3-%d8%a8%d8%b1%d8%a7%db%8c-%d8%aa%d9%85%d8%a7%d9%85%db%8c-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1%d9%87%d8%a7.html/feed 5