در پایان سال گذشته Interop 2023 به پایان رسید. این تلاش از سوی فروشندگان مرورگر و سایر طرف‌ها با هدف ایجاد یک وب با قابلیت همکاری بیشتر، با تفاوت‌های کمتر بین مرورگرها، ایجاد می‌کند. این پست نتایج نهایی و همچنین برخی از ویژگی های مورد علاقه تیم کروم را به اشتراک می گذارد.
نمرات نهایی
دیدن رنگ سبز بسیار عالی است، این را با نمرات ابتدای سال 2023 مقایسه کنید، و ما راه درازی را پیموده‌ایم و هر مرورگر افزایش زیادی در امتیاز مشاهده می‌کند.
ما در مورد چه چیزی هیجان زده ایم؟
فهرست کامل مناطق تمرکز برای سال 2023 را در داشبورد Interop 2023 بیابید. برخی از مناطق فوکوس مانند :has() پرس و جوهای کانتینر و ویژگی inert یک ویژگی کامل را پوشش می دهند. دیگران، به عنوان مثال کار بر روی Flexbox، با برخی از خطاهای آزمایشی ظریف در یک ویژگی متقابل مرورگر موجود سروکار داشت.
:has()
"در نهایت یک انتخابگر والد برای CSS! این تقریبا از روز اول درخواست شده است، و در نهایت داشتن آن در همه مرورگرها فوق العاده است و به این معنی است که توسعه دهندگان برای تقلید از این انتخابگر نیاز به اجرای جاوا اسکریپت کمتری دارند." - توماس اشتاینر، مهندس روابط توسعه دهنده در Chrome .
مقدار زیادی هیجان در مورد شبه کلاس کاربردی :has() وجود داشته است، زیرا یک درخواست کلیدی از توسعه دهندگان را به پلتفرم آورده است. به شما یک انتخابگر والد می دهد—شما می توانید یک عنصر را بر اساس چیزهایی که در داخل آن هستند انتخاب کنید. با این حال، می توان از آن برای موارد بسیار بیشتری استفاده کرد. همانطور که در CSS wrapped توضیح داده شد، می توانید خیلی بیشتر از یک عنصر والد انتخاب کنید و حتی انتخاب های جانبی را انجام دهید.
:has() دمو: داکUna Kravets ، مهندس روابط توسعه‌دهنده در تیم Chrome توضیح می‌دهد:
انتخابگر :has() یکی از انعطاف‌پذیرترین و قدرتمندترین ویژگی‌های CSS است که به تازگی در دسترس است. با استفاده از آن، می‌توانید به هر پدر و مادری بر اساس حضور، وضعیت یا حتی تعداد عناصر فرزند استایل دهید. اما نکته بیشتر این است که می‌توانید ترکیب کنید. آن را با دیگر ترکیب‌کننده‌ها برای استایل دادن به خواهر و برادرها و به دست آوردن سطح جدیدی از کنترل سبک روی رابط کاربری خود استفاده کنید. این یک ویژگی انعطاف‌پذیر است! من قبلاً تعداد زیادی دمو جالب را دیده‌ام که نیاز به تکیه بر اسکریپت‌های اضافی را هنگام استفاده از مزیت‌ها کاهش می‌دهد. قدرت :has()"
همانطور که Philip Jägenstedt، مهندس نرم‌افزار کروم به من یادآوری کرد، :has() بهترین ویژگی بود که توسعه‌دهندگان به دلیل عدم پشتیبانی در بررسی وضعیت CSS در سال 2023 با آن مواجه شدند. بنابراین ما تنها افرادی نیستیم که از داشتن این در دسترس هیجان زده هستیم.
می‌توانید به Una، همراه با آدام آرگیل، درباره has() در پادکست CSS گوش دهید ، سپس از این پست‌ها از سراسر جامعه وب درباره :has() بیشتر بیاموزید.
پرس و جوهای کانتینر
سال 2023 برای چیزهایی که زمانی غیرممکن به نظر می رسید، سال بسیار خوبی بود. علاوه بر :has() ، پلتفرم وب در نهایت پشتیبانی بین مرورگرها را برای جستجوهای کانتینر به دست آورد. شما از سال 2011، تنها یک سال پس از معرفی مفهوم طراحی واکنشگرا، درخواست جستجوی کانتینر (یا عنصر) کرده اید. اکنون، اینجا است و در همه موتورهای مرورگر اصلی موجود است .
یونا و آدام در پادکست CSS درباره پرس و جوهای کانتینر بحث کردند و یونا آنها را در قسمتی از طراحی در مرورگر معرفی کرد . جامعه همچنین نکات و ایده های زیادی را به اشتراک گذاشته است.
زیرشبکه
Subgrid گنجایش مورد علاقه من در Interop 2023 است. به شما امکان می دهد یک شبکه را بر روی یک عنصر والد تعریف کنید، و سپس از اندازه های آهنگی که در آن والد تعریف شده است، در شبکه های تو در تو در آن شبکه اصلی استفاده کنید. به لطف کار مهندسان پلتفرم وب مایکروسافت اج، زیرشبکه در طول سال 2023 در همه موتورهای مرورگر اصلی در دسترس قرار گرفت تا امتیاز کروم را افزایش دهد و این ویژگی هیجان انگیز را برای همه به ارمغان بیاورد.
مهندس روابط توسعه‌دهنده کروم آدریانا جارا به من گفت که چگونه شبکه و زیرشبکه ایجاد یک رابط کاربری عالی را آسان‌تر کرده است.
"من در بصری، چیدمان، حفظ ظاهری ثابت و تطبیق با صفحه نمایش وحشتناک هستم. اما با شبکه و زیرشبکه به نوعی ایجاد طرحی که در اندازه های مختلف صفحه کار می کند و به طور خودکار با محتوا تطبیق می یابد، امکان پذیر است! این مورد علاقه من است، زیرا به یک اصل اساسی می پردازد. باید وب‌سایتی ایجاد کنید که بدون نیاز به تخصص، تجربه مناسبی را به کاربران ارائه دهد."
من در مقاله ای برای 12 Days of Web چند مورد استفاده برای subgrid نوشتم و مانند سایر ویژگی های این پست، می توانید یک قسمت پادکست CSS را در مورد آن گوش دهید . همچنین منابع زیادی از سراسر وب وجود دارد.
- زیرشبکه CSS را یاد بگیرید
- ویدئو: طرح‌بندی‌های آسان و سازگارتر با زیرشبکه
- چیدمان محتوا با شبکه و زیرشبکه CSS
فضاهای رنگی و عملکردها
تعجبی نداشت که آدام آرگیل ، توسعه دهنده کروم CSS به من گفت که فضاهای رنگی و توابع ویژگی مورد علاقه اوست.
"خداحافظ ریاضی متغیر مقدار ناجور کانال HSL؛ سلام تک لاینرهای رنگی به موقع. فضاهای رنگی و توابع جدید فقط مشکلات گردش کار رنگ را حل نمی کنند، بلکه دسترسی به رنگ ها و گرادیان های پیشرفته، قابل اعتماد و پر جنب و جوش را به ارمغان می آورند. چه چیزی در مورد باز کردن برخی از توانایی‌ها و در عین حال آسان‌تر کردن زندگی‌تان را دوست ندارید. در آن چاشنی تلاش Interop بپاشید، و این غذا به طرز رنگارنگی لذت‌بخش است."
Adam محتوای شگفت انگیزی ایجاد کرده است تا به شما در درک این ویژگی های جدید کمک کند، مانند راهنمای رنگ CSS با وضوح بالا و gradient.style ، و صحبت در مورد عملکردهای رنگ در پادکست CSS .
وجود این ویژگی ها در همه موتورهای مرورگر اصلی هیجان انگیز است. در این مقالات عالی بیشتر بدانید.
منتظر Interop 2024 هستیم
به محض اینکه ویژگی‌ها قابل تعامل هستند، به بخشی از Baseline تبدیل می‌شوند - به تازگی در دسترس هستند. دیدن تعداد ویژگی‌های جدیدی که در طول سال 2023 وارد این گروه شده‌اند، بسیار هیجان‌انگیز است، البته به دلیل کار همه افراد درگیر در Interop 2023. خیلی زود زمان اعلام مناطق تمرکز انتخابی برای سال 2024 فرا می‌رسد، و ما همه مشتاقانه منتظرند ببینند که پلتفرم وب امسال چقدر می تواند بهتر شود.