گیفت کارت آیتونز
نمایش نتایج: از 1 به 3 از 3

موضوع: تگ های مخصوص مرورگر ها (برای کاربران مبتدی)

  1. Top | #1
    مدیر بازنشته

    تاریخ عضویت
    May 2012
    ورژن ویبولتین
    5.1.5
    سن
    23
    نوشته ها
    4,060
    مورد پسند
    2,645 بار
    نوشته های وبلاگ
    1
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 29.0.1547.66
    میزان امتیاز
    465

    پیش فرض تگ های مخصوص مرورگر ها (برای کاربران مبتدی)

    گاهی براتون پیش میاد که کدی رو تو additional.css وارد میکنید و فراخوانی میکنید اما در فایرفاکس نشان داده نمیشه و تو کروم نشان داده میشه و یا برعکس، ما در این آموزش قصد داریم تا شما را با تگ های هر مرورگر آشنا کنیم.

    پیشوندهاچیستند؟ :


    پیشوند های کدهایی هستند که به اول برخی صفات CSS اضافه میشوند،تا آن صفت در مرورگر های مختلف اجرا شود.هر مرورگری دارای یک پیشوند مخصوص به خود است؛پس برای اینکه یک صفت با تمامی مرورگر ها سازگار باشد باید آنرا به تعداد پیشوندهای موجود تکرار کرد و نوشت.معرفی پیشوندها :
    در دنیای وب چندین مرورگر از همه بیشتر کاربرد دارند و کاربران بیشتری دارند. آنها مرورگرهای IE یا اینترنت اکسپلورر،فایرفاکس،گوگل کروم،سافاری و اپرا هستند.هر یک از اینها دارای پیشوند مخصوص خود است و برخی نیز دارای پیشوند یکسان.این پیشوند ها اینها هستند:
    moz برای فایر فاکس
    webkit برای گوگل کروم و سافاری
    o برای اپرا
    ms برای IE
    khtml برا کانکرر (Konqueror)


    چگونگی به کار بردن پیشوندها:
    برای اینکار ابتدا پیوند را بین دو علامت – قرار میدهیم. به این صورت : -moz- سپس صفت مورد نظر را مینویسیم.برای مثال:


    کد:
    -moz-border-radius:20px;
    با این کار با صفت گرد کرد گوشه ها را برای مرورگر فایر فاکس سازگار کرده ایم.حال ما میخواهیم برای تمامی مرورگر های نام برده سازگار باشد.پس اینگونه عمل میکنیم:


    کد:
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -webkit-border-radius:20px;
    -o-border-radius:20px;
    با اینکار کد مورد نظر ما در مرورگر های معروف جهان کار میکند.


    چه صفاتی نیاز به پیشوند دارند؟
    صفات معروف مانند margin ، padding ، color ، background و …. که از همه پر کاربرد تراند معمولا نیاز به پیوند ندارند . (اما بازم بهتره که بذارید)
    در مقابل صفاتی مانند border-radius ، text-shadow و box-shadow ، و همینطور transform و transition نیاز به این پیشوندها دارند.

    موفق یاشید

    اختصاصی وی بی ایران
    ویرایش توسط Patch Master : 2013/09/14 در ساعت 03:00 PM
    .Everybody talks about the weather, we don't




  2. گیفت کارت آیتونز

  3. Top | #2
    کاربر سایت

    تاریخ عضویت
    Mar 2012
    ورژن ویبولتین
    vBulletin Forum v4.1.11 PHP NULL-DGT
    نوشته ها
    158
    مورد پسند
    30 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 29.0.1547.66
    میزان امتیاز
    23

    پیش فرض

    ممنون آموزش خوبی بود

    یه نکته رو هم من بگم:

    پیشوند ها بیشتر برای مرورگر های قدیمی استفاده میشه و بهتره اون کدی که نوشتید رو یک بار بدون پیشوند بنویسید و سپس با پیشوند های دیگه هم بنویسید تا مطمئن شوید در همه مرورگر ها اجرا میشه

  4. Top | #3
    کاربر سایت

    تاریخ عضویت
    Aug 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    591
    مورد پسند
    777 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 29.0.1547.66
    میزان امتیاز
    80

    پیش فرض

    درود.
    خیلی خوبه پارسا جان ! خسته نباشی فقط منم یه قسمت به صحبت های شیرین شما اضافه می کنم :
    بگراند مهم ترین قسمت هست که فوق العاده نیازمند پسوند هست !
    بگراند به تنهایی هیچ مشکلی نداره ! فرضا بنویسیم :
    کد:
    background: #000;
    هیچ مشکلی نیست ! چون فقط یه رنگ ساده هست ! اما اگر بخایم گراندیت بدیم یعنی بخوای از background-image استفاده بکنی که گراندیت بدی باید پسوند هم اضافه بکنی ! فرضا به این صورت :
    کد:
    background-image: -webkit-linear-gradient(bottom, #0CF, #00EAFF 32%, #0CF 65%, #00EAFF);
    background-image: -moz-linear-gradient(bottom, #0CF, #00EAFF 32%, #0CF 65%, #00EAFF);
    background-image: -o-linear-gradient(bottom, #0CF, #00EAFF 32%, #0CF 65%, #00EAFF);
    background-image: -ms-linear-gradient(bottom, #0CF, #00EAFF 32%, #0CF 65%, #00EAFF);
    background-image: linear-gradient(to top, #0CF, #00EAFF 32%, #0CF 65%, #00EAFF);
    خاصیت background-image یک تفاوت داره توی پسند هاش ! اینکه اگر بنویسیم -moz-background-image کاملا اشتباهه ! باید بعد از اضافه کرد !
    ساده تر می گم
    به طور عادی برای گراندیت دادن اینطوری باید نوشت :
    کد:
    linear-gradient(to top, #0CF, #00EAFF 32%, #0CF 65%, #00EAFF
    حالا اگر بخوایم برای مروگر های دیگه هم مشکلی نداشته باشه باید اینطوری اضاف کرد :
    کد:
    -webkit-linear-gradient(bottom, #0CF, #00EAFF 32%, #0CF 65%, #00EAFF)
    -moz-linear-gradient(bottom, #0CF, #00EAFF 32%, #0CF 65%, #00EAFF)
    -o-linear-gradient(bottom, #0CF, #00EAFF 32%, #0CF 65%, #00EAFF)
    -ms-linear-gradient(bottom, #0CF, #00EAFF 32%, #0CF 65%, #00EAFF)
    linear-gradient(to top, #0CF, #00EAFF 32%, #0CF 65%, #00EAFF)
    شاید به نظرتون زیاد مهم نیاد اما افرادی که بر سی اس اس تسلط کافی دارن برای فرضا یک گراندیت دیگه عکس نمی زارن ! با سی اس اس می نویسن ! و فرضا ممکنه کل بگراند هدر شما با سی اس اس باشه ! (فرض !) اگر تنها برای 1 مروگر سازگاری داشته باشه جزء مهمی از استایل خراب میشه در مرورگر های دیگه
    مرسی از پارسای عزیز بابت وقتی که در این مطلب گذاشتن

    6 تشکر توسط:

    ایران وب هاسـت . تجربه ی یک میزبان متـفاوت
    استفاده از سخت افزار و نرم افزار قدرتمند.سرور 12 هسته ای
    پشتیبانی فنی 24 ساعته
    مناسب برای میزبانی تمامی وبسایت ها
    آدرس صفحه ی اصلی : client.irwebhost.org


اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. پک درجه کاربری مخصوص انجمن های تفریحی
    توسط DaQooN در انجمن پک درجه های کاربری
    پاسخ: 1
    آخرين نوشته: 2013/06/20, 12:50 PM
  2. پک درجات کاربری مخصوص انجمن های گیم
    توسط DaQooN در انجمن پک درجه های کاربری
    پاسخ: 0
    آخرين نوشته: 2013/06/06, 11:59 PM
  3. درجه کاربری پلاک (مخصوص انجمن های دفاع مقدس)
    توسط Sattarforum در انجمن پک درجه های کاربری
    پاسخ: 1
    آخرين نوشته: 2011/10/03, 06:16 PM
  4. عکس گوشی های مخصوص فیلد های کاربری (679 عدد)
    توسط mohsen-unique در انجمن غیره
    پاسخ: 0
    آخرين نوشته: 2011/01/02, 12:31 PM

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •