۵ موضوع آزار دهنده در مورد CSS

­در سال ۱۹۹۶، مرورگر های اصلی پشتیبانی ضعیفی از CSS داشتند در نتیجه طراحان وب باید از تکنیک های مختلفی استفاده می کردند تا به نتیجه دلخواه خود برسند. در حقیقت تا قبل از سال ۱۹۹۹ هیچ مرورگری از СSS1 به طور کامل پشتیبانی نمی کرد. اینترنت اکسپلورر ۵.۰ که برای مکینتاش منتشر شده بود  و در سال ۲۰۰۰ وارد بازار شد، اولین مرورگری بود که به طور کامل از CSS1 پشتیبانی می کرد. قابل توجه است که CSS2 در سال ۱۹۹۹ منتشر شده بود با این حال طراحان به دلیل عدم پشتیبانی مرورگر ها، در استفاده از آن شک و تردید زیادی داشتند.

توسعه سومین نسل CSS از حدود سال ۱۹۹۸ شروع و تا ۲۰۰۹ طول کشید. CSS3 همراه خود امکانات بیشماری را عرضه کرد مانند: گوشه های گرد شده، سایه ها، گرادیانت ها، انیمیشن همراه با پیکربندی های جدیدی مانند چند ستونی، فلکس باکس و …

خوشبختانه، علاوه بر تلاش W3C برای ارتقای تجربه کاری توسعه دهنده ها، جامعه فرانت-اند تکنیک های بسیار زیادی را برای مشکلات موجود عرضه کرد.برای مثال Sass، Stylus، LESS که حلقه ها، ترکیب ها و دستور ها را قابل دسترس کردند.

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

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

در این جا ما چند مشکل اساسی CSS را بررسی کرده ایم:

۱- CSS به جای محوریت طراحی، محوریت روی تگ و مارک-آپ دارد

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

۲- جنگ مرورگرها

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

چند نکته:

• همیشه از  Normalize.css استفاده نمایید. در نتیجه آن مرورگر ها  کار شبیه تری را ارائه خواهند داد.
• ار فریم ورک هایی مانند BootStrap، Bulma یا Materilalize استفاده نمایید. در آن ها مشکل عدم هماهنگی مرورگر ها به خوبی برطرف شده است.
• از تولید کننده های CSS استفاده نمایید. آن ها کمک می کنند تا کدهایی که با مرورگر های مختلف سازگار هستند را تولید نمایید.
• سرویس هایی مانند:W3C Validation کد شما را(HTML، XHTML و CSS) شما را بررسی و مشکلات آن را به شما اعلام می کند.
  برای HTML  از http://validator.w3.org استفاده و برای  CSS  از http://jigsaw.w3.org/css-validator استفاده نمایید

۳- طراحی واکنش گرا

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

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

چند نکته:

• محتوا را در موبایل اولیت بندی کنید. اگر حس می کنید محتوایی برای موبایل مناسب نیست آن را مخفی کنید.
• از SVG استفاده نمایید. برخلاف فرمت هایی مانند JPEG یا PNG، این فرمت به راحتی سایز خود را تغییر می دهد بدون آن که از کیفیت آن کاسته شود. همچنین حجم این فرمت نسبت به فرمت های ذکر شده بسیار کم تر است، بنابر این روی سرعت بارگذاری سایت شما تاثیر قابل توجهی خواهند داشت.
• هنگامی که محتوای قابل کلیکی را ایجاد می کنید، حتما اندازه آن را متناسب انتخاب کنید. خیلی اوقات دکمه ها و منوها اندازه بیش از حد کوچکی را در موبایل ها و دستگاه های دیگر به خود می گیرند و کار با آن ها دشوار خواهد شد.
• طراحی خود را حداقل با ۵ دستگاه مختلف تست کنید.
• از فریم ورک هایی مانند Bootstrap استفاده نمایید. این فریم ورک ها ایجاد سایت مناسب برای موبایل را بسیار راحت می کنند.

۴- درخواست های مشتریان

اکثر مشتری ها درخواست های عجیب، انتظارات غیر واقعی یا ویژگی هایی را مد نظر دارند که در نهایت باعث مشکلات زیادی خواهد شد. آنان درخواست خود را هر ثانیه تغییر می دهند و در نهایت باعث می شوند که طراح احساس خستگی بیش از حدی را نماید.( به همین دلیل است که سایت هایی مانند clientsfromhell.net ایجاد شده اند)

چند نکته:

• برای نمایش ایده های خود از نرم افزار هایی مانند Adobe XD، Sketch، InVision  و … استفاده نمایید. پروسه توسعه را هنگامی آغار کنید که طرح تایید شده است.
• آرامش خود را حفظ کنید! نگذارید که احساسات شما، باعث شوند که کنترل شرایط از دستتان خارج شود. به یاد داشته باشید که مشتری های شما دوره های طراحی ندیده اند و نمی دانند که رنگ قرمز روی پس زمینه سبز بهترین انتخاب برای خوانایی نخواهد بود.سعی کنید تصمیمات طراحی خود را توضیح دهید و دلیل نامناسب بودن انتخاب مشتری را با دلایل منطقی برای آن ها شرح دهید.
• به یاد داشته باشید که در نهایت سایت متعلق به مشتری شما است و حداکثر کاری که شما می توانید انجام دهید پیشنهاد گزینه های مناسب است. اگر آن ها موافق نیستند، بهتر است با تصمیم آن ها پیش بروید و سعی کنید که تا جای ممکن آن را به صورت قابل قبولی در آورید.

۵- دست کم گرفته شدن CSS

CSS خسته کننده است به این دلیل که هیچ کس زمان کافی را روی یادگیری آن نمی گذارد.

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

ما با برنامه نویسان بک-اند بسیار با استعدادی کار کرده ایم که تسلط غیر قابل باوری روی پترن های مختلف برنامه نویسی شی گرا، دیتابیس های مختلف و … داشته اند اما همین اشخاص هنگامی که در حال کار کردن با Float و موقعیت ها در CSS هستند به مشکل بر می خورند و فکر می کنند که CSS نوعی جادوی سیاه است!

مردم فکر می کنند که CSS باید ساده و کار با آن راحت باشد- اما مانند اکثر زبان ها، تسلط به آن نیازمند زمان و تمرین زیاد است.

کارکردن با CSS  و تسلط کامل به آن دو موضوع کاملا متفاوت هستند. یادگیری این زبان ساده است اما استاد شدن در آن کمی دشوار است. این موضوعی است که آشنا شدن با آن شاید تنها چند ساعت زمان ببرد اما برای تسلط کامل نیاز به سال ها زمان باشد.