10 مشکل ناامید کننده سازگاری مرورگرها که توسعه دهندگان در سال 2024 با آن روبرو هستند

Summarize this content to 400 words in Persian Lang

مدتی است که توسعه دهندگان با مشکلات سازگاری بین مرورگرها سروکار دارند. سوالی که همیشه در ذهن آنها وجود دارد این است که چگونه می‌توانیم بهترین تجربه کاربری را با وجود تفاوت‌های مکانیزم زیربنایی مرورگرها و ویژگی‌هایی که پشتیبانی می‌کنند به همه ارائه کنیم؟

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

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

اینترنت اکسپلورر: چه مشکلی پیش آمد؟

در نظرسنجی انجام شده توسط MDN، اینترنت اکسپلورر توسط 70 درصد از پاسخ دهندگان، مشکل‌سازترین مرورگر بود.

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

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

امروزه در سال 2024، مشکل اینترنت اکسپلورر این است که از چندین ویژگی در مقایسه با سایر مرورگرها پشتیبانی نمی کند. به عنوان مثال، پشتیبانی چند کلاسه (جاوا اسکریپت) در دسترس نیست، طراحی طرح‌بندی فرم یک کابوس است، و بسیاری از ویژگی‌های جدیدی که وارد شدند هرگز به‌روزرسانی نشدند. CSS Flexbox در اینترنت اکسپلورر پشتیبانی می شود اما با چندین مشکل.

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

مایکروسافت پشتیبانی از اینترنت اکسپلورر 11 را در 15 ژوئن 2022 برای نسخه‌های خاصی از ویندوز 10 از جمله برنامه‌های دسکتاپ متوقف کرد.

مایکروسافت اج با “حالت اینترنت اکسپلورر” عرضه می شود که از طریق آن می توانید به وب سایت ها در اینترنت اکسپلورر دسترسی داشته باشید و آنها را آزمایش کنید.

چرا نمی‌توانیم اینترنت اکسپلورر را رها کنیم و جلو برویم؟

من مطمئن هستم که شما باید فکر کنید، چرا ما آن را از مرورگرهای هدف خود حذف نمی کنیم و با مفهوم “تغییر ثابت است؟”

طبق netmarketshare، سهم بازار مرورگر اینترنت اکسپلورر هنوز 0.09٪ در سراسر جهان در رایانه های رومیزی و لپ تاپ ها است.

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

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

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

CSS: عامل مهمی که باعث مشکلات سازگاری مرورگر می شود

مشکل بعدی سازگاری مرورگر که توسعه دهندگان در نظرسنجی به آن اشاره کردند CSS است و جای تعجب نیست. CSS کثیف و غیرقابل پیش بینی است!

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

خط پایین – CSS نامرتب و سازماندهی نشده است! چندین زیرشاخه آن مانند CSS flexbox و CSS position sticky به خودی خود مشکل ساز هستند. آنها مشکلات سازگاری مرورگر را مطرح می کنند و هیچ تغییری ندارند. با این حال، آنها توسط گوگل، ایگلیا، مایکروسافت و موزیلا به همراه نام پروژه Compat21 رفع می شوند.

مشکلات سازگاری مرورگر با مرورگرهای قدیمی

نقطه درد “مرورگر قدیمی” را می توان به عنوان یک چتر بزرگتر مشاهده کرد که اینترنت اکسپلورر را زیر آن می پوشاند. مرورگرهای قدیمی نیز یک نسخه قدیمی از مرورگرهای فعلی (که هنوز به طور فعال توسعه یافته اند) را تشکیل می دهند. اینها ممکن است شامل گوگل کروم، فایرفاکس و غیره باشند.

دلایل اینجا هنوز همان است. مرورگرهای قدیمی اغلب با پشتیبانی 100٪ از آخرین فناوری ها عرضه نمی شوند. CSS در حال تغییر است و برای همیشه تطبیق می‌یابد، اما ما نمی‌توانیم آن را به طور کامل پیاده‌سازی کنیم، زیرا 0.09٪ از مردم هنوز از اینترنت اکسپلورر استفاده می‌کنند (حتی اگر من فقط هر نسخه قدیمی‌تری را حذف کنم).

طبق گزارش statcounter، گوگل کروم بر روی نسخه 122، مجهز به آخرین ویژگی ها و در حال حاضر با 65.31% پرکاربردترین مرورگر است.

کروم 120 در سال گذشته در 29 نوامبر منتشر شد و مطمئناً امیدواریم که مردم دیگر از آن استفاده نکنند. با این حال، کار کردن کاربران با نسخه های قدیمی مرورگر به دلایل مختلف غیر معمول نیست. به همین دلیل است که هنگام توسعه یک وب‌سایت، آزمایش مشکلات سازگاری مرورگر در همه مرورگرها و نسخه‌ها ضروری است.

مشکلات سازگاری بین مرورگرهای جاوا اسکریپت

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

مشکلات اصلی سازگاری مرورگر در جاوا اسکریپت عبارتند از:

نسخه های مختلف ECMAscript باید با نسخه های مختلف مرورگر هماهنگ شوند.
ویژگی‌های ES6 در مرورگرهای قدیمی اما با Polyfills پشتیبانی می‌شوند.
پشتیبانی بومی در جاوا اسکریپت وجود ندارد.
کد متورم به دلیل اجرای کد از طریق ترانسپایلرها.

دلیل دیگر این است که جاوا اسکریپت در ماژول ها و بسته ها نیز زنده می ماند. بنابراین یک برنامه کوچک می‌تواند شامل ماژول‌های زیادی باشد که بر سرعت تأثیر می‌گذارد و آن را کندتر می‌کند.

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

جاوا اسکریپت زیر C، C++ (مورد انتظار) و حتی پایتون و PHP است!

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

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

مشکلات رندر در مرورگرها

مشکلات رندر بیشتر مربوط به مشکلات سازگاری مرورگر است که در آن شما عنصری دارید که روی یک مرورگر کار می کند اما آن را در مرورگر دیگری کاملاً از دست می دهید.

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

بیایید نمونه ای از حالت های نوشتن CSS را در نظر بگیریم. این به ما کمک می کند تا جهت نوشتن را با گزینه های کمی تعریف کنیم. به عنوان مثال، پشتیبانی از حالت نوشتن “sideways-lr” و “sideways-rl” به شرح زیر است:

وقتی می‌گویم «پشتیبانی نمی‌کند»، به این معنی است که موتور مرورگر هنوز آماده درک معنای آن نیست و ویژگی را با مقادیر پیش‌فرض دور می‌زند.

به دنبال بهترین چارچوب CSS برای پروژه خود هستید؟ برای کشف بیشتر اینجا را کلیک کنید!

چگونه مشکلات رندر وب را آزمایش کنیم؟

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

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

LambdaTest یک پلت فرم آنلاین است که با تمام ترکیبات مرورگرها و پلتفرم های نصب شده بر روی زیرساخت ابری آنها مجهز شده است. به عنوان یک کاربر، فقط باید پلتفرم مورد نظر را انتخاب کنید (مانند کروم 122 در ویندوز 10) و URL را وارد کنید تا آن را روی آن ترکیب راه اندازی کنید. به عنوان یک پلتفرم ابری، می توانید بدون توجه به دستگاهی که استفاده می کنید، آزمایشاتی را انجام دهید. به عنوان مثال، حتی می توانید اینترنت اکسپلورر را در مک با استفاده از LambdaTest platfrom آزمایش کنید.

مسائل چیدمان و استایل

از نظرسنجی MDN، مشخص شد که اکثر توسعه دهندگان به طور خاص با مسائل طرح و استایل دست و پنجه نرم می کنند. برای مثال، CSS Flexbox و CSS Grid در دستیابی به سازگاری طرح‌بندی در مرورگرهای مختلف مشکل‌ساز هستند.

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

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

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

پذیرش آهسته ویژگی های جدید

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

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

که حتی “خوب” هم نیست. در حال حاضر فقط موزیلا فایرفاکس از زیرشبکه ها پشتیبانی می کند. اگر یک موتور از نظر پذیرش ویژگی عقب باشد، می تواند وب سایت را کمتر رقابتی کند. نمودار زیر نحوه شکست تست‌ها را نشان می‌دهد، به خصوص در Safari و نه در Chrome و Firefox. اگرچه سافاری بسیار محبوب است، اما همچنان از ویژگی های کمتری در مقایسه با رقبای خود پشتیبانی می کند.

مشکلات سازگاری مرورگر با PWA

درصد کمی از افراد در نظرسنجی (حدود 3٪) به PWA ها به عنوان یک نقطه دردناک در سفر توسعه خود اشاره کردند. برنامه وب پیشرو برنامه ای است که نه بومی است و نه یک برنامه وب. این نقطه قوت PWA و احتمالاً ضعف آن است.

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

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

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

برای یادگیری بیشتر انواع برنامه‌ها مانند برنامه‌های وب ترکیبی، بومی، پیشرونده و موارد دیگر، این راهنما را در مورد انواع مختلف برنامه‌های تلفن همراه دنبال کنید و بینش‌های ارزشمندی دریافت کنید.

مسائل طراحی CSS Flexbox

نکته مهم دیگر برای مشکلات سازگاری بین مرورگرها CSS Flexbox است. همراه با فهرستی طولانی از خواصی است که نحوه توزیع این اقلام و نقش ظرف در آن را تعیین می کند. ما یک آموزش CSS Flexbox ایجاد کرده‌ایم که در صورت اهمیت می‌تواند برای کسانی که تازه وارد CSS flexbox یا CSS شده‌اند مفید باشد.

Flexbox ها بخشی از پروژه Compat21 هستند که بر پنج موضوع مهم امروزی در سازگاری مرورگر تمرکز می کند. اگرچه Flexbox در حال حاضر عملکرد خوبی دارد، تا زمانی که توسعه دهندگانی مانند شما به ثبت این مشکلات ادامه دهند، در سال 2024 مرورگرهای بسیار بهتری مشاهده خواهد شد. برخی از این مسائل عبارتند از فلکس باکس عمودی و تصاویر به عنوان موارد فلکس باکس (که اکنون حل شده اند).

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

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

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

همه اینها باعث می شود قبل از نوشتن display:flex در صفحه وب دو بار فکر کنیم. اما تنها گزینه دیگری که داریم شبکه CSS است که جاده همواری هم نیست. CSS flexbox من را به یاد این جمله محبوب می اندازد، “آن را دوست داشته باشید یا از آن متنفر باشید، نمی توانید آن را نادیده بگیرید!”.

با مشکل جاوا اسکریپت مواجه هستید؟ راه حل های موثر برای مسائل رایج کشف کنید و مهارت های کدنویسی خود را افزایش دهید.

Polyfills اغلب می تواند خسته کننده باشد

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

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

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

بنابراین، چگونه به نوشتن polyfills نزدیک می شوید؟ ابتدا ویژگی را به ساده ترین شکلی که فکر می کنید پیاده سازی کنید. سپس مشکلات سازگاری مرورگر را بررسی کنید و polyfills را بنویسید. این کار اضافی منجر به یک پایگاه کاربر بزرگتر می شود، اما هیچ کس نمی خواهد چیزی مشابه را با دو روش حداقل 10 تا 20 بار در روز بنویسد. درد است! به خصوص اگر مرورگرهای قدیمی بخشی از ماتریس مرورگر شما باشند.

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

این ماتریس همچنین می تواند به ایجاد یک استراتژی تست جامع برای وب سایت شما کمک کند.

نتیجه

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

به هر حال، من کاملاً مطمئن هستم که “امنیت” آخرین روند این روزها است زیرا هر توسعه دهنده مرورگر یک ویژگی را راه اندازی یا منسوخ می کند و دلیل آن را “امنیت” می نویسد. اما چه کسی در نهایت از این همه رنج می برد؟