illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!
4 5427 ۲۲ خرداد ۹۳ محمد اسفندیاری

به نام خداوند بخشنده مهربان

با سلام خدمت همه دوستان سون لرنی عزیز

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

در این نوشته قصد دارم شما رو با سایت و ابزاری آشنا کنم که به شما اطلاع میده مرورگرهای مختلف، از کدوم خاصیت های html5 و CSS3 پشتیبانی می کنند. همونطور که میدونیم خاصیتهای زیادی در CSS (بخصوص در CSS3) و ... وجود دارد که به تازگی اضافه شده اند و به همین دلیل همه مرورگرها بطور کامل از اونا پشتیبانی نمی کنند. دونستن اینکه آیا یک مرورگر خاص از خاصیت مورد نظرمون پشتیبانی میکنه یا نه برای طراحان وب خیلی مهمه. فرض کنید شما بخواید سایتی رو طراحی کنید ، قاعدتا این سایت باید در اکثر مرورگر ها ( به استثنای مرورگرهای خیلی قدیمی ) ظاهر یکسانی داشته باشه.

حالا فکر کنید من میخوام ببینم که آیا فلان مرورگر این خاصیت CSS را پشتیبانی می کنه یا نه؟!

بنظر شما چکار می تونم بکنم؟؟؟؟ خودم مستقیما برم سایتمو در اون مرورگر تست کنم؟؟؟!!! همونطور که میدونید مرورگرهای زیادی وجود دارند مثل opera و firefox و chrome و safari و internet explorer و.... هر کدوم از این مرورگرها بازم به نوبه خودش نسخه های فراوانی داره!!! این رو هم در نظر بگیرید که دستگاه های موبایل هم وجود دارن ، که بازم کار رو برای تست کردن سختتر می کنه. حالا من که نمیتونم سایتمو تک به تک روی همه این مرورگرها تست کنم (خیلی طول میکشه!!!).

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

این نوع سایتا در وب زیاده ، که من تعدادی از اونارو براتون معرفی می کنم :

  1.  Can I use
  2. quirksmode
  3. wikipedia
  4. و ......

نحوه کار کردن با همه این سایتا آسونه ولی من چون خودم بیشتر با سایت اولی کار می کنم و ازش راضی هستم ، در مورد اون کمی برای شما توضیح میدم.

خب اینجا رو کلیک کنید تا وارد سایت مورد نظر بشیم. ظاهر سایت بسیار سادس. وقتی وارد این سایت میشید چند بلاک از قبیل CSS و HTML5 و SVG و JS API و .... موجوده که هر کدوم از اونا زیر مجموعه های زیادی رو در خودشون جای دادن. در همینجا میتونید خاصیت مورد نظرتون رو پیدا کنید و روی اون کلیک کنید تا اطلاعاتش در اختیارتون قرار بگیره.

راهه ساده تر برای پیدا کردن موضوع مورد نظر ، اینه که از قسمت جستجو که در بالای سایت قرار داره استفاده کنید.

نکته : سعی کنید اون چیزی که در قسمت جستجو وارد می کنید از نظر املایی اشتباه نباشه!! چون این سایت مثل موتور جستجوگر گوگل نیست که اگه چیزی را اشتباه وارد کردیم خودش تا حدودی منظور ما رو بفهمه و نتیجه درستو به ما تحویل بده!!! 

فرض کنید من در بخش جستجو عبارت border-radius رو وارد کنم ، با این کار یه باکس که شامل اطلاعات موردنظرمون هست در زیر قسمت جستجو میاد ، مثل تصویر زیر :

border-radius

 

همونطور که در شکل بالا می بینید در ردیف اول مرورگرهای مختلف نظیر IE و Firefox و ... وجود داره و در زیر هر کدوم نسخه های پر کاربردتر اونا موجوده و اگه دقت کنید میبینید که رنگای اونا با هم فرق داره. در این صفحه ممکنه چهار رنگ به چشمتون بخوره. در اینجا میخوام معنی هر کدوم رو براتون توضیح بدم :

color-define

  1. سبز کم رنگ : این نسخه از مرورگر ، از این خاصیت پشتیبانی میکنه
  2. قرمز : این نسخه از مرورگر ، از این خاصیت پشتیبانی نمیکنه
  3. سبز پر رنگ : این نسخه از مرورگر ، از این خاصیت بصورت جزئی پشتیبانی میکنه
  4. طوسی : هنوز این خاصیت برای این مرورگر بررسی نشده

 

در قسمت پایین تصویری که براتون قرار دادم چهار تب وجود داره ، دوتاش که مهمترن رو براتون توضیح میدم :

  1. Known issues : اگه دقت کنید میبینید که در جلوی این گزینه نوشته (4) ، به معنی اینه که چهار تا از اشکالات  و به نوعی bug رو معرفی کرده و در بعضی موارد راه حلی برای اون داده میشه
  2. Resources : این گزینه همونطور که از اسمش معلومه معنیه منبع و مرجع رو میده. در این قسمت منبع هایی که از اونا استفاده شده و همچنین سایتایی واسه مطالعه بیشتر قرار گرفته

 

دوستان عزیز خیلی نکته و ویژگی های دیگه هم در این سایت وجود داره که نمیشه همه اونا رو در یک نوشته بیان کرد.......یه سایت هم که به همین سایت ربط داره را معرفی می کنم که در اونجا می تونید با انتخاب نسخه و نوع مرورگر مورد نظرتون ، تمامی اطلاعات مورد نیاز رو بدست بیارید : tests caniuse

خودتون چند بار که با این نوع سایت ها کار کنید ، با تمامی ویژگی های اونا آشنا می شید.

خسته نباشید دوستان خوبم. امیدوارم تونسته باشم با این نوشته کمکی به شما بکنم.

سوالی ، انتقادی ، پیشنهادی داشتید در بخش نظرات مطرح کنید.

ممنون از توجه شما.

اهداف و مزایای استفاده از این ابزار :

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

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    آقای اسفندیاری.مطلبتون عالی بود
    از آموزش خوب و کاملتون ممنونم
    منتظر آموزش های خوب بعدیتون هستم.موفق باشید

  • ‏‏
    محمد اسفندیاری(۲۲ خرداد ۱۳۹۳)

    خواهش میکنم دوست عزیزم……..موفق باشید

  • ‏‏
    علی علیزاده(۲۶ خرداد ۱۳۹۳)

    مطلب خیلی خوبی بود … امیدوارم باز هم ادامه دار باشه :smile:

  • ‏‏

    خیلی مقاله خوبی بود
    متشکرم

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram