ابزارها و تکنیک‌های Chrome را برای بهبود CSS و طراحی رابط کاربری سایت خود کشف کنید. ابزارها و تکنیک‌های Chrome را برای بهبود CSS و طراحی رابط کاربری سایت خود کشف کنید. ابزارها و تکنیک‌های Chrome را برای بهبود CSS و طراحی رابط کاربری سایت خود کشف کنید.

مهارت های توسعه UI خود را بهبود بخشید، مهارت های توسعه UI خود را بهبود بخشید، مهارت های توسعه UI خود را بهبود بخشید

متحرک سازی به و از کلمات کلیدی اندازه ذاتی با interpolate-size و calc-size() ,متحرک سازی به و از کلیدواژه های اندازه گیری درونی با interpolate-size و calc-size()
برای استایل دادن به نوارهای پیمایش از ویژگی های scrollbar-width و scrollbar-color استفاده کنید.
یک تکنیک تایپوگرافی کلاسیک برای شکستن خط های دست نویس برای بلوک های متن متعادل، به CSS می آید. ,یک تکنیک کلاسیک تایپوگرافی برای شکستن خط های دست نویس برای بلوک های متن متعادل، به CSS می آید.
CSS Color 4 ابزارها و قابلیت‌های رنگی گسترده‌ای را به وب می‌آورد: رنگ‌های بیشتر، عملکردهای دستکاری، و گرادیان‌های بهتر. CSS Color 4 ابزارها و قابلیت های رنگی گسترده ای را به وب می آورد: رنگ های بیشتر، عملکردهای دستکاری و گرادیان های بهتر.
CSS Typed Object Model (Typed OM) انواع، متدها و مدل شیء انعطاف پذیر را برای کار با مقادیر CSS به ارمغان می آورد. ,CSS Typed Object Model (Typed OM) انواع، متدها و مدل شیء انعطاف پذیر را برای کار با مقادیر CSS به ارمغان می آورد.
با استفاده از قانون @container، مقادیر سبک عنصر والد را پرس و جو کنید. , با استفاده از قانون @container از مقادیر سبک عنصر والد پرس و جو کنید.
یکی از ویژگی‌های مورد علاقه پیش‌پردازنده CSS اکنون در این زبان گنجانده شده است: قوانین سبک تودرتو. یکی از ویژگی های مورد علاقه پیش پردازنده CSS ما اکنون در این زبان گنجانده شده است: قوانین سبک تودرتو.
بیاموزید که چگونه استایل های محدوده ای ایجاد کنید که عناصر را فقط در زیر درخت DOM شما انتخاب می کند. بیاموزید که چگونه استایل های محدوده ای ایجاد کنید که عناصر را فقط در زیر درخت DOM شما انتخاب می کند.
رنگ ها را در هر یک از فضاهای رنگی پشتیبانی شده، درست از CSS خود مخلوط کنید. ، رنگ ها را در هر یک از فضاهای رنگی پشتیبانی شده، درست از CSS خود مخلوط کنید.
قبل از اعمال منطق An+B روی آن، مجموعه ای از عناصر فرزند را از قبل فیلتر کنید. ، مجموعه ای از عناصر فرزند را قبل از اعمال منطق An+B روی آن از قبل فیلتر کنید.
یک آکاردئون انحصاری با چندین عنصر <details> که name یکسانی دارند ایجاد کنید.
ویژگی inert یک ویژگی HTML جهانی است که نحوه حذف و بازیابی رویدادهای ورودی کاربر را برای یک عنصر ساده می‌کند، از جمله رویدادهای تمرکز و رویدادهای فناوری‌های کمکی. ویژگی inert یک ویژگی HTML جهانی است که نحوه حذف و بازیابی رویدادهای ورودی کاربر را برای یک عنصر ساده می‌کند، از جمله رویدادهای تمرکز و رویدادهای فناوری‌های کمکی.
انتخاب بهینه سازی بسته بندی متن، برای زیبایی بیش از سرعت.
چگونه ما پشتیبانی از ابزار CSS Grid را در DevTools طراحی و پیاده سازی کردیم. نحوه طراحی و پیاده سازی پشتیبانی از ابزار CSS Grid در DevTools.
نحوه پشتیبانی ما از CSS-in-JS در DevTools و تفاوت آن با CSS معمولی. نحوه پشتیبانی ما از CSS-in-JS در DevTools و تفاوت آن با CSS معمولی.

سایه DOM

روشی جدید برای پیاده سازی و استفاده از Shadow DOM به طور مستقیم در HTML.
وضعیت فعلی قابلیت همکاری نام‌های تعریف‌شده توسط نویسنده و سایه‌دار DOM.

چیدمان

اندازه ها را در CSS با استفاده از مخلوطی از واحدهای اندازه مشخص کنید. ، اندازه ها را در CSS با استفاده از مخلوطی از واحدهای اندازه مشخص کنید.
پیام ها را ثبت کنید و جاوا اسکریپت را اجرا کنید.
کشف hidden=until-found، یک مقدار مشخصه می‌تواند اطمینان حاصل کند که محتوای درون بخش‌های آکاردئونی را می‌توان یافت و به آن پیوند داد. ,Discover hidden=تا یافت نشد، یک مقدار مشخصه می تواند اطمینان حاصل کند که محتوای موجود در بخش های آکاردئونی را می توان یافت و به آن پیوند داد.

مطالعات موردی CSS و UI

قابلیت‌های رابط کاربری وب دقیقاً چیست و چگونه می‌توانند قیف تبدیل شما را افزایش دهند؟ مزایای استفاده از این ویژگی ها چیست؟
مزایای انیمیشن های اسکرول محور را با Policybazaar، redBus و Tokopedia کشف کنید.
redBus، Policybazaar، و Tokopedia همگی از View Transitions API استفاده می کنند و از عملکرد بهتر و رابط کاربری روان بهره می برند.
Tokopedia از Popover API برای کاهش مقدار کد در برنامه خود استفاده می کند.

انیمیشن ها در وب

Web Animations API بدوی قدرتمندی برای توصیف انیمیشن های ضروری از جاوا اسکریپت فراهم می کند. ، Web Animations API بدوی قدرتمندی برای توصیف انیمیشن های ضروری از جاوا اسکریپت ارائه می دهد.
ویژگی animation-composition اجازه می دهد تا کنترل کنید که چه اتفاقی باید بیفتد وقتی چندین انیمیشن به طور همزمان روی یک ویژگی یکسان تأثیر می گذارد. ویژگی animation-composition اجازه می دهد تا کنترل کنید که چه اتفاقی باید بیفتد وقتی چندین انیمیشن به طور همزمان روی یک ویژگی یکسان تأثیر می گذارد.
linear() یک تابع کاهش دهنده CSS است که به صورت خطی بین نقاط خود درون یابی می کند و به شما امکان می دهد افکت های جهشی و فنری را دوباره ایجاد کنید. ,linear() یک تابع کاهش دهنده CSS است که به صورت خطی بین نقاط خود درون یابی می کند و به شما امکان می دهد افکت های جهشی و فنری را دوباره ایجاد کنید.
با Scroll Timelines و View Timelines کار کنید تا انیمیشن های پیمایشی را به روشی اعلامی ایجاد کنید. با Scroll Timelines و View Timelines کار کنید تا انیمیشن های اسکرول را به روشی اعلامی ایجاد کنید.
دوره
تاریخچه طراحی واکنش گرا و نگاهی به اصول چیدمان واکنش گرا را بخوانید. شما در مورد تصاویر واکنش‌گرا، تایپوگرافی، قابلیت دسترسی و موارد دیگر خواهید آموخت.
دوره
شما اصول CSS مانند مدل جعبه، آبشار و ویژگی، flexbox، grid و z-index را خواهید آموخت. و در مورد توابع، ویژگی‌های منطقی و موارد دیگر برای تکمیل مهارت‌های توسعه‌دهنده جلویی خود خواهید آموخت.