فرم های HTML در مرورگرهای قدیمی — راهنمای جامع

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

برای مطالعه بخش قبلی این سری مطالب آموزشی روی لینک زیر کلیک کنید:

• ارسال فرم HTML با جاوا اسکریپت — راهنمای جامع

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

بیان مسئله

اساساً مهم‌ترین نکته در زمان مواجهه با این مشکل، خواندن مستندات آن مرورگرهای قدیمی و تلاش برای درک الگوهای رایج است. برای نمونه در اغلب موارد پشتیبانی از CSS بزرگ‌ترین مشکل در فرم‌های HTML محسوب می‌شود. بنابراین بهترین نقطه شروع همین‌جا است. کافی است پشتیبانی از عناصر (یا اینترفیس DOM) که می‌خواهید استفاده کنید را مورد بررسی قرار دهید. وب‌سایت MDN جدول سازگاری را برای اغلب عناصر، مشخصه‌ها و API-هایی که می‌توان در صفحه‌های وب مورد استفاده قرار ارائه کرده است. اما منابع دیگری نیز وجود دارند که می‌توانند مفید واقع شوند و در ادامه به معرفی آن‌ها می‌پردازیم.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

مستندات ارائه‌دهنده مرورگر

• موزیلا: به این منظور کافی است به بررسی وب‌سایت MDN بپردازید.
• مایکروسافت: مستندات پشتیبانی استانداردهای اینترنت اکسپلورر (+)
• WebKit: از آنجا که نسخه‌های مختلفی برای این موتور وجود دارد، بررسی مستندات آن کمی پیچیده‌تر است:
  • بلاگ وب کیت (+) و وب‌سایت Planet WebKit (+) بهترین مقالات ارائه شده از سوی تیم مرکزی توسعه وب کیت را شامل می‌شوند.
  • وب‌سایت Chrome platform status (+) نیز مهم است.
  • همچنین می‌توانید به وب‌سایت اپل (+) سر بزنید.

مستندات مستقل

• وب‌سایت Can I Use (+) اطلاعاتی در مورد فناوری‌های کاملاً نوین ارائه می‌کند.
• وب‌سایت Quirks Mode (+) یک منبع شگفت‌انگیز در مورد سازگاری مرورگرها محسوب می‌شود. بخش موبایل این وب‌سایت یکی از بهترین منابع حال حاضر است.
• وب‌سایت Position Is Everything (+) بهترین منبع موجود در مورد رندر کردن باگ‌ها در مرورگرهای قدیمی و هر گونه راه‌حل موجود در این زمینه است.
• وب‌سایت Mobile HTML5 (+) اطلاعات سازگاری را در مورد طیف وسیعی از مرورگرهای موبایل و نه انواع برندهای مطرح ارائه می‌کند.

ساده‌سازی مسائل

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

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

«تنزل مطبوع» بهترین دوست توسعه‌دهنده وب است

«تنزل مطبوع» (Graceful Degradation) و «بهبود پیش‌رونده» (progressive enhancement) دو الگوی توسعه هستند که امکان ساخت محصولاتی عالی و همزمان پشتیبانی از طیف وسیعی از مرورگرها را فراهم می‌سازند. زمانی که چیزی را برای یک مرورگر مدرن می‌سازید و می‌خواهید مطمئن باشید که روی مرورگرهای قدیمی هم به هر حال به طریقی حتماً کار خواهد کرد در واقع از روش تنزل مطبوع استفاده می‌کنید. در ادامه چند نمونه از این مفهوم را در ارتباط با فرم‌های HTML بررسی می‌کنیم.

انواع ورودی HTML

انواع ورودی جدید ارائه شده از سوی HTML5 بسیار جالب هستند، زیرا روش تنزل آن‌ها کاملاً قابل پیش‌بینی است. اگر مرورگری مقدار خصوصیت type یک عنصر <input> را نداند، به مقدار text بازمی‌گردد.

1<label for="myColor">
2  Pick a color
3  <input type="color" id="myColor" name="color">
4</label>

Chrome 24	Firefox 18

انتخاب‌گرهای خصوصیت CSS

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

1<input type="number" class="number">

1input[type=number] {
2  /* This can fail in some browsers */
3}
4
5input.number {
6  /* This will work everywhere */
7}

توجه کنید که کد زیر بی‌فایده است (زیرا تکراری است) و ممکن است در برخی مرورگرها کار نکند:

1input[type=number],
2input.number {
3  /* This can fail in some browsers because if they do not understand
4     one of the selectors, they will skip the whole rule */
5}

دکمه‌های فرم

دو روش برای تعریف دکمه‌ها در فرم‌های HTML وجود دارد:

• عنصر <input> با خصوصیت type که دارای مقدار button ،submit ،reset یا image است.
• عنصر <button>.

عنصر <input> در صورتی که بخواهید نوعی CSS را با استفاده از سلکتور‌های عنصر روی آن اعمال کند، می‌تواند موجب دشواری‌هایی شود.

1<input type="button" class="button" value="click me">

1input {
2  /* This rule turns off the default rendering for buttons defined with an input element */
3  border: 1px solid #CCC;
4}
5
6input.button {
7  /* This does NOT restore the default rendering */
8  border: none;
9}
10
11input.button {
12  /* That doesn't either! Actually there is no standard way to do it in any browser */
13  border: auto;
14}

عنصر <button> از دو مشکل احتمالی رنج می‌برد:

• یک باگ در برخی نسخه‌های قدیمی اینترنت اکسپلورر وجود دارد. وقتی که کاربر روی دکمه کلیک کند، این محتوای خصوصیت value نیست که ارسال می‌شود، بلکه محتوای HTML بین تگ‌های آغاز و پایانی عنصر <button> خواهد بود. این مورد تنها در صورتی مشکل محسوب می‌شود که بخواهید چنین مقداری را ارسال کنید. برای نمونه اگر بخواهید بسته به دکمه‌ای که کاربر کلیک کرده است داده‌ای را پردازش کنید چنین حالتی متصور خواهد بود.
• برخی مرورگرهای قدیمی از submit به عنوان مقدار پیش‌فرض خصوصیت type استفاده نمی‌کنند، از این رو توصیه می‌شود که همواره خصوصیت type را روی عنصرهای <button> تعیین کنید.

1<!-- Clicking this button sends "<em>Do A</em>" instead of "A" in some cases -->
2<button type="submit" name="IWantTo" value="A">
3  <em>Do A</em>
4</button>

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

پشتیبانی از CSS

بزرگ‌ترین مشکل فرم‌های HTML در مرورگرهای قدیمی، بحث پشتیبانی از CSS است. در چنین مواردی حتی اگر امکان اعمال نوعی تغییر روی عناصر متن (مانند تغییر اندازه یا رنگ) وجود داشته باشد، همواره عوارض ناخواسته‌ای وجود خواهد داشت. در این موارد بهترین رویکرد این است که کلاً از خیر استایل‌دهی به ویجت‌های فرم HTML بگذرید. با این حال همچنان می‌توان استایل ها را روی همه آیتم‌های پیرامونی اعمال کرد. اگر یک فرد حرفه‌ای باشید و مشتری از شما بخواهد، می‌توانید در این حالت برخی تکنیک‌های دشوار مانند ساخت مجدد ویجت‌ها با جاوا اسکریپت را انجام دهید.

کشف قابلیت و polyfill-ها

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

یکی از بزرگ‌ترین مشکل‌ها، دسترسی به API-ها است. به همین دلیل کار با جاوا اسکریپت «غیر مزاحم» (unobtrusive) بهترین رویه در نظر گرفته می‌شود. این یک الگوی توسعه است که دو الزام را تعریف می‌کند:

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

مفهوم جاوا اسکریپت «غیر مزاحم» که در ابتدا از سوی پیتر پاول کخ برای Dev.Opera.com عرضه شده است (و اینک به Docs.WebPlatform.org انتقال یافته است) این ایده‌ها را به خوبی توضیح می‌دهد.

کتابخانه Modernizr

موارد زیادی وجود دارند که polyfill مناسب تا حدود زیادی می‌تواند به ارائه یک API مفقود کمک کند. یک polyfill نوعی کد جاوا اسکریپت است که موارد نقص کارکردهای مرورگرهای قدیمی را جبران می‌کند. با این که می‌توان از آن برای بهبود پشتیبانی هر نوع کارکردی استفاده کرد، استفاده از آن‌ها برای جاوا اسکریپت نسبت به CSS یا HTML ریسک کمتری دارد. موارد زیادی وجود دارند که جاوا اسکریپت ممکن است (به دلیل مشکلات شبکه، تعارض اسکریپت و غیره) از کار بیفتد. اما برای جاوا اسکریپت اگر با ذهنیت جاوا اسکریپت غیر مزاحم کار کنیم، در صورت فقدان polyfill نیز مشکل مهمی به حساب نمی‌آید.

بهترین روش برای polyfill کردن API مفقود، استفاده از کتابخانه Modernizr و پروژه جانبی آن YepNope است. Modernizr کتابخانه‌ای است که امکان تست وجود کارکرد را می‌دهد تا بر اساس آن عمل کنید. YepNope یک کتابخانه بارگذاری شرطی است. به مثال زیر توجه کنید:

1Modernizr.load({
2  // This tests if your browser supports the HTML5 form validation API
3  test : Modernizr.formvalidation,
4 
5  // If the browser does not support it, the following polyfill is loaded
6  nope : form-validation-API-polyfill.js,
7 
8  // In any case, your core App file that depends on that API is loaded
9  both : app.js,
10 
11  // Once both files are loaded, this function is called in order to initialize the App.
12  complete : function () {
13    app.init();
14  }
15});

تیم Modernizr لیستی از polyfill-های عالی را به سادگی نگهداری می‌کند.

نکته: Modernizr قابلیت‌های مدرن دیگری نیز دارد که امکان کار با جاوا اسکریپت غیر مزاحم و تکنیک‌های تنزل مطبوع را می‌دهد. برای کسب اطلاعات بیشتر به مستندات Modernizr (+) مراجعه کنید.

نکاتی در خصوص عملکرد

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

سخن پایانی

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

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:

استایل‌بندی فرم‌های HTML --- راهنمای جامع

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی سایت با HTML و CSS
• مجموعه آموزش‌های جاوا اسکریپت
• آموزش پروژه محور HTML و CSS
• آشنایی مقدماتی با HTML — به زبان ساده
• ۸ افکت HTML برای زیباتر شدن وبسایت

==