در حال نمایش 1 نوشته (از کل 1)
  • نویسنده
    نوشته ها
  • #33162

    academyit
    مشارکت کننده

    من مطمئن هستم که کسی را با این که بخوام بگم که Css sprite ها از سال 2003 چندیست که دور وبر ما هستند و حضور بحث برانگیزی هم دارند ، متعجب نخواهم کرد.
    البته هنوز هم CSS sprite ها همینطور که باید راه خودشون رو بین ابزار های توسعه دهندگان وب باز نکرده اند.در حالیکه تئوری ای که در این ها می باشد قابل فهم و همینطور مفید هم هستند ، اجرا و پیاده سازی آن ها زمانی که شما ددلاین کمی داشته باشید یه کم آزار دهنده است. ما برای شما راه رو اسون می کنیم که این چیز ها سد ما نشن که شما بتونین از عالی بودن Css sprite ها به راحتی استفاده کنید.
    من خیلی نمی خوام تو حالتی بمونم که همش اعتبار CSS sprite ها رو بخوام بگم در حقیقت هدف این مقاله اینه که بفهمیم چرا هنوز مردم استفاده کردن از CSS sprite ها رو سخت می دونند همینطور هم یه سری قانون ها و راه های قابل توجهی رو برای بهتر کردن تکنیک های حال یاد می گیریم. ما تمام مهارت ها از جمله photo shop و Sass و LESS رو به دست میگیریم مخلوط می کنیم با هم تا یه چیز خوب ازشون در بیاریم.

    مشکل استفاده از CSS Sprites

    زمانیکه photoshop داره کارشو میکنه یه دیقه صب کنید و در نظر داشته باشید که چرا CSS sprites ها براشون مشکله که به صورت همگانی مورد پذیرش قرار بگیرن.من همیشه با این مسئله که نقطه آغاز کارم برای هر عکس در Sprite ها باشه کجاست مشکل داشتم. من همیشه با این که خب مختصات ها رو حفظ کنم تا بخوام در صفحه ی استایل ها بنویسم مشکل داشتم. به خصوص وقتی عدد ها در هم و بر همه.

    من همیشه هی میرم بین صفحه ها دوباره چک میکنم تا اینکه مطمئن بشم عددی که دارم می نویسم خب درسته! و در هر نقل مکانی که در بین صفحه ها دارم بیشتر اذیت می شم. در اصل می دونم نرم افزار هایی هست که خب باعث میشه به من تو این کار کمک کنه ولی خب من به نرم افزاری احتیاج دارم که بتونم همون طوری مختصات ها رو ازش کپی کنم ودر صفحه ی استایل خودم وارد کنم.

    یه مسئله ی مهم دیگه اینه که CSS sprites ها به عنوان یک قسمتی از بهینه سازی به شمار می آیند. بسیاری از مردمی که که وبلاگ هایی که در ارتباط با CSS sprite ها می نویسند به این مسئله اعتماد دارند که باعث بهینه سازی می شود. ولی تمرین هایی که می دهند بیشتر از این مسئله که چقدر باید تلاش بشه تا به اون چیزی که می خواهند برسند ، دور میشن.

    این مسئله اونقدرا اذیت کننده نیست اگر شما نیاز باشه که به مشکل خودتون به عنوان یک مسئله ی بهینه سازی نگاه کنید. ولی وقتی شما یک ددلاین مشحصی داشته باشید و باید سایت رو از ابتدا بسازید این یک مشکل طاقت فرسا میشه. اگر شما وقت کافی داشته باشین که بتونین روی یک CSS sprite ها کار کنید کار سختی نیستند. ولی وقتی نیاز باشه که در آن واحد به 50 تا اولویت دیگه هم برسین خیلی کاری سختی برای خیلی از توسعه دهندگان میشه. با در نظر داشتن این 2 مورد ما شروع می کنیم که هدف قرار دادن تصاویر رو راحت تر کنیم. بعضی وقتا هم باید کلن در کل بیخیال بهینه سازی بشیم که توسعه دادن ما راحت بشه.

    آماده سازی Sprite

    اگر شما به صورت آنلاین به دنبال این CSS Sprite ها بگیردین میبینین که بیشترشون برای استفاده در مشاور املاک استفاده شدن. فاصله ی بین تصاویر در کمترین میزان است که لود شدن کل این ها در آهسته ترین زمان ممکن باشه. این مسئله زمان لود شدن رو به کمترین زمان ممکن میرسونه ولی خب اون مختصات های وحشتناک رو هم نشون میده با اینکه از همون زمان اول شروع به دانلود شدن میکنن عکس ها. خب چرا ما مسیری که یه کم متفاوت تره رو انتخاب نکنیم؟ بیاین یه مسیر راحت تر انتخاب کنیم برای هدف قرار دادن تصاویر ، و اونم اینه که مطمئن باشیم که لود شدن Strike ها از لودشدن مجموع تصویر ما زمان بیشتری نگیرن.

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

    اندازه ی شبکه ی مربعی بستگی به میانگین ابعاد عکس ها که سعی در گذاشتن داریم دارد. برای وب سایت من مثلن من 32 در 32 پیکسل برای شبکم استفاده کردم ولی سایز شبکه ممکنه بر اساس موقعیت ای که دارید متنوع باشه. بعد چیز دیگه ای که باید در نظر داشته باشین اینه که یه کم padding بدین بهشون که وقتی دارین زوم می کنین مشکلی براتون ایجاد نکنه. برای بهینه سازی بیشتر میتونین از شبکه ی مستطیلی به جای مربعی استفاده کنید که خب مکان های بیهوده ی کمتری تولید می کنید. فعلن در این مقاله ما شبکه ی مربعی رو پیش میگیریم.

    آماده سازی Sprite : با بهره گیری از Photoshop

    من طراح نیستم برای همین نمیدونم این قسمت چقدر داره به درستی از Photoshop استفاده می کنه. ولی هنوز یه سری نکته های با ارزش هست که قبل به سمت کد رفتن بهشون باید توجه بشه.

    اول از همه به صورت بصری دیدن شبکه خیلی میتونه کمک کنه. Photoshop راهنمایی هایی در این زمینه داره.البته در اضافه به بهره های دیگه ای که میتونین از Photoshop ببرین.

    اینکه بخواین دستی اینارو اضافه کنین و درست کنین ممکنه براتون یه کم وقت ببره برای همینم دوست خوب من براتون یه سری اسکریپت هایPhoto shop آماده کرده که شما نیاز دارین اونارو دانلود کنید و با رفتن به این قسمت بهتون اجازه استفاده رو میده. البته ابتدا اسکریپت رادانلود کنید و در PresentsScripts اون رو ذخیره کنید.
    File → Scripts → Sprite Grid از قسمت منو Photoshop .

    در آخر برای اینکه تموم کنید میتونین x و y ای که میخواین رو بهش بدین و به راحتی میتونین به هر نقطه از شبکتون اشاره کنید.

    این عدد ها رو به Sprite های واقعی اضافه نکنین فقط Sprite رو در تصویر جداگونه کپی کنید و اونارو اضافه کنین. این نامه ها رد اصل فقط برای مرجع اند .:)

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

    ادامه مطلب

در حال نمایش 1 نوشته (از کل 1)

کاربر گرامی برای پاسخ به این موضوع اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.