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

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

با استفاده از API موقعیت یابی لنگر، عناصر را نسبت به یکدیگر قرار دهید.
داک را بخوانید
متحرک سازی به و از کلمات کلیدی اندازه ذاتی با 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 را خواهید آموخت. و در مورد توابع، ویژگی‌های منطقی و موارد دیگر برای تکمیل مهارت‌های توسعه‌دهنده جلویی خود خواهید آموخت.
شروع به یادگیری