آموزش CSS پیشرفته : طراحی وب واکنشگرا
طراحی وب واکنشگرا (RWD) یک رویکرد طراحی وب است که باعث میشود صفحات وب در تمام اندازهها و وضوح صفحه نمایش به خوبی نمایش داده شوند و در عین حال قابلیت استفاده خوبی را تضمین کنند. این روشی برای طراحی وب چند دستگاهی است. در این مقاله، به شما کمک خواهیم کرد تا برخی از تکنیکهایی را که میتوان برای تسلط بر آن استفاده کرد، درک کنید.
پیش درآمدی بر طراحی واکنشگرا: طراحی وب موبایل
قبل از اینکه طراحی وب واکنشگرا به رویکرد استاندارد برای ایجاد وبسایتها در انواع دستگاههای مختلف تبدیل شود، توسعهدهندگان وب در مورد طراحی وب موبایل، توسعه وب موبایل یا گاهی اوقات، طراحی سازگار با موبایل صحبت میکردند. اینها اساساً همان طراحی وب واکنشگرا هستند - اهداف این است که اطمینان حاصل شود که وبسایتها در دستگاههایی با ویژگیهای فیزیکی مختلف (اندازه صفحه نمایش، وضوح تصویر) از نظر چیدمان، محتوا (متن و رسانه) و عملکرد به خوبی کار میکنند.
تفاوت عمدتاً مربوط به دستگاههای درگیر و فناوریهای موجود برای ایجاد راهحلها است:
ما قبلاً در مورد دسکتاپ یا موبایل صحبت میکردیم، اما اکنون انواع مختلفی از دستگاهها مانند دسکتاپ، لپتاپ، موبایل، تبلت، ساعت و غیره در دسترس هستند. به جای اینکه برای چند اندازه صفحه نمایش مختلف طراحی کنیم، اکنون باید سایتها را به صورت دفاعی طراحی کنیم تا برای اندازهها و وضوح صفحه نمایشهای رایج، به علاوه موارد ناشناخته، طراحی شوند.
دستگاههای تلفن همراه از نظر CPU/GPU و پهنای باند موجود، کم مصرف بودند. برخی از آنها از CSS یا حتی HTML پشتیبانی نمیکردند و در نتیجه، انجام بررسی مرورگر سمت سرور برای تعیین نوع دستگاه/مرورگر قبل از ارائه سایتی که دستگاه قادر به پاسخگویی به آن باشد، رایج بود. دستگاههای تلفن همراه اغلب تجربیات بسیار ساده و ابتدایی را ارائه میدادند، زیرا تنها چیزی بود که میتوانستند از عهده آن برآیند. این روزها، دستگاههای تلفن همراه قادر به مدیریت همان فناوریهای رایانههای رومیزی هستند، بنابراین چنین تکنیکهایی کمتر رایج هستند.
شما هنوز هم باید از تکنیکهای مورد بحث در این مقاله برای ارائه یک تجربه مناسب به کاربران تلفن همراه استفاده کنید، زیرا هنوز محدودیتهایی مانند عمر باتری و پهنای باند وجود دارد که باید نگران آنها باشید.
تجربه کاربری هنوز یک نگرانی است. به عنوان مثال، یک کاربر تلفن همراه یک سایت مسافرتی ممکن است فقط بخواهد زمان پرواز و اطلاعات تأخیر را بررسی کند و با یک کره متحرک سهبعدی که مسیرهای پرواز و تاریخچه شرکت شما را نشان میدهد، مواجه نشود.
فناوریهای مدرن برای ایجاد تجربیات واکنشگرا بسیار بهتر هستند. به عنوان مثال، فناوریهای تصاویر/رسانههای واکنشگرا اکنون امکان ارائه رسانههای مناسب به دستگاههای مختلف را بدون نیاز به تکیه بر تکنیکهایی مانند بررسی سمت سرور فراهم میکنند.
HTML اساساً واکنشگرا یا سیال است. اگر یک صفحه وب فقط شامل HTML و بدون CSS ایجاد کنید و اندازه پنجره را تغییر دهید، مرورگر به طور خودکار متن را متناسب با نمای صفحه تغییر میدهد.
در حالی که رفتار واکنشگرای پیشفرض ممکن است به نظر برسد که نیازی به راهحل نیست، خواندن خطوط طولانی متن که به صورت تمام صفحه در یک مانیتور عریض نمایش داده میشوند، میتواند دشوار باشد. این مشکل را میتوان با CSS حل کرد، به عنوان مثال با ایجاد ستونهای باریک برای محدود کردن طول خط. با این حال، این میتواند مشکلات جدیدی را برای کاربرانی که پنجره مرورگر خود را باریک میکنند یا سایت را در دستگاه تلفن همراه مشاهده میکنند، ایجاد کند - ستونها فشرده به نظر میرسند و خواندن آنها دشوارتر میشود.
ایجاد یک صفحه وب غیرقابل تغییر اندازه با تنظیم عرض ثابت نیز کارساز نیست؛ این امر منجر به نوارهای پیمایش در دستگاههای باریک و فضای خالی بیش از حد در صفحه نمایشهای عریض میشود.
طراحی وب واکنشگرا یا RWD، یک رویکرد طراحی است که طیف کاملی از دستگاهها و اندازههای موجود را در نظر میگیرد و امکان تطبیق خودکار با صفحه نمایش را فراهم میکند، چه محتوا در تبلت، تلفن، تلویزیون یا ساعت مشاهده شود.
طراحی وب واکنشگرا یک فناوری جداگانه نیست - بلکه یک رویکرد است. این اصطلاحی است که برای توصیف مجموعهای از بهترین شیوههای مورد استفاده برای ایجاد یک طرحبندی استفاده میشود که میتواند به هر دستگاهی که برای مشاهده محتوا استفاده میشود، پاسخ دهد.
اصطلاح طراحی واکنشگرا، که توسط Ethan Marcotte در سال ۲۰۱۰ ابداع شد، استفاده از شبکههای سیال، تصاویر سیال و پرسوجوهای رسانهای را برای ایجاد محتوای واکنشگرا توصیف میکرد.
در آن زمان، توصیه این بود که از CSS float برای طرحبندی و پرسوجوهای رسانهای برای پرسوجو از عرض مرورگر استفاده شود و طرحبندیهایی برای نقاط شکست مختلف ایجاد شود. تصاویر سیال طوری تنظیم میشوند که از عرض ظرف خود تجاوز نکنند. ویژگی حداکثر عرض آنها روی ۱۰۰٪ تنظیم شده است. تصاویر سیال وقتی ستون حاوی آنها باریک میشود، کوچک میشوند، اما وقتی ستون بزرگ میشود، از اندازه ذاتی خود بزرگتر نمیشوند. این امر به یک تصویر اجازه میدهد تا متناسب با محتوای خود کوچک شود، نه اینکه از آن سرریز شود، اما اگر ظرف از تصویر پهنتر شود، بزرگتر نمیشود و پیکسلی نمیشود.
روشهای مدرن طرحبندی CSS ذاتاً واکنشگرا هستند و از زمان انتشار مقاله مارکوت، ما ویژگیهای زیادی را در پلتفرم وب تعبیه کردهایم تا طراحی سایتهای واکنشگرا را آسانتر کنیم.
ادامه این مقاله ویژگیهای مختلف پلتفرم وب را که ممکن است هنگام ایجاد یک سایت واکنشگرا بخواهید از آنها استفاده کنید، توضیح خواهد داد.
کوئریهای رسانهای به ما این امکان را میدهند که مجموعهای از آزمایشها را اجرا کنیم (برای مثال، اینکه آیا صفحه نمایش کاربر از عرض یا وضوح خاصی بزرگتر است یا خیر) و CSS را به صورت انتخابی اعمال کنیم تا صفحه را متناسب با نیازهای کاربر سبکدهی کنیم.
به عنوان مثال، کوئری رسانهای زیر بررسی میکند که آیا صفحه وب فعلی به عنوان رسانه صفحه نمایش (بنابراین یک سند چاپ شده نیست) نمایش داده میشود و آیا عرض صفحه نمایش حداقل 80 rem است یا خیر. قانون فقط در صورتی اعمال میشود که این دو مورد درست باشند.
میتوانید چندین مدیا کوئری را در یک استایلشیت اضافه کنید و کل طرحبندی یا بخشهایی از آن را طوری تنظیم کنید که به بهترین شکل با اندازههای مختلف صفحه نمایش سازگار باشد. نقاطی که یک مدیا کوئری معرفی میشود و طرحبندی تغییر میکند، به عنوان نقاط شکست شناخته میشوند.
یک رویکرد رایج هنگام استفاده از مدیا کوئریها، ایجاد یک طرحبندی تک ستونی ساده برای دستگاههای با صفحه نمایش باریک (به عنوان مثال، تلفنهای همراه) است، سپس وجود صفحات نمایش عریضتر را بررسی کنید و وقتی مطمئن شدید که عرض صفحه نمایش کافی برای مدیریت آن دارید، یک طرحبندی چند ستونی پیادهسازی کنید. طراحی برای موبایل اول به عنوان طراحی موبایل اول شناخته میشود.
در صورت استفاده از نقاط شکست، بهترین شیوهها تعریف نقاط شکست مدیا کوئری را با واحدهای نسبی به جای اندازههای مطلق یک دستگاه خاص تشویق میکنند.
رویکردهای مختلفی برای سبکهای تعریف شده در یک بلوک مدیا کوئری وجود دارد؛ از استفاده از مدیا کوئریها گرفته تا استایلشیتهای بر اساس محدوده اندازه مرورگر گرفته تا فقط شامل متغیرهای ویژگیهای سفارشی برای ذخیره مقادیر مرتبط با هر نقطه شکست.
مدیا کوئریها میتوانند به RWD کمک کنند، اما الزامی نیستند. شبکههای انعطافپذیر، واحدهای نسبی و مقادیر واحد حداقل و حداکثر را میتوان بدون مدیا کوئریها استفاده کرد.
فناوریهای طرحبندی واکنشگرا
سایتهای واکنشگرا بر اساس شبکههای انعطافپذیر ساخته شدهاند، به این معنی که نیازی نیست هر اندازه دستگاه ممکن را با طرحبندیهای پیکسلی کامل هدف قرار دهید.
با استفاده از یک شبکه انعطافپذیر، میتوانید یک ویژگی را تغییر دهید یا یک نقطه شکست اضافه کنید و طراحی را در نقطهای که محتوا شروع به بد به نظر رسیدن میکند، تغییر دهید. به عنوان مثال، برای اطمینان از اینکه طول خط با افزایش اندازه صفحه نمایش به طور غیرقابل خواندنی طولانی نمیشود، میتوانید از ستونها استفاده کنید. اگر یک کادر با دو کلمه در هر خط فشرده شود، زیرا باریک میشود، میتوانید یک نقطه شکست تنظیم کنید.
چندین روش طرحبندی - از جمله Flexbox و CSS Grid - به طور پیشفرض واکنشگرا هستند. همه آنها فرض میکنند که شما در حال تلاش برای ایجاد یک شبکه انعطافپذیر هستید و راههای آسانتری برای انجام این کار به شما ارائه میدهند.
در flexbox، آیتمهای flex کوچک یا بزرگ میشوند و فضای بین آیتمها را بر اساس فضای موجود در container خود توزیع میکنند. با تغییر مقادیر flex-grow و flex-shrink میتوانید نحوه رفتار آیتمها را هنگام مواجهه با فضای بیشتر یا کمتر در اطرافشان مشخص کنید.
در مثال زیر، هر یک از آیتمهای flex، با استفاده از اختصار flex: 1 که قبلاً مورد بحث قرار گرفت، فضای مساوی را در container flex اشغال میکنند (به Flexbox: اندازهبندی انعطافپذیر آیتمهای flex مراجعه کنید).
در اینجا نحوه استفاده از flexbox به همراه یک media query برای طراحی واکنشگرا را مشاهده میکنید.
اندازه پنجره مرورگر خود را تغییر دهید. وقتی اندازه مثال بالا از آستانه عرض ۶۰۰ پیکسل عبور کند، طرح بین طرح تک ستونی و دو ستونی تغییر خواهد کرد.
در طرحبندی شبکه CSS، واحد fr امکان توزیع فضای موجود در مسیرهای شبکه را فراهم میکند. مثال بعدی یک کانتینر شبکه با سه مسیر با اندازه 1fr ایجاد میکند. این کار سه مسیر ستونی ایجاد میکند که هر کدام یک بخش از فضای موجود در کانتینر را اشغال میکنند. شما قبلاً این رویکرد را بررسی کردهاید (برای خلاصه به شبکههای انعطافپذیر با واحد fr مراجعه کنید).
در اینجا نحوه استفاده از طرحبندی شبکهای با یک media query برای طراحی واکنشگرا آورده شده است.
دوباره، سعی کنید اندازه پنجره مرورگر خود را تغییر دهید - باید تغییر طرح نمونه را در آستانه عرض ۶۰۰ پیکسل، مانند مثال قبلی، مشاهده کنید.
تصاویر/رسانههای واکنشگرا
برای اطمینان از اینکه رسانه هرگز بزرگتر از ظرف پاسخگو خود نباشد، میتوان از رویکرد زیر استفاده کرد:
این کار عناصر رسانهای را مقیاسبندی میکند تا اطمینان حاصل شود که هرگز از کانتینرهای خود سرریز نمیشوند.
استفاده از یک تصویر بزرگ و کوچک کردن آن برای تناسب با دستگاههای کوچک، با دانلود تصاویری بزرگتر از حد نیاز، پهنای باند را هدر میدهد. همچنین میتواند ظاهر بدی داشته باشد - به عنوان مثال، یک تصویر افقی ممکن است در یک مانیتور صفحه عریض خوب به نظر برسد، اما ممکن است در یک دستگاه تلفن همراه به سختی دیده شود، که برای یک تصویر عمودی مناسبتر است. چنین مشکلاتی را میتوان با استفاده از عنصر و ویژگیهای srcset و sizes حل کرد. اینها ویژگیهای پیشرفتهای هستند که خارج از محدوده این دوره هستند، اما میتوانید یک راهنمای دقیق در تصاویر واکنشگرا پیدا کنید.
نکات مفید دیگر:
- همیشه مطمئن شوید که از یک فرمت تصویر مناسب برای تصاویر وبسایت خود (مانند PNG یا JPG) استفاده میکنید و قبل از قرار دادن آنها در وبسایت خود، با استفاده از یک ویرایشگر گرافیکی، اندازه فایل را بهینه کنید.
- میتوانید از ویژگیهای CSS مانند گرادیانها و سایهها برای پیادهسازی جلوههای بصری بدون استفاده از تصاویر استفاده کنید.
- میتوانید از کوئریهای رسانهای درون ویژگی رسانه در عناصر که درون عناصر قرار دارند، استفاده کنید تا فایلهای ویدیویی/صوتی را متناسب با دستگاههای مختلف (ویدئو/صوتی واکنشگرا) ارائه دهید.
تایپوگرافی واکنشگرا به تغییر اندازه فونت در media query یا استفاده از واحدهای نمایشگر برای انعکاس مقادیر کمتر یا بیشتر از فضای صفحه نمایش اشاره دارد.
استفاده از مدیا کوئریها برای تایپوگرافی واکنشگرا
در این مثال، میخواهیم اندازه عنوان سطح ۱ را روی ۴rem تنظیم کنیم، به این معنی که چهار برابر اندازه فونت پایه ما خواهد بود. این یک عنوان واقعاً بزرگ است! ما فقط میخواهیم این عنوان بزرگ در صفحه نمایشهای بزرگتر نمایش داده شود، بنابراین ابتدا اندازه کوچکتر ۲rem را به عنوان میدهیم، سپس اگر میدانیم که کاربر عرض صفحه نمایش حداقل ۱۲۰۰ پیکسل دارد، از کوئریهای رسانهای برای بازنویسی آن با اندازه بزرگتر استفاده میکنیم.
مثال بعدی نسخه اصلاحشدهای از مثال شبکه واکنشگرای قبلی ما است که شامل یک عنوان واکنشگرا با استفاده از روش ذکر شده است. در موبایل، عنوان کوچکتر است، اما در دسکتاپ، اندازه عنوان بزرگتر است:
مانند مثالهای قبلی، سعی کنید عرض پنجره مرورگر را تغییر دهید و توجه کنید که چگونه نه تنها طرحبندی در آستانه عرض ۶۰۰ پیکسل تغییر میکند، بلکه اندازه عنوان نیز تغییر میکند.
همانطور که این رویکرد به تایپوگرافی نشان میدهد، نیازی نیست که کوئریهای رسانهای را فقط به تغییر طرحبندی صفحه محدود کنید. میتوان از آنها برای تغییر هر عنصری استفاده کرد تا آن را در اندازههای مختلف صفحه نمایش، قابل استفادهتر یا جذابتر کند.
استفاده از واحدهای viewport برای تایپوگرافی واکنشگرا
واحدهای Viewport vw همچنین میتوانند برای فعال کردن تایپوگرافی واکنشگرا، بدون نیاز به تنظیم نقاط توقف با کوئریهای رسانهای، مورد استفاده قرار گیرند. 1vw برابر با یک درصد از عرض Viewport است، به این معنی که اگر اندازه فونت خود را با استفاده از vw تنظیم کنید، همیشه به اندازه Viewport مربوط خواهد بود.
مشکل انجام کار بالا این است که کاربر توانایی بزرگنمایی هر متنی که با واحد vw تنظیم شده باشد را از دست میدهد، زیرا آن متن همیشه به اندازهی viewport مربوط میشود. بنابراین هرگز نباید متن را فقط با استفاده از واحدهای viewport تنظیم کنید.
یک راه حل وجود دارد و آن استفاده از است. اگر واحد vw را به یک مجموعه مقدار با استفاده از یک اندازهی ثابت مانند ems یا rems اضافه کنید، متن همچنان قابل بزرگنمایی خواهد بود. اساساً، واحد vw به آن مقدار بزرگنمایی شده اضافه میشود:
این یعنی ما فقط باید یک بار اندازه فونت را برای عنوان مشخص کنیم، نه اینکه آن را برای موبایل تنظیم کنیم و در کوئریهای رسانهای دوباره تعریف کنیم. سپس با افزایش اندازه نمایشگر، فونت به تدریج افزایش مییابد.
مانند قبل، اندازه پنجره مرورگر را تغییر دهید و توجه کنید که این بار چگونه اندازه عنوان با تغییر عرض به تدریج افزایش مییابد.
اگر به سورس HTML یک صفحه واکنشگرا نگاه کنید، معمولاً تگ زیر را در سند مشاهده خواهید کرد.
این متا تگ viewport به مرورگرهای موبایل میگوید که باید عرض viewport را با عرض دستگاه تنظیم کنند و سند را به ۱۰۰٪ اندازه مورد نظر خود مقیاسبندی کنند، که این کار سند را در اندازه بهینه شده برای موبایل که مد نظر شماست نشان میدهد.
چرا این مورد نیاز است؟ زیرا مرورگرهای موبایل تمایل دارند در مورد عرض viewport خود دروغ بگویند.
این متا تگ وجود دارد زیرا وقتی گوشیهای هوشمند برای اولین بار از راه رسیدند، اکثر سایتها برای موبایل بهینه نشده بودند. بنابراین، مرورگر موبایل عرض viewport را روی ۹۸۰ پیکسل تنظیم میکرد، صفحه را با آن عرض رندر میکرد و نتیجه را به عنوان یک نسخه کوچک شده از طرح دسکتاپ نشان میداد. کاربران میتوانستند بزرگنمایی کنند و در اطراف وبسایت بچرخند تا بخشهایی را که به آنها علاقه داشتند مشاهده کنند، اما ظاهر بدی داشت.
با تنظیم ، شما پیشفرض دستگاه موبایل، مانند عرض پیشفرض آیفون = ۹۸۰ پیکسل، را با عرض واقعی دستگاه لغو میکنید. بدون آن، طراحی واکنشگرای شما با نقاط شکست و کوئریهای رسانهای ممکن است در مرورگرهای موبایل آنطور که در نظر گرفته شده است، کار نکند. اگر طرحبندی صفحه نمایش باریکی دارید که با عرض ۴۸۰ پیکسل یا کمتر در نمای دید ظاهر میشود، اما دستگاه میگوید که عرض آن ۹۸۰ پیکسل است، آن کاربر طرحبندی صفحه نمایش باریک شما را نخواهد دید.
بنابراین، همیشه باید متا تگ viewport را در سر اسناد خود قرار دهید.
گزینههای دیگری نیز وجود دارد که میتوانید درون ویژگی content متا تگ viewport قرار دهید.
