کشفیات CSS از برنامه Threads

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

این به من این فرصت را داد که عمیق تر کاوش کنم. به چندین یافته جالب برخوردم که در این مقاله به آنها خواهم پرداخت.

بیایید شیرجه بزنیم!

استفاده از یک شبکه CSS برای طرح بندی پست

یکی از قابل توجه ترین موارد استفاده از CSS Grid در یک برنامه تولید در Threads یافت می شود. از CSS Grid برای ساخت طرح بندی پست استفاده می شود.

کاوش:

:root {
  --barcelona-threadline-column-width: 48px;
}

.post {
  display: grid;
  grid-template-columns:
    var(--barcelona-threadline-column-width)
    minmax(0, 1fr);
  grid-template-rows: 21px 19px max-content max-content;
}

واقعیت جالب: ستون اول شبکه نامگذاری شده است --barcelonaکنجکاوم بدانم دلیل این انتخاب چیست.

طرح پست از یک شبکه 2 ستونی * 4 ردیفی تشکیل شده است. ظرف اصلی وجود ندارد. هر عنصر در پست به صورت دستی با استفاده از قرار داده می شود grid-column و grid-row خواص

آواتار کاربر

.post-avatar {
  padding-top: 4px;
  grid-row: 1 / span 2;
  grid-column: 1;
}

آواتار در ستون اول قرار دارد و دو ردیف اول را پوشش می دهد. شایان ذکر است حضور padding-top.اگرچه نتوانستم دلیل خاصی برای این موضوع در کد تولید پیدا کنم، اما به نظر می رسد که تراز رابط کاربری را به خوبی تنظیم می کند.

در اینجا یک قبل و بعد جستجوی آواتار با و بدون padding-top درمان:

دلیل دیگر استفاده از padding-top در اینجا می توان آواتار را تا آخر فشار داد و آن را به خط نزدیک کرد.

از مقادیر فرد برای ردیف های شبکه استفاده کنید

چرا استفاده کنید 21px و 19px به عنوان مقادیر ردیف؟ پس از بررسی بیشتر، به نظر می رسد که این نوعی تنظیم دقیق برای رابط کاربری است. مجموع ارتفاع ردیف است 40px، که ارتفاع آواتار پلاس را در نظر می گیرد padding-top (36px + 4px).

ممکن است کنجکاو باشید که چرا این مقادیر استاندارد نیستند. سیستم های طراحی به طور کلی با این باور مرتبط هستند که طراحان باید به شدت از قوانین از پیش تعریف شده برای عناصر UI پیروی کنند.

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

محدودیت ها هنگام استفاده از ردیف های با اندازه ثابت

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

در اینجا یک مثال است:

افزودن بالشتک در بالا و پایین به دلیل ردیف‌های اندازه ثابت، روی هدر پست تأثیری نداشت.

فضای بین ستون های چیدمان کمی هک به نظر می رسد

شکاف فعلی بین ستون های چیدمان صفر است. در عوض، تصویر دارای اندازه است 36*36 پیکسل در حالی که ظرف آن است 48 پیکسل گسترده

این فاصله را در اینجا تقلید می کند. نمی‌دانم چرا تیم به این سمت رفت، اما ترجیح می‌دهم از آن استفاده کنم gap در عوض

چرا از مناطق شبکه ای با نام CSS استفاده نمی کنید؟

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

من سعی کردم شبکه را تکرار کنم و آن را بر اساس مناطق نامگذاری شده بسازم. اسکن به نظر آسان تر از تنظیم مقادیر برای ستون ها و ردیف ها است.

برای نشان دادن این، اجازه دهید a را اختصاص دهیم grid-area به هر عنصر در چیدمان:

.AvatarContainer {
  grid-area: avatar;
}

.HeaderContainer {
  grid-area: header;
}

.BodyContainer {
  grid-area: body;
}

.ThreadlineContainer {
  grid-area: line;
}

.FooterContainer {
  grid-area: footer;
}

گزینه 1: پیش فرض

سپس می توانیم روی تغییرات شروع کنیم. در اینجا طرح پیش فرض است:

.post {
  display: grid;
  grid-template-columns:
    var(--barcelona-threadline-column-width)
    minmax(0, 1fr);
  grid-template-rows: 21px 19px max-content max-content;
  grid-template-areas:
    "avatar header"
    "avatar body"
    ". body"
    ". footer";
}

به استفاده از . برای نشان دادن فضاهای خالی

گزینه 2: پاسخ

تنوع زمانی است که یکی به دیگری پاسخ می دهد.

.post--reply {
  grid-template-rows: 36px 0 max-content max-content;
  grid-template-areas:
    "avatar header"
    "body body"
    "body body"
    "footer footer";
}

گزینه 3: پیش فرض با موضوع

.post--withLine {
  grid-template-areas:
    "avatar header"
    "avatar body"
    "line body"
    "footer footer";
}

استفاده از مناطق شبکه ای نامگذاری شده در اینجا امکان تغییر طرح را با ویرایش تنها در یک مکان فراهم می کند.

SVG برای خطوط نخ

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

شکل زیر را ببینید:

این خط که آواتار من را به Mark’s متصل می کند یک مسیر SVG است. از سه قسمت تشکیل شده است.

طول قسمت اول با جاوا اسکریپت محاسبه می شود.

متغیرهای CSS درون خطی برای شبکه CSS

من خوشحالم که چیزی را می بینم که من و بسیاری دیگر از آن برای استفاده در یک برنامه کاربردی در مقیاس بزرگ مانند Threads حمایت کرده ایم.

در نمایه کاربر، طرح‌بندی شبکه‌بندی شده با یک متغیر CSS درون خطی ساخته می‌شود که شامل تعداد تب‌ها می‌شود.

این مفید است. وقتی تعداد تب ها افزایش می یابد، فقط باید مقدار متغیر CSS را تغییر دهیم. تمیز، درسته؟

با سرریز بپیچید

من متوجه استفاده از overflow-wrap: anywhere برای بدنه پست من قبلاً از این کلمه کلیدی استفاده نکرده بودم یا چیزی نشنیده بودم. من استفاده می کنم break-word.

طبق MDN همان است break-word اما با یک چیز اضافی:

قابلیت‌های بسته‌بندی نرم ارائه‌شده توسط کلمه break هنگام محاسبه حداقل اندازه‌های محتوای ذاتی در نظر گرفته می‌شوند.

من هنوز تفاوتی در استفاده مشاهده نکردم break-word در مقابل anywhere. من بسیار کنجکاو هستم که بدانم اگر هر یک از تیم Threads این را می‌خواند، چرا؟

استفاده از واحدهای پنجره پویا

من دوست دارم از ماژول نمای پویا استفاده کنم dvh برای صفحه اصلی

اگر می خواهید بیشتر بدانید، مقاله مفصلی در مورد واحدهای پنجره جدید نوشتم.

استراتژی های دفاعی CSS

برای اطمینان از اینکه چیدمان flexbox به دلیل حداقل طول محتوا شکسته نمی شود، min-width: 0 برای تنظیم مجدد این رفتار استفاده می شود.

اطلاعات بیشتر در مورد این را در پست دفاعی CSS من در مورد حداقل اندازه محتوا در flexbox بخوانید.

نتیجه گیری

این همه برای امروز است. من از بررسی CSS و آشنایی با نحوه ساخت تیم Threads محصول لذت بردم. من مطمئن هستم که چیزهای زیادی وجود دارد که من متوجه نشده ام زیرا این نسخه فقط پیش نمایش وب است.