چگونه وب‌سایت خود را با مرورگر گوگل سازگار کنید

همان‌طور که اطلاع دارید، شرکت گوگل یک مرورگر اینترنتی به نام گوگل کروم (Google Chrome) ساخته‌ است که بسیار سریع و با فناوری‌های جدید است. به دلیل اینکه استفاده از این مرورگر روز به روز در حال افزایش است، در این نوشته سعی داریم تا یک راهنمای ساده برای سازگار کردن وب‌سایت‌ها با مرورگر کروم به شما پیشنهاد بدهیم.

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

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

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

۱- برنامه‌ها را از سایت‌ها جدا کنید

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

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

اگر سایت شما یک نرم‌افزار تحت وب است این کدها را به <head> سایت خود اضافه کنید:

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

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

۲- از فایل‌های table به ندرت استفاده کنید

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

۳- در وب‌سایت خود از Formهای رنگی و همراه با استایل استفاده نکنید

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

۴- فرم‌های خود را به صورت Flexible طراحی کنید

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

۵- برای هر فیلد در فرم‌ها یک Label اختصاص دهید

منظور از Label توضیحی است که شما باید برای هر یک از فیلدها بنویسید.

۶- از XMLهای معتبر استفاده کنید

همیشه مواظب باشید که فایل‌های XML سایت شما (مخصوصا در سایت‌های وب ۲.۰) قابل خواندن و شناخته‌شدن باشند یعنی در معتبر (Valid) باشند تا کروم به آنها شک نکند.

۷- در کدهای سایت خود نوع HTML را ذکر کنید

برای نمایش بهتر سایت شما در کروم باید نوع HTML سایت خود را در همان ابتدای کدها ذکر کنید. مثلا به این صورت:

8- حتما از favicon استفاده کنید

منظور از favicon عکس کوچکی است که در کنار آدرس هر سایتی در نوار آدرس مشاهده می‌شود.

۹- در ساختار سایت خود به هیچ‌وجه از frameهای قدیمی استفاده نکنید

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

۱۰- به جای table از تگ‌های <div> استفاده کنید

۱۱- توضیحی برای docType بنویسید

HTML را همراه با docType تعریف می‌کنند؛ برای نمایش بهتر صفحات در کروم به نمونه‌ی زیر توجه کنید:

در مثال فوق هم نوع HTML (که XMLNS است) و هم جهت نوشتاری (که RTL می‌باشد) و هم زبان صفحه (که فارسی است) مشخص شده‌است.

۱۲- استایل‌های معتبر و سالم بنویسید

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

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

برای بررسی اعتبار این استایل‌ها می‌توانید از این سایت کمک بگیرید. سایت مذکور، آدرس CSS سایت شما را دریافت می‌کند و طی یک پردازش، تمامی آن را بررسی می‌کند و اگر معتبر بود به شما اعلام می‌کند. در صورتی که CSS معتبر نباشد، تمامی ایرادها و اشکالات آن را به شما معرفی می‌کند تا شما برطرف کنید.

۱۳- از فضای خالی به ندرت استفاده کنید

در فایل‌های جاوا اسکریپت که تحت نرم‌افزار اجرا می‌گردند، تا حد امکان از فضاهای (Space) اضافی، بکاهید. این فضاها در سیستم WebKit ایجاد مشکل می‌کنند، شاید بپرسید چرا اینگونه است؟ علت این مشکل این است که کروم فایل‌های جاوا اسکریپت را بسیار سریع اجرا می‌کند (شاید دو برابر سرعت اجرای همان فایل‌ها در سایر مرورگرها). در چنین حالتی، وجود فضاهای اضافی (حتی به مقدار خیلی کم) روند اجرای فایل‌های js را طولانی می‌کند. به نمونه زیر توجه کنید:

‘/v-css/2573940223-comment_bundle.css’

new Image().src = “/img/sides_body.png”

در مثال بالا از هرگونه فضای اضافی صرف نظر شده است. این کار اجرای فایل js را سریع‌تر می‌کند و سرعت کلی سایت شما را بهبود می‌بخشد.

به کمک این ۱۳ مورد شما می‌توانید وب‌سایت خود را با مرورگر کروم هماهنگ کنید.