CSS احساسی است: پرسش های رسانه ای – سازگاری با تغییر

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

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

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

اینها فقط سؤالات فنی نیستند – آنها اساساً همان چیزی هستند که ما هر روز در طول زندگی از خود می پرسیم.

صفحه نمایش های مختلف، نیازهای متفاوت

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

برای فعال کردن تغییر اندازه در صفحه، تب CSS را تغییر دهید

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

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

نقاط شکست در واقع نقطه عطف هستند

در کد ما آنها را نقاط شکست می نامیم. اما صادقانه؟ این به نظر من کمی منفی است. اینها نقاطی نیستند که در آن چیزها شکسته می شوند – آنها نقاطی هستند که در آن چیزها تکامل می یابند.

@media (min-width: 1024px) {
/* There is room for more: 1024px and above */
  .document {
    display: grid; /* Re-Strategize */
    grid-template-columns: repeat(3, 1fr); /* Spread out and explore */
    gap: 2rem; /* Allow some breathing room */
  }
}

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

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

هنر پیشرفت پیشرو

در اینجا یک مفهوم است که من بسیار دوست دارم – ارتقاء پیشرونده.
در کد، به شکل زیر است:

/* Start with your core styles */
.experience {
  margin: 1rem;
}

/* Add enhancements when possible */
@media (prefers-reduced-motion: no-preference) {
  .experience {
    transition: all 0.3s ease;
  }
}

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

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

کدی که با آن زندگی می کنیم

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

@media (max-width: 768px) {
  .navigation {
    transform: translateX(-100%);
    position: fixed;
  }
}

به اون کد نگاه کن واقعا بهش نگاه کن شما فقط یک نمای کوچکتر را مدیریت نمی کنید، بلکه در حال کدگذاری انطباق در کار خود هستید. هر پرسش رسانه ای یک وعده کوچک است: “وقتی اوضاع تغییر کرد، من آماده خواهم بود.”

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

• زمینه های مختلف نیازمند رویکردهای متفاوتی هستند
• تغییر نه تنها اجتناب ناپذیر بلکه طبیعی است
• انعطاف پذیری قدرت است
• سازگاری به معنای از دست دادن هدف اصلی شما نیست، بلکه به معنای یافتن راه های جدید برای بیان آن است

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

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

هفته آینده در “CSS احساسی است”، ما به “احساسات پنهان انیمیشن های CSS” می پردازیم – جایی که چگونگی چگونگی آن را بررسی خواهیم کرد. @keyframes منعکس کننده ریتم های زندگی پس می بینمت!

افکار و تجربیات خود را در مورد سازگاری – هم در CSS و هم در زندگی – در نظرات زیر به اشتراک بگذارید.

بله! برای طراحی بنر از CodePen استفاده شده است

درباره نویسنده

Emmanuel Imolorhe (EIO) یک مهندس Frontend است که علاقه زیادی به CSS دارد.
ویدیوهای CSS من را در YouTube بررسی کنید.

با من ارتباط برقرار کن

توییتر • Bluesky • Mastodon • LinkedIn • وب سایت

آیا این پست به شما کمک کرد؟ افکاری برای به اشتراک گذاشتن دارید؟ بیایید گفتگو را در نظرات زیر ادامه دهیم!