تکنیک هایی برای تخریب تدریجی css. روش بهبود افزایشی با CSS3: پشتیبانی از مرورگرهای مدرن. تخریب برازنده با پیشوندها دیگر کار نمی کند

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

افت شدید

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

تنزل دلپذیر را می توان در توانایی کار با جاوا اسکریپت غیرفعال، در نمایش دقیق سایت در مرورگر بدون پشتیبانی از مشخصات CSS3، در نمایش مناسب سایت با تصاویر غیرفعال بیان کرد. همه این خرابی ها نباید بر عملکرد برنامه وب تأثیر بگذارد. با این حال، اگر همه چیز کار کند، کاربر راحت تر از سایت استفاده می کند.

اگر مثال خاصی را مثلاً در زمینه طراحی رابط وب در نظر بگیریم، این اصل را می توان به صورت فرموله کرد: «سیستم می تواند با جاوا اسکریپت کاملاً غیرفعال کار کند، اما کار با آن بسیار راحت تر خواهد بود». سوال این نیست که آیا ممکن است JS غیرفعال باشد یا به طور کامل کار نکند یا چرا. این وضعیت بدیهی تلقی می شود. طراح باید چنین رابطی را توسعه دهد که به همان روش، البته با JS غیرفعال، به کار خود ادامه دهد.

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

رعایت اصل تخریب برازنده به کاربران این امکان را می دهد (و هر کاربر یک مشتری بالقوه است) بتواند در هر شرایطی با سایت کار کند.

تقویت پیشرونده

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

یک مورد خاص تر از تنزل برازنده است , از آنجایی که تمام صفحات وب ساخته شده بر روی آن به طور کامل با اصل تخریب برازنده مطابقت دارند.

به طور معمول، ایجاد یک صفحه بهبود پیشرونده شامل مراحل زیر است:

• ایجاد یک صفحه در "تمیز"HTML
  در این مرحله یک صفحه کاملاً کاربردی ایجاد می شود که فقط از کدهای HTML تشکیل شده است که از نظر معنایی و منطقی صحیح است و بنابراین توسط هر مرورگری حتی ساده ترین آن قابل تفسیر است. در این مرحله هیچ قالب بندی انجام نمی شود و خود مرورگر صفحه را طبق استانداردهایی که در آن تعبیه شده فرمت می کند. بهبود پیشرو اصرار دارد که اولین قدم مهم ترین است، زیرا هیچ چیز در وب ارزشمندتر از محتوا نیست.
  کوتاه: ایجاد ساختار معنایی و منطقی سند
• افزودن قوانینcss
  در این مرحله، جدول CSS با فرمت قدیمی اعمال می شود: شبکه نشانه گذاری اضافه می شود، موقعیت عناصر اعمال می شود، تصاویر پس زمینه برای بلوک ها اعمال می شود، سبک ها، رنگ ها و سبک های متون تغییر می کنند. به طور کلی، صفحه ظاهری جدید پیدا می کند، زیباتر و دلپذیرتر می شود.
  کوتاه: دادن ظاهر یک سند
• استفاده از CSS3
  اکنون می توانید تمام افکت ها و پیشرفت های ارائه شده توسط مشخصات CSS3 را روی سند اعمال کنید. یعنی شفافیت، سایه‌ها، گوشه‌های گرد برای بلوک‌ها، انتقال صاف انیمیشن برای کلاس‌های شبه یا عناصر فرم اضافه کنید.
  کوتاه: معصوم ظاهرسند
• ایجاد اسکریپت برایجاوا اسکریپت
  در این مرحله تمامی افکت ها و اصول تعامل صفحه وب با کاربر با استفاده از جاوا اسکریپت ایجاد می شود. اینها درخواست‌های AJAX، بارگذاری پویا یا اعتبارسنجی داده‌ها، جلوه‌های انیمیشن و ویجت‌ها (به عنوان مثال، نمونه اولیه یا jQuery) هستند. به طور کلی، ما صفحه را کاربر پسندتر می کنیم.
  کوتاه: تعامل، تعامل، راحتی

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

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

حالا بیایید قوانین مربوط به مشخصات CSS3 را اضافه کنیم. بیایید دورهایی را به بلوک‌ها اضافه کنیم، سایه‌هایی را برای فیلدهای ورودی متن اضافه کنیم، دکمه را استایل دهیم، از انتخابگرهای جدید برای حذف لایه‌های غیرضروری از بالا استفاده کنیم. ما یک فرم بهبود یافته دریافت می کنیم:

در مرحله آخر می توانیم یک درخواست AJAX ایجاد کنیم تا کاربر بدون نیاز به بارگذاری مجدد صفحه وارد سایت شود.

در عین حال در هر مرحله خاص (با پشتیبانی مرورگر آن) یک صفحه کاملاً کاربردی نمایش داده می شود. اما اگر مرورگر از فناوری های پیشرفته تری پشتیبانی کند، صفحه فقط بهتر می شود.

چه اصلي را رعايت كنيم؟

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

واقعیت این است که ساختن یک سایت مطابق با اصل تخریب برازنده بسیار دشوار است، زیرا تعداد کمی از توسعه دهندگان می توانند آن را به طور موثر انجام دهند. در ساده‌ترین حالت تخریب برازنده، می‌توانید کارهای زیر را انجام دهید: ایجاد یک سایت برای آخرین نسخهمرورگر و سپس به کاربران پیامی نشان می دهد که به آنها می گوید باید دانلود کنند نسخه جدیدمرورگر. در عین حال، توسعه دهندگان ممکن است اهمیتی ندهند که سایت در مرورگرهای قدیمی چگونه به نظر می رسد. یکی دیگر از نمونه‌های بد تخریب، غیرفعال کردن کامل عملکرد سایت در صورت غیرفعال شدن جاوا اسکریپت است. نمونه بارز آن ارسال پیام در Facebook.com است.

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

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

من در مورد تفاوت بین آنها گیج شده ام تقویت تدریجیو انحطاط های برازنده. فکر کنم یکی باشه

می توانید تفاوت بین این دو را برای من توضیح دهید و در چه شرایطی از یکی بر دیگری استفاده می کنم؟

8 پاسخ

آنها تقریباً یکسان هستند، اما در زمینه متفاوت هستند.

یک کلاس از مرورگرها به نام "مرورگرهای کلاس A" وجود دارد. اینها مخاطبان معمولی شما هستند که (احتمالا) اکثر بازدیدکنندگان شما را تشکیل می دهند. شما با یک سطح پایه از این کاربران شروع خواهید کرد. بیایید آن را صدا کنیم بهترین شیوه های مدرن.

اگر شما می خواهید افزایش دادنتجربه ای برای کسانی که به طور تصادفی از FF3.6 یا Safari 4 یا سایر برنامه نویسان وب کیت شبانه whizbang استفاده می کنند که می خواهید کارهای شگفت انگیزی انجام دهید.

• گوشه های گرد از طریق css
• متن سایه دار (اما خدا را راضی، نه زیاد)
• سایه ها (به بالا در پرانتز مراجعه کنید)

این باعث می‌شود سایت شما جذاب به نظر برسد، اما آن را خراب نمی‌کند. آی تی رشد تدریجی. در آغوش گرفتن آینده از نظر بهترین شیوه ها.

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

آنها اساساً یکسان هستند، اما از نظر اولویت برای بسیاری از تیم های توسعه متفاوت هستند: PE اگر وقت داشته باشید بسیار خوب است، اما GD اغلب لازم است

اگر سایت شما در همه مرورگرها به یک اندازه خوب به نظر می رسد، اما برخی از مرورگرها، مثلاً، پونی های رقصنده دریافت می کنند زیرا از پونی های رقصنده پشتیبانی می کنند، پس این یک پیشرفت تدریجی است. در همه مرورگرها کار می کند، اما برخی از مرورگرها چیز اضافی دریافت می کنند. معمولاً این اصطلاح برای برخی ویژگی‌های جاوا اسکریپت به کار می‌رود که می‌توانند قابلیت استفاده خارج از «HTML خام» را بهبود بخشند.

اگر سایت شما فقط در مرورگرهایی که به طور کامل از CSS3 و IE8 پشتیبانی می‌کنند، همان صفحه را بدون، مثلاً، گوشه‌های گرد ارائه می‌کنند، به نظر می‌رسد، پس این یک تنزل دلپذیر است. سایت واقعا برای مرورگرهای مدرن، اما هنوز هم در مرورگرهای قدیمی استفاده می شود، نه آنقدرها که فانتزی است.

به هر حال، آنها واقعاً یک چیز هستند، از دو دیدگاه متفاوت.

جهت از انتخاب شده پایههر مفهومی متفاوت است

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

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

من فکر می‌کنم اگر زمان/بودجه اجازه دهد می‌توان از هر دو مفهوم استفاده کرد. اگر نه، پس تنزل برازنده ارجح است.

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

در حالی که من با الکس مک‌پی موافقم و به نوعی می‌گویم، اما اصطلاحات «تحقیر برازنده» و «افزایش پیشرونده» معنای کمی متفاوت از ارزش من دارند.

افت شدیدبسیاری از زمان‌ها (به نظر من) به نظر می‌رسد که پس از اینکه در وهله اول در تجربه من بد ساخته شده بود، بیشتر به عنوان یک چوب برای شکست دادن یک برنامه در نظر است. چگونه شخصی یک شی جاوا اسکریپت عظیم می سازد که به کاربر چیز بسیار جالبی برای بازی ارائه می دهد تا زمانی که مدیر وارد می شود، آن چیز را بررسی می کند و همه وقتی متوجه می شوند که برنامه آنها کار نمی کند جیغ می زنند و دست های خود را بالا می آورند. در 35 درصد مرورگرها "کسی بهتر است برای این مورد بازگشتی ارائه کند."

تقویت تدریجیهر چند (و این هم اصطلاح خوبی برای گفتن است) به نظر می رسد بیشتر در مورد ساخت چیزی است که فقط روی آن کار می کند سطح ورودی، در همه جا، با استفاده از ابتدایی ترین روش های موجودبرای ارائه تمام قابلیت های مورد نیاز کاربر. سپس می‌توان آن را با کمک‌کننده‌های کوچک و بدون مزاحم اضافه کرد، یک ظاهر طراحی، و غیره. این در واقع تجربه کاربری برنامه مورد نظر را بهبود می‌بخشد، نه اینکه آن را به سختی قابل استفاده می‌کند. "که جالب به نظر می رسد. آیا در IE6 کار می کند. اوه بله. این کار را می کند"

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

طنز تموم شد...

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

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

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

انحطاط های برازنده

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

تنزل برازنده یک راه حل است. این تمرین ایجاد یک وب سایت یا برنامه است، بنابراین سطح خوبی از تجربه کاربری را در مرورگرهای مدرن ارائه می دهد. با این حال، این در مرورگرهای قدیمی‌تر به‌خوبی کاهش می‌یابد. این سیستم ممکن است به خوبی یا زیبا نباشد، اما عملکرد اصلی روی سیستم‌های قدیمی‌تر کار می‌کند.

یک مثال ساده استفاده از PNG های آلفا شفاف 24 بیتی است. این تصاویر را می توان در مرورگرهای مدرن بدون مشکل نمایش داد. IE5.5 و IE6 تصویر را نشان می‌دهند، اما جلوه‌های شفافیت کار نمی‌کنند (در صورت نیاز می‌توانید آن را عملی کنید). مرورگرهای قدیمی که از PNG پشتیبانی نمی کنند متن جایگزین یا فضای سفید را نشان می دهند.

توسعه دهندگانی که تنزل دلپذیر را می پذیرند، اغلب سطح پشتیبانی مرورگر خود را مشخص می کنند، مانند مرورگرهای سطح 1 (تجربه بهتر) و مرورگرهای سطح 2 (تجربه تخریب شده).

تقویت تدریجی

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

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

بهبود تدریجی نیازی به انتخاب مرورگرهای پشتیبانی شده یا بازگشت به طرح‌بندی‌های مبتنی بر جدول ندارد. ما سطح فناوری را انتخاب می‌کنیم، یعنی مرورگر باید از HTML 4.01 و درخواست‌ها/پاسخ‌های صفحه استاندارد پشتیبانی کند.

به مثال تصویر خود بازگردیم، می‌توانیم تصمیم بگیریم که برنامه ما باید در تمام مرورگرهای گرافیکی کار کند. می توانستیم از کیفیت پایین تری استفاده کنیم تصاویر گیفبه طور پیش فرض، اما زمانی که مرورگر از آنها پشتیبانی می کند، آنها را با png های 24 بیتی جایگزین کنید.

پیوندها

ویکیپدیا: تقویت تدریجیو

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

آیا می توانید تفاوت های بین آنها را برای من توضیح دهید و در چه شرایطی می توانم از یکی بر دیگری استفاده کنم؟

8 پاسخ:

آنها تقریباً دقیقاً یکسان هستند، اما در زمینه متفاوت هستند.

یک کلاس از مرورگرها به نام "مرورگرهای درجه یک" وجود دارد. اینها مخاطبان معمولی شما هستند که (احتمالا) اکثر بازدیدکنندگان شما را تشکیل می دهند. شما با یک سطح پایه از این کاربران شروع خواهید کرد. بیایید آن را صدا کنیم بهترین شیوه های مدرن.

اگر شما می خواهید افزایش دادنتجربه برای کسانی که به طور تصادفی از FF3 استفاده می کنند. 6 یا سافاری 4 یا برخی دیگر از برنامه‌نویسان که می‌خواهند کارهای شگفت‌انگیز انجام دهید

• گوشه های گرد از طریق css
• متن سایه دار (اما خدا را راضی، نه زیاد)
• سایه انداخته (به بالا در پرانتز مراجعه کنید)

آنها سایت شما را عالی می کنند، اما آن را خراب نمی کنند. آی تی رشد تدریجی. در آغوش گرفتن آینده از نظر بهترین شیوه ها.

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

آنها اساساً یکسان هستند، اما از نظر اولویت برای بسیاری از تیم های توسعه متفاوت هستند: PE اگر وقت داشته باشید بسیار خوب است، اما GD اغلب لازم است

اگر سایت شما در همه مرورگرها به یک اندازه خوب به نظر می رسد، اما برخی از مرورگرها، مثلاً، پونی های رقصنده دریافت می کنند زیرا از پونی های رقصنده پشتیبانی می کنند، پس این یک پیشرفت تدریجی است. در همه مرورگرها کار می کند، اما برخی از مرورگرها چیز اضافی دریافت می کنند. معمولاً این اصطلاح برای برخی ویژگی‌های جاوا اسکریپت به کار می‌رود که می‌توانند قابلیت استفاده خارج از «HTML خام» را بهبود بخشند.

اگر سایت شما فقط در مرورگرهایی که به طور کامل از CSS3 و IE8 پشتیبانی می‌کنند به همان شکلی باشد که می‌خواهید داشته باشید - همان صفحه را بدون، مثلاً، گوشه‌های گرد ارائه می‌کند، پس این یک تنزل دلپذیر است. این سایت در واقع برای مرورگرهای مدرن طراحی شده است، اما هنوز هم در مرورگرهای قدیمی استفاده می شود، نه به همان اندازه فانتزی.

به هر حال، این واقعاً یک چیز است، از دو دیدگاه متفاوت.

جهت از انتخاب شده پایههر مفهومی متفاوت است

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

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

من فکر می‌کنم اگر زمان/بودجه اجازه دهد می‌توان از هر دو مفهوم استفاده کرد. اگر نه، پس تنزل برازنده ارجح است.

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

اگرچه من با Alex Mcp و deceze تا حدودی موافقم، اما اصطلاحات "تحقیر برازنده" و "افزایش پیشرونده" معانی کمی متفاوت از ارزش من دارند.

افت شدیدبسیاری از اوقات (به نظر من) به نظر می رسد که بیشتر اوقات یک چوب برای شکست دادن یک برنامه در ارسال پس از اینکه در وهله اول در تجربه من ضعیف ساخته شده بود. چگونه کسی یک شی جاوا اسکریپت عظیم می سازد که به کاربر چیز بسیار جالبی برای بازی ارائه می دهد تا زمانی که مدیر آن چیز را بررسی کند و همه جیغ می زنند و وقتی نوبت به آنها می رسد دستان خود را پرتاب می کنند که برنامه آنها در 35٪ کار نمی کند. از مرورگرها بهتر است کسی برای آن یک بازگشت ارائه کند."

تقویت تدریجیاگرچه (و این هم اصطلاح خوبی است) به نظر می رسد بیشتر در مورد ساخت چیزی است که در سطح ابتدایی، در همه جا، با ابتدایی ترین روش های موجود، کار می کند تا تمام عملکردهای مورد نیاز کاربر را ارائه دهد. سپس می‌توان آن را با کمک‌کننده‌های کوچک و بدون مزاحم اضافه کرد، یک ظاهر طراحی، و غیره. این در واقع تجربه کاربری برنامه مورد نظر را بهبود می‌بخشد، نه اینکه آن را به سختی قابل استفاده می‌کند. "که جالب به نظر می رسد. آیا در IE6 کار می کند. اوه بله. این کار را می کند."

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

فرار کردن...

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

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

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

انحطاط های برازنده

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

تنزل برازنده یک راه حل است. این تمرین ایجاد یک وب سایت یا برنامه است، بنابراین سطح خوبی از تجربه کاربری را در مرورگرهای مدرن ارائه می دهد. با این حال، این در مرورگرهای قدیمی‌تر به‌خوبی کاهش می‌یابد. این سیستم ممکن است به خوبی یا زیبا نباشد، اما عملکرد اصلی روی سیستم‌های قدیمی‌تر کار می‌کند.

یک مثال ساده استفاده از PNG های آلفا شفاف 24 بیتی است. این تصاویر را می توان بدون مشکل در مرورگرهای مدرن نمایش داد. IE5. 5 و IE6 تصویر را نشان می‌دهند، اما جلوه‌های شفافیت با شکست مواجه می‌شوند (در صورت نیاز می‌توان این کار را انجام داد). مرورگرهای قدیمی که از PNG پشتیبانی نمی کنند متن جایگزین یا فضای سفید را نشان می دهند.

توسعه دهندگانی که تنزل دلپذیر را می پذیرند، اغلب سطح پشتیبانی مرورگر خود را مشخص می کنند، مانند مرورگرهای سطح 1 (تجربه بهتر) و مرورگرهای سطح 2 (تجربه تخریب شده).

تقویت تدریجی

رشد تدریجییک استراتژی طراحی وب است که بر دسترسی، نشانه گذاری معنایی HTML و شیوه نامه خارجی و فن آوری های اسکریپت تأکید دارد. ارتقای پیشرونده از فناوری‌های وب به شکل لایه‌ای استفاده می‌کند که به هر کسی اجازه می‌دهد با استفاده از هر مرورگر یا اتصال اینترنتی به محتوای اصلی و عملکرد یک صفحه وب دسترسی داشته باشد، همچنین نسخه‌های پیشرفته صفحه را برای کسانی که نرم‌افزار مرورگر پیشرفته‌تر یا پهنای باند بیشتری دارند، ارائه می‌دهد.

افزایش تدریجی مانند مداربه زوال برازنده اما برعکس. وب سایت یا برنامه یک تجربه کاربری پایه را برای اکثر مرورگرها تنظیم می کند. هنگامی که مرورگر از آن پشتیبانی کند، ویژگی های پیشرفته تری اضافه می شود.

بهبود تدریجی نیازی به انتخاب مرورگرهای پشتیبانی شده یا بازگشت به طرح بندی جدول ندارد. ما سطح فناوری را انتخاب می‌کنیم، یعنی مرورگر باید از HTML 4.01 و درخواست‌ها/پاسخ‌های صفحه استاندارد پشتیبانی کند.

برای آسان‌تر کردن آن، فقط نوار را درست در بالا تنظیم کنید، سپس می‌توانید پیشرفت پیشرونده را نادیده بگیرید. چه زمانی ویژگی جدیدبرای بالا بردن سطح ;)

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

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

بیایید با یک مثال کوچک به این تکنیک نگاهی بیندازیم که متن را در یک بلوک و یک دکمه نمایش می دهد. بلوک و دکمه دارای گوشه های گرد هستند و یک سایه کوچک نیز به بلوک اضافه شده است. تا کنون، مرورگرهای CSS3 عمدتاً از ویژگی های خاص با پیشوندهای خود استفاده می کنند:

• فایرفاکس - ویژگی هایی که با -moz- شروع می شوند.
• سافاری و کروم - ویژگی هایی که با -webkit- شروع می شوند.
• Opera - ویژگی هایی که با -o- شروع می شوند.

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

moz-border-radius: 10px; /* برای فایرفاکس */ -webkit-border-radius: 10px; /* برای سافاری و کروم */ border-radius: 10px; /* برای Opera و IE9 */

در حالی که اعمال این ویژگی ها منجر به ایجاد کد CSS نامعتبر در این مورد می شود کار مهمتر استکه در مرورگرهای فایرفاکس 1.0، Safari 3.1، Chrome 2.0، Opera 10.50، IE9 و نسخه های قدیمی تر آنها. مثال 1 استفاده از ویژگی های CSS3 را برای ایجاد سایه ها و گوشه های گرد نشان می دهد.

مثال 1. جعبه با سایه

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx

نتیجه مثال در شکل نشان داده شده است. یکی

برنج. 1. نمایش را در سافاری مسدود کنید

همین مثال در IE8 و زیر در شکل نشان داده شده است. 2.

برنج. 2. نمایش را در IE8 مسدود کنید

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

چه چیزی در عمل به این رویکرد می دهد؟

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

البته، تنزل برازنده همیشه قابل اجرا نیست. اگر الزامات طرح‌بندی نشان‌دهنده پشتیبانی از نسخه‌های قدیمی‌تر است، باید به دنبال آن باشید راه حل های جایگزینبه عنوان مثال، از تصاویر برای گوشه های گرد استفاده کنید. اما در بیشتر موارد، الزامات چیدمان بدون در نظر گرفتن وضعیت کلی تنظیم می شود. و اگر تمام مزایای تخریب برازنده را با مضرات آن مقایسه کنیم، که خود را فقط در این واقعیت نشان می دهد که مرورگرهای قدیمی، به ویژه IE8، صفحه را به اندازه کافی "زیبا" نمایش نمی دهند، آنگاه همدردی در سمت پیشرفت خواهد بود.

پیشوند -webkit- چنان بر CSS تسلط دارد که برخی از سایت ها بدون آن به درستی کار نمی کنند. این نشان می‌دهد که توسعه‌دهندگان بهترین شیوه‌ها را در سال‌های اخیر دنبال نکرده‌اند و این منجر به تصمیم‌گیری ناموفق، اما تقریباً اجباری از سوی موزیلا شده است. در نسخه 46 یا 47 فایرفاکس (این ماه آوریل یا می 2016 است)، موزیلا قصد دارد از پیشوندهای غیر استاندارد -webkit- پشتیبانی کند تا سازگاری فایرفاکس با سایت هایی که به شدت از -webkit استفاده می کنند (معمولاً سایت های سازگار با موبایل) بهبود بخشد.

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

رویکرد موزیلا و مایکروسافت برای اکثر سایت ها ایمن است. بسیاری از سایت ها از پیشوند -moz- استفاده می کنند یا نیازی به انجام کاری برای سازگاری با به روز رسانی آینده فایرفاکس ندارند. اما به عنوان توسعه دهندگان وب حرفه ای، باید مفاهیم این موضوع را به دقت در نظر بگیریم و درک کنیم. احتمالاً می دانید کدام یک از سایت های شما ممکن است تحت تأثیر این به روز رسانی قرار بگیرند.

بنابراین، وقت آن رسیده است که رویکرد پیشوندها را بازنگری کنید و سایت ها را با آنها آزمایش کنید.

پیشوندهای پشتیبانی شده

تعدادی پیشوند -webkit- وجود دارد که موزیلا می تواند پیاده سازی کند. بر اساس آنچه من جمع آوری کرده ام، موزیلا سعی نمی کند لیست ویژگی های پیشوند پشتیبانی شده خود را با Edge مطابقت دهد، زیرا همه آنها برای سازگاری موتور چیدمان مورد نیاز نیستند.

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

روند فعلی در موزیلا این است که با غیرفعال کردن ویژگی‌های خارج از قفسه و استفاده از نسخه بدون پیشوند در صورت پایداری کافی، از پیشوندهای فروشنده جلوگیری می‌کند. این یک سیاست کلی است: ممکن است در برخی موارد استثنا وجود داشته باشد - بوریس از موزیلا

مایکروسافت اج همچنین پیشوندهای فروشنده را حذف می کند:

مایکروسافت همچنین قصد دارد پیشوندهای فروشنده را از Edge حذف کند. این بدان معناست که توسعه دهندگانی که می خواهند از ویژگی های خاص HTML و CSS استفاده کنند، از پیشوند خاص Edge استفاده نخواهند کرد. در عوض، آنها فقط کد را مطابق استانداردها می نویسند.» - Mashable

تخریب تدریجی بر اساس پیشوندها دیگر وجود نخواهد داشت

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

استفاده از پیشوندهای فروشنده برای اعمال سبک های خاص مرورگر (به عنوان مثال، فقط Chrome) هدف معرفی آنها نبود. توصیه به توسعه دهندگان همیشه استفاده از همه پیشوندها (از -webkit- تا -o-) بوده است. اگر از ویژگی‌هایی استفاده می‌کنید که به ویژگی‌های پیشوند بستگی دارند و از پیشوندهایی برای کاهش تدریجی طراحی خود در مرورگرهای دیگر استفاده می‌کنید، این دیگر کار نمی‌کند.

نتیجه

زمان تغییر می کند. تسلط WebKit ناخواسته مشکلات ناسازگاری ایجاد کرده است که سایر فروشندگان مرورگر را مجبور به پیاده سازی پیشوندهای -webkit- می کند. با دور شدن فروشندگان مرورگر از پیشوندهای فروشنده، این مشکل ادامه پیدا می کند، اما در حال حاضر، توسعه دهندگان باید اطمینان حاصل کنند که پیشوندها در مرورگرهای غیر WebKit نتایج غیرمنتظره ای ایجاد نکنند.