ساخت اجزای زندگی واقعی: حباب چت مسنجر فیس بوک

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

وقتی وارد پیام‌رسانی می‌شوید، جزئیات زیادی برای پرداختن به آن وجود دارد، مخصوصاً برای چیزی به بزرگی فیس‌بوک. در این مقاله، من به شما نشان خواهم داد که چگونه مؤلفه حباب پیام با تمام انواع آن و همچنین چند اکتشاف جالب ایجاد شده است.

مقدمه

برای ارائه زمینه بهتر، مولفه حباب چت مانند شکل زیر است.

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

ساختن HTML و CSS برای چنین مؤلفه ای یک کار چالش برانگیز (و بسیار جالب) است. در این مورد، مؤلفه چت باید پویا باشد تا بتواند انواع محتوا، آمار، پشتیبانی دو زبانه و موضوعات مختلف را مدیریت کند.

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

آناتومی

من آن را “آناتومی” نامیدم زیرا از جدا کردن رابط کاربری لذت می بردم. من به معنای واقعی کلمه خودم را در یک آزمایشگاه تصور کردم که به یک میکروسکوپ نگاه می کنم تا ببینم چگونه ساخته شده است.

ابتدا می خواهم به نکته مهمی اشاره کنم. ساختار بین پیامی که ارسال کرده اید و پیامی که دریافت کرده اید متفاوت است.

اگر از طرح بندی LTR (از چپ به راست) مانند انگلیسی استفاده می کنید، شما همان حباب آبی هستید. فردی که با او صحبت می کنید همان خاکستری است.

در صورتی که طرح مانند عربی RTL (راست به چپ) باشد، برعکس است. شکل زیر را در نظر بگیرید:

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

حباب چت با موارد زیر مطابقت دارد:

• ظرف بیرونی که دارای سه فرزند است: وضعیت، پیام و آواتار.
• یک ظرف داخلی که دارای دو نسل است: خود حباب چت، منوی اکشن و یک عنصر تقسیم کننده.

برای روشن‌تر شدن موضوع، در اینجا همان شکل بالا است، اما با ظروف جدا شده.

ممکن است در مورد آواتار تعجب کنید که چرا اینقدر کوچک است؟ و آواتار کجاست؟ این سوال خوبی است.

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

عناصر اول و آخر (آواتار و وضعیت) بسته به اینکه چه کسی پیام را ارسال می کند، برعکس نمی شوند. آنها فقط در صورتی معکوس می شوند که جهت زبان تغییر کند (به عنوان مثال: LTR در مقابل RTL). در اینجا چند یادداشت وجود دارد:

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

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

با این کار، در اینجا شکلی وجود دارد که نشان می‌دهد محفظه‌های پیام بیرونی و داخلی در طرح‌بندی‌های LTR در مقابل RTL چگونه هستند.

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

HTML و CSS اولیه

در اینجا HTML اصلی برای پیام به نظر می رسد.

div class="message">
  div class="message__outer">
    div class="message__avatar">div>
    div class="message__inner">
      div class="message__bubble">div>
      div class="message__actions">div>
      div class="message__spacer">div>
    div>
    div class="message__status">div>
  div>
div>

و CSS اصلی:

.message__outer {
  display: flex;
}

.message__inner {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
}

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

با این کار می‌توانیم به طراحی چیدمان داخلی‌ها بپردازیم. ما پیام، منوی عمل و عنصر جداکننده را داریم.

.message__actions {
  width: 67px;
  padding-right: 5px;
}

.message__spacer {
  flex: 1;
}

فکر می کنم دلایل اضافه کردن یک عرض ثابت به منوی اکشن عبارتند از:

• برای جلوگیری از جابجایی طرح، مکانی را برای آن نگه دارید.
• برای داشتن کنترل بهتر بر روی چیدمان داخلی. به عنوان مثال، حباب چت باید دارای یک باشد max-width. ممکن است لازم باشد عرض منوی اکشن را از آن کم کنیم.

برای اطمینان از اینکه چیزها در اندازه های کوچکتر شکسته نمی شوند، باید موارد زیر را رعایت کنیم:

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

.message__bubble {
  max-width: calc(100% - 67px);
  overflow-wrap: break-word;
}

.message__actions {
  flex-shrink: 0;
}

در مرحله بعد، من به شکل دادن به فیلدهای وضعیت و آواتار می پردازم (آنها فرزندان مستقیم ظرف بیرونی هستند).

کار با محتوای ترکیبی

شایان ذکر است که حباب پیام می تواند با استفاده از محتوای مختلط مدیریت کند dir=auto ویژگی HTML.

div dir="auto">div>

اگر متن اول به یک زبان RTL (به عنوان مثال: عربی) نوشته شده باشد، متن از راست به چپ خوانده می شود، حتی اگر متن LTR را بعد از آن وارد کنید.

اگر متن را به زبان LTR وارد کنید (مثلاً: انگلیسی)، متن از چپ به راست خوانده می شود.

چیدمان منطقه وضعیت

عنصر وضعیت پیام یک بسته بندی است که می تواند شامل نشان های وضعیت مختلف باشد. بیایید در مقیاس بزرگتر به آن نگاه کنیم.

این کانتینر می تواند موارد وضعیت متفاوتی مانند ارسال، تحویل و مشاهده داشته باشد. آنها را در زیر بررسی کنید:

در اینجا نگاهی دقیق به نشانه گذاری داریم:

div class="message__status">
  span class="avatar">span>
div>

ظرف حالت از flexbox برای تراز کردن عنصر فرزند در پایین استفاده می کند. توجه کنید که flex-direction ارزش است column.

.message__status {
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

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

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

در اینجا شکلی است که وضعیت ها را در عمل نشان می دهد:

فرمت کردن آواتار فرستنده

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

div class="message__avatar">
  img class="avatar" src="ahmad.jpg" alt="Photo of Ahmad Shadeed" />
div>

.message__avatar {
  padding-left: 6px;
  padding-right: 8px;
}

هنگامی که بسته بندی آواتار خالی است، عرض آن خواهد بود 14px (مجموع 6px + 8px مقادیر padding).

در صورتی که شخصی پیامی را مشاهده کند، آواتار در اندازه 28*28 وجود خواهد داشت.

برای روشن‌تر شدن آن، در اینجا مقایسه‌ای بین پوسته آواتار از نقطه نظر وجود دارد شما و در فرستنده.

اقداماتی برای شکل دادن به پیام ها

هر پیام می‌تواند مجموعه‌ای از اقداماتی داشته باشد که در شناور ظاهر می‌شوند مانند:

• با شکلک ها واکنش نشان دهید
• پاسخ دادن / نقل قول یک پیام
• اشتراک گذاری (برای تصاویر و فیلم ها)
• منوی بیشتر (نقطه دار)

در اینجا چند نکته در مورد این منو آورده شده است:

• بالشتک در سمت راست، در جعبه وجود دارد شما پیام را ارسال کنید در غیر این صورت، پد در سمت چپ است.
• برای معکوس است شما با flex-direction: row-reverseو سفارش پیش فرض برای فرستنده پیام

یکی از چیزهای خاص که من را خوشحال می کند استفاده زیاد از فلکس باکس است. من واقعاً این را دوست دارم!

در اینجا شکلی وجود دارد که نشان می دهد چگونه منوی عملکرد بسته به جهت پیام (شما در مقابل فرستنده) باز می گردد.

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

div class="message__actions">
  ul class="menu">ul>
div>

.message__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 67px;
  padding-right: 5px;
}

چرا این کار می کند؟ وقتی پیام دارای متن یا تصویر طولانی است، .message__actions عنصر کشیده می شود تا ارتفاع والد خود را پر کند. این رفتار پیش‌فرض flexbox است و می‌توانیم از آن برای وسط منو به صورت عمودی استفاده کنیم.

حالا که حباب اصلی چت را توضیح دادم، بیایید به انواع آن برویم.

تعداد زیادی حباب

اگر همزمان چندین حباب بفرستیم، سه حالت گردی متفاوت خواهیم داشت که با هم تفاوت دارند شما و در فرستنده (کسی که با او صحبت می کنید).

علاوه بر این، آنها بر اساس جهت صفحه (LTR در مقابل RTL) ورق خواهند زد. آرزوی حمایت برای border-radius خواص منطقی برای استفاده به اندازه کافی خوب است. مقادیر بولی برای border-radius پشتیبانی در کروم نسخه 89 (منتشر شده در 1 مارس 2021).

اگر پشتیبانی وجود داشت، از آنها به صورت زیر استفاده می شد.

.message--first .message__bubble {
  border-end-end-radius: 4px;
}


.message--middle .message__bubble {
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
}


.message--last .message__bubble {
  border-start-end-radius: 4px;
}

می دانم، مقادیر دوگانه مانند end-end ممکن است در ابتدا گیج کننده باشد، اما من سعی می کنم آنها را در شکل بعدی توضیح دهم. ما دو محور (بلوک و خطی) داریم که هر کدام دارای start و end ارزش ها

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

اگر می خواهید در مورد ویژگی های بولی CSS بیشتر بدانید، در اینجا مقاله ای است که مدتی قبل نوشتم.

کار با تصاویر

در نگاه اول، ممکن است فکر کنید که کار مورد نیاز برای رسیدگی به اندازه های مختلف تصویر و نسبت ابعاد، کار آسانی است. ممکن است فقط نیاز به اضافه کردن داشته باشید max-width: 100% و آن را یک روز نامید، درست است؟ این مورد برای فیس بوک نیست.

هنگامی که کاربر یک تصویر را آپلود می کند، عرض آن به عنوان CSS درون خطی اضافه می شود و یک لایک نیز وجود دارد padding-bottom: 56.66% برای مقابله با پاسخ تصویر (هک padding).

a class="image" href="#">
  div class="image__main">
    div class="image__element" style="width: 348.259px; ">
      div
        class="image__aspectRatio"
        style="padding-bottom: 57.4286%"
      >
        div class="image__wrapper">
          img src="assets/thumb-1.png" alt="" />
        div>
      div>
    div>
  div>
a>

.image {
  display: block;
  border-radius: 18px;
  border: 1px solid #0006;
  overflow: hidden;
}

.image__main {
  max-width: 480px;
}

.image__element {
  max-width: 100%;
  position: relative;
}

.image__aspectRatio {
  position: relative;
}

.image__wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image__wrapper img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  width: 100%;
  height: 100%;
}

در اینجا قوانینی وجود دارد که هر تصویر باید از آن پیروی کند:

• حداکثر عرض است 480px
• حداکثر ارتفاع است 200px
• هنگام تغییر اندازه، تصویر باید در همان نسبت تصویر باقی بماند
• اگر تصویر کمتر از حداکثر مقادیر باشد، آن را همانطور که هست نمایش می دهیم

نکته مهم در مورد نحوه اجرای این تیم این است که نسبت تصویر بر اساس تصویری که استفاده می شود، در لحظه تولید می شود.

علاوه بر این، توجه به این نکته مهم است که flexbox عناصر فلکس را زیر حداقل اندازه محتوای آنها جمع نمی کند. این بدان معنی است که اگر اندازه مرورگر را به یک عرض معین تغییر دهید، عنصر انعطاف پذیر کمتر از حداقل اندازه محتوای خود کوچک نمی شود. برای رفع این مشکل باید اضافه کنیم min-width: 0.

در کد آزمایشی من، عنصر flex فرزند مستقیمی از آن است message__outer، که است message__row در مورد ما

.message__row {
  min-width: 0;
  
}

وقتی همه چیز طبق برنامه کار می کند باید به این شکل باشد.

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

کار با چندین تصویر

اگر چندین تصویر ارسال کنید، نسبت آنها رعایت نمی شود. در عوض، هر تصویر در یک مربع و object-fit این کار جادویی برای جلوگیری از تاب برداشتن یا کشش آنها انجام خواهد داد.

.gallery {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  
  margin: -2px;
}

.gallery__item {
  
  padding: 2;
}

.gallery__item--third {
  flex: 33.33%;
}

.gallery__item--half {
  flex: 50%;
}

این چیزی است که اتفاق می افتد:

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

من می خواهم بر استفاده از padding: 2px برای فاصله بین هر عنصر در این مورد، حتی مفیدتر است زیرا در هر دو جهت LTR و RTL کار می کند.

اگر می خواهید درباره فاصله گذاری در CSS اطلاعات بیشتری کسب کنید، در اینجا مقاله ای است که مدتی قبل نوشتم.

نقل قول یک پیام

اطلاعیه پیشنهاد شامل سه بخش اصلی است:

• عنوان نشان می دهد که چه کسی به چه کسی پاسخ داد (مثلاً: شما به احمد پاسخ دادید)
• پیام نقل شده با سبکی متفاوت
• خود نقل قول

بیایید نگاهی دقیق تر به آناتومی پیام نقل شده بیندازیم.

قسمت اول ساده است. برای پیام نقل‌قول‌شده، بسیار شبیه به مؤلفه چت حبابی است، اما بدون عناصری مانند اقدامات، وضعیت … و غیره.

پیام (به رنگ خاکستری) بزرگ است padding-bottom همراه با یک منفی margin-bottom مقدار برای انتقال پیام نقل قول به بالا. در نهایت، یک شعاع صفر در گوشه پایین سمت راست وجود دارد.

.message--washed {
  border-bottom-right-radius: 0;
  padding: 8px 12px 9px;
  margin-bottom: -17px;
}

و بخشی که padding دارد خود متن است.

.message--washed__text {
  padding-bottom: 12px;
}

در هنگام استناد به تصویر نیز همین امر صادق است. شبیه شکل زیر است:

و همچنین نقل یک پیوست (مانند پیام صوتی یا ویدیو):

واکنش ها

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

شکل زیر را در نظر بگیرید.

div class="message">
  div class="message__outer">
    div class="message__avatar">div>
    div class="message__inner">
      div class="msg-bubble-wrapper">
        div class="message__bubble">div>
        div class="reaction">
          div class="reaction__content">
            img src="assets/heart.png" alt="" />
            img src="assets/smile.png" alt="" />
            span class="count">2span>
          div>
        div>
      div>
      div class="message__actions">div>
      div class="message__spacer">div>
    div>
    div class="message__status">div>
  div>
div>

عنصری که بالا می رود محتوای پاسخ است نه والد.

.reaction__content {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  padding: 1px 1px 1px 3px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-7px);
}

همچنین برای قرار دادن عناصر در ابتدای والد خود، باید آنها را با flexbox والد تراز کنیم. این باید برای طرح‌بندی‌های RTL (راست به چپ) برعکس باشد.

.msg-bubble-wrapper.with-reaction {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

برای اینکه آواتار در یک راستا با انتهای پیام باشد، یک div با ارتفاع مشاهده کردم 18px به عنوان یک فاصله دهنده عمل کند.

div class="message__status">
  img src="avatar.jpg" alt="" />
  div style="height: 18px;">div>
div>

یا این اگر برای پیام فرستنده باشد.

div class="message__avatar">
  img src="avatar.jpg" alt="" />
  div style="height: 18px;">div>
div>

علامت گذاری لیستی از پیام ها

برچسب گذاری برای لیست پیام ها جالب است. یک div با وجود دارد role=grid و aria-label="Messages in conversation with Ahmad Shadeed".

در این، هر پیامی دارد role=rowو در هر خط پیام عنصر اصلی با وجود دارد gridcell.

div
  class="mw_message_list"
  role="grid"
  aria-label="Messages in conversation with Ahmad Shadeed"
>
  div role="row">
    div role="gridcell" tabindex="0">div>
  div>
  div role="row">
    div role="gridcell" tabindex="0">div>
  div>
  
div>

ما هنوز تمام نشده ایم. در هر پیامی یک وجود دارد بصری پنهان موردی که می گوید “تو فرستادی” یا “فرستاده”بسته به اینکه چه کسی پیام را ارسال کرده است.

div role="row">
  div role="gridcell" tabindex="0">
    h4 class="sr-only">You senth4>
    
  div>
div>

چیزی که در اینجا متوجه شدم این است که یکی از ویژگی های CSS که برای پنهان کردن بصری متن استفاده می شود، این است clip-path: inset(50%).

در اینجا خواص کامل استفاده شده است:

.sr-only {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  clip-path: inset(50%);
}

فاصله بین پیام ها

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

هر خط پیام دارای یک جداکننده s خواهد بود 2px ارتفاع، یا 7px، یا در برخی موارد هر دو. در شکل بعدی عناصر صورتی هستند 7px اسپیسرها، و رنگ زرد است 2px جداکننده ها

ظرف سطح بالای هر پیام یک ظرف انعطاف پذیر است column direction.

برای مثال، در اینجا اسکرین شات از یک پیام نقل قول آمده است. هر دو اسپیسر دارد. همچنین، والد سطح بالا یک ظرف فلکس باکس است flex-direction: column.

تقسیم کننده ها / جداکننده ها

جداکننده می تواند متن یا زمان باشد. من روی زمان بندی مقاله تمرکز خواهم کرد.

وقتی بعد از مدتی با کسی چت می‌کنید، متوجه می‌شوید که یک عنصر متمرکز با روز و ساعت وجود دارد.

نشانه گذاری برای روز و ساعت جالب است. اینجاست:

h2>
  div class="sr-only">October 28 at 6:12 PMdiv>
  div aria-hidden="true">Thu 6:12 PMdiv>
h2>

اولین مورد برای صفحه خوان ها است. شما می توانید این را از sr-only class (نکته: آنها از کلاس های کمکی استفاده می کنند و من اضافه کردم sr-only برای وضوح). دومی از خوانندگان صفحه پنهان است و قرار است به صورت بصری نمایش داده شود. جالبه، نه؟

یک ظاهر طراحی تم سفارشی

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

هنگامی که کاربر در حال مشاهده پیام‌ها است، هنگام پیمایش، شیب متحرک به نظر می‌رسد. در اینجا یک ویدیو است:

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

گرادیانی که دیدید به پس‌زمینه محفظه پیام اضافه می‌شود. این بدان معنی است که تمام پس زمینه سفیدی که بین پیام ها می بینید رنگی خواهد بود. شکل زیر را در نظر بگیرید:

.messages-parent {
  background-color: #3a12ff;
  background-image: linear-gradient(#faaf00, #ff2e2e, #3a12ff);
}

مرحله بعدی حذف رنگ پس زمینه و شعاع حاشیه از هر حباب پیام است. (بله، درست خواندید).

مرحله بعدی اضافه کردن یک پس‌زمینه سفید به معنای واقعی کلمه به همه چیز در رابط کاربری به جز حباب‌های چت است. (دوباره درست خواندید).

.message__actions,
.message__status,
.spacer-xs,
.spacer-lg,
.message__spacer,
.message__avatar {
  background-color: #fff;
}

و برای اثبات آن، در اینجا من فیس بوک را بررسی می کنم و موضوع را قطع می کنم. توجه داشته باشید که وقتی پس‌زمینه را به گرادیان تغییر دادم، عناصر زیادی تحت تأثیر این قرار گرفتند. همه این عناصر باید سفید باشند تا شیب را بپوشانند.

اکنون که حباب‌های چت را جدا کرده‌ایم، چگونه می‌توانیم گوشه‌های گرد را دوباره اضافه کنیم؟ عناصر شبه نجات

.custom-theming .message__bubble {
  position: relative;
  border-radius: 0;
  background: transparent;
}

.custom-theming .message__bubble::after {
  content: "";
  position: absolute;
  left: -36px;
  right: -36px;
  top: -36px;
  bottom: -36px;
  border: 36px solid #fff;
}

با موارد فوق نتیجه زیر را خواهیم داشت:

بعد باید گوشه ها را ویرایش کنیم. چگونه می توانیم یک گوشه گرد داخلی ایجاد کنیم؟ خوب، معلوم می شود که زاویه داخلی بر اساس فرمول زیر است:

شعاع داخلی = مرز-شعاع – مرز-عرض

این بدان معناست که حتی اگر اضافه کنید border-radius: 36px نسبت به موارد فوق، زاویه داخلی همچنان صفر خواهد بود. بدون تم سفارشی، شعاع مرزی است 18px. برای انعکاس آن در شعاع داخلی، باید افزایش دهیم border-radius برای شبه عنصر

Inner Radius = 54px – 36px = 18px

.custom-theming .message__bubble {
  position: relative;
  border-radius: 0;
  background: transparent;
}

.custom-theming .message__bubble::after {
  content: "";
  position: absolute;
  left: -36px;
  right: -36px;
  top: -36px;
  bottom: -36px;
  border-radius: 54px;
  border: 36px solid #fff;
}

در نهایت، باید عنصر شبه را در بسته بندی حباب پیام قرار دهیم.

.custom-theming .message__bubble {
  position: relative;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

آخرین مرحله تغییر است border-color روی سفید انگار هیچ اتفاقی نمی افتد.

اگر هنوز نمی‌دانید انیمیشن پیمایشی برای پیام‌ها چگونه اتفاق می‌افتد، از طریق background-attachment: fixed. نه تنها این، بلکه دارای یک 2px حاشیه با رنگ سفید. فکر می‌کنم این عمداً برای کار با پس‌زمینه سفارشی موضوع است.

.messages-parent {
  background-color: #3a12ff;
  background-image: linear-gradient(#faaf00, #ff2e2e, #3a12ff);
  background-attachment: fixed;
  border-left: 2px solid #fff;
  borfer-right: 2px solid #fff;
}

نتیجه گیری

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

• CSS flexbox بهترین چیزی است که برای طراحی UI اتفاق افتاده است.
• با نگاه کردن به یک تغییر، آسان بودن یا نبودن ساختن یک جزء را دست کم نگیرید.
• صادقانه بگویم، انتظار نداشتم اینقدر در مورد این موضوع بنویسم. وقتی شروع کردم، اینطور گفتم: “هی، این یک نوشتن سریع خواهد بود.” اشتباه کردم و از این بابت خوشحالم.
• یه جورایی باید بعضی چیزا رو رد و بدل کرد. به عنوان مثال، اسکرول قالب‌بندی را می‌توان به طور کامل از طریق جاوا اسکریپت انجام داد، اما تیم یک راه‌حل فقط CSS را انتخاب کرد، و فکر می‌کنم این به دلایل کارآمدی باشد.
• کار بر روی یک محصول بین المللی به این معنی است که ما از ابتدا باید با جهت های زبانی مختلف سر و کار داشته باشیم، و من از دیدن این چیزها در کار آنها لذت بردم، به خصوص که من یک راهنمای سبک RTL نوشتم.

این پایان است. اگر تا اینجا پیش رفتید خیلی ممنون.

بازخورد یا نظری دارید؟ لطفا از طریق توییتر به من پیام دهید @shadeed9.