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

می دانید که قالب پیش فرض از ابتدای انتشار نسخه 4.0 تغییرات قابل توجهی پیدا نکرده است.

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

پشتیبانی از IE11

تاکنون ، از IE11 به عنوان یک مرورگر  پشتیبانی شده است، در نسخه 4.5 ، دیگر به هیچ وجه از IE11 پشتیبانی نمی شود و انجمن Invision به خوبی در آن مرورگر کار نخواهد کرد. با پایان دادن پشتیبانی از IE11 ، قادر به استفاده از فناوری های جدیدتر CSS هستیم که توسعه را برای طراحان قالب به میزان قابل توجهی افزایش می دهد. در مورد برخی از این موارد در زیر بحث خواهیم کرد.

ترکیب تنظیمات قالب ips4.5

تعدادی تنظیمات قالب موجود با یک تنظیم جدید ترکیب شده است. از آنجا که تنظیماتی مانند poll_bar ، step_background ، rating_hover و غیره تقریباً همیشه به همان رنگ پیشفرض اولیه تنظیم و رها می شوند  بنابراین ، این تنظیمات با یک تنظیم جدید brand_color جایگزین شده است ،  این مراحل ابتدایی توسعه موضوع را ساده تر می کند و مطابقت با نام تجاری در انجمن Invision را آسان تر می کند.

از بین بردن رنگ های سخت در قالب ips

در حالی که تنظیمات قالب به صاحبان سایت اجازه داده است بیشتر رنگ ها را تغییر دهند ، اما هنوز هم در چارچوب CSS کد های سخت زیادی وجود دارد.

در نسخه 4.5 ، رنگ های سخت کد شده از چارچوب تنظیمات حذف شده و در عوض به رنگ هایی که قبلاً توسط تنظیمات قالب تعریف شده اند تکیه می کنیم. اکنون می توانید فقط با ویرایش تنظیمات داخلی ، یک قالب تیره ایجاد کنید.

مقیاس بندی و سایز فونت ها در قالب ips

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

برای حل این مشکل امکان مقیاس بندی به قالب اضافه شده همچنین انعطاف پذیری در بخش سایز نیز ایجاد شده:

x_small: 12; small: 13; medium: 14; base: 16; large: 18; x_large: 20; 2x_large: 24; 3x_large: 30; 4x_large: 36.

خانواده های کلاس جدید CSS در قالب ips4.5

طیف وسیعی از کلاس های جدید برای فاصله ها و حاشیه ها اضافه شده و امکان کنترل بیشتری در نحوه استفاده از این موارد به ویژه در اندازه های مختلف دستگاه ها را فراهم می کند. پیش از این کد ipsPad (15px) به سادگی بر روی صفحه نمایش های کوچک قابل استفاده بود.  احساس میشود که این مساله برای برخی از زمان نامشخص بوده است ، به ویژه که دستگاه های تلفن همراه به طور معمول در سال 2020 دارای صفحه نمایش های بزرگتری هستند و نیازی به فاصله زیاد ندارند.

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

ipsPad_all: دو برابر: ipsPad_all sm: ipsPad_all: half

در این مثال ، اندازه دسکتاپ (پیش فرض) از دو برابر شدن استفاده می کند، متوسط (تبلت ها) به طور مرتب فاصله ها کمتر می شوند و کوچک (تلفن ها) نصف فاصله اعمال می شود.

کلاسهای مشابه برای فاصله گذاری های بالا ، پایین ، چپ و راست و همچنین فاصله گذاری های افقی ، عمودی اضافه شده.

برای حاشیه ، کلاسهای قدیمی ipsSpacer_ * با خانواده جدید ipsMargin جایگزین شده اند که دقیقاً مشابه کلاسهای فاصله گذاری های فوق ، با همان محدوده انعطاف پذیری کار می کنند.

تغییرات آینده

کارهایی که تاکنون انجام شده فقط "گام اول" است. با نوسازی کد ها در سرتاسر نسخه های  4.5. * و بالاتر از آن کد های بکار رفته در  CSS را بهبود و کار برای کاربران آسانتر می شود.