یادداشت‌ها

یک مدیا کوئری خاص در CSS

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

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

حالا شاید بپرسید چه ربطی به طراحی وب داره؟ مسأله اینجاست که افرادی با این اختلال، وقتی صفحات وب با انیمیشن زیاد رو می‌بینند همون مشکلات که بالا گفته شد رو پیدا می‌کنند؛ خصوصاً انیمیشن‌هایی که یه المان سایزش مدام تغییر می‌کنه (مث پالس زدن).

به عنوان طراح وب باید چه کنیم؟ در طراحی صفحات وب برای این که چنین افرادی به مشکل برنخورند، باید از مدیا کوئری استفاده کنیم. یه حالت خاص مدیا کوئری داریم برای حذف انیمیشن‌های مزاحم این افراد!!!

@media (prefers-reduced-motion) {
/* استایل‌هایی که انیمیشن مزاحمشون حذف شده */
}

تگ script در HTML

تگ script در صفحه HTML دو تا اتریبیوت مهم داره که باعث میشه سرعت بارگذاری صفحات شما تحت تاثیر قرار بگیره. یکی defer هست و دیگری async:

<script src="script.js" defer></script>

مقدار defer به مرورگر میگه که اسکریپت بعد از پارس شدن کامل صفحه HTML اجرا بشه (برای وضعیت SEO صفحه بهتره). اما مقدار async به مرورگر میگه اسکریپت همزمان با پارس شدن صفحه HTML دانلود بشه و هر زمان در دسترس قرار گرفت اجرا بشه (برای لود اسکریپت‌های مهم و فوری بهتره).

نکته تکمیلی: این اتریبیوت‌ها برای اسکریپت‌های اینلاین (اونایی که src ندارند) تاثیری نخواهد داشت.

دو مقدار کاربردی rel در HTML

وقتایی که قصد دارید یه منبع خارجی مثل یه فونت، یه استایل CSS یا یه اسکریپت JS رو داخل صفحه HTML خودتون وارد کنید یا وقتی که داخل صفحه، درخواست‌های زیادی به یک منبع مشخص ارسال می‌کنید، حتماً از ویژگی‌ preconnect به صورت زیر استفاده کنید:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.gstatic.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

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

اما اگر یک منبعی رو فقط یک بار یا به ندرت استفاده می‌کنید، بهتره منابع در اختیار مرورگر رو با preconnect هدر ندید و از dns-prefetch استفاده کنید:

<link rel="dns-prefetch" href="https://example.com">

افزونه کنتراست رنگی کروم

اگر شما هم مثل من و خیلیای دیگه، اونقدر تنبل هستید که حوصله ندارید از پنل Accessibility مرورگرتون چک کنید که رنگ‌های سایت‌تون به اندازه کافی کنتراست دارند و استانداردهای این زمینه رو پاس می‌کنند یا نه، خبر خوشی براتون دارم 🤪

با این افزونه گوگل کروم دیگه نیازی نیست هی دنبال استاندارد بودن کنتراست رنگ‌های طراحی‌تون بگردید. نصب کنید و لذت ببرید: صفحه افزونه در استور گوگل کروم 🤔

بررسی واکنشگرایی سایت

شاید شما هم دوست داشته باشید که وقتی یه سایت واکنشگرا (responsive) طراحی کردید، ببینید شکلش توی دستگاه‌های مختلف با عرض‌های مختلف چطوری میشه؟ 😐 طبیعتاً خود مرورگرهای جدید این قابلیت رو دارند ولی یه خرده ظاهرشون ساده است. این افزونه گوگل کروم باعث میشه یه خرده ظاهر جذاب‌تری در خروجی ببینید. ۴۵ مدل گوشی تلفن همراه و ۵ مدل تبلت رو شبیه‌سازی می‌کنه. امکان تهیه دمو (هم فیلم هم عکس) هم در اختیارتون می‌ذاره 😍

صفحه افزونه در استور گوگل کروم