از زمان ظهور طراحی وب واکنشگرا، توسعهدهندگان درخواست قابلیت استایلدهی به عناصر DOM را بر اساس اندازه واقعی آنها به جای اندازه نمای مرورگر (با استفاده از کوئریهای رسانهای ) داشتهاند. در واقع، کوئریهای کانتینر (در اصل کوئریهای عنصر) احتمالاً پردرخواستترین ویژگی CSS هستند که مرورگرها هنوز فاقد آن هستند .
در حال حاضر وجود دارد بسیاری از ، بسیاری از ، بسیاری از پست که توضیح دهد که دقیقا به همین دلیل نمایش داده شد ظرف به پیاده سازی در CSS و چرا تولید کنندگان مرورگر مردد هستند برای پیاده سازی آنها دشوار است. اگر می خواهید از آن لذت ببرید ، کمی جاوا اسکریپت می تواند به شما کمک کند:
c51c33e1533e68c3f8fd24633700789f
کل ماجرا به این شکل به نظر می رسد:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
نقاط توقف ، انتخاب کننده و ویژگی های سبک را می توان برای تعریف نقاط مختلف شکست ، انتخاب کننده خودکار و نوع کلاس های اضافه شده استفاده کرد. اگر از اسکریپت استفاده می کنید ، می توانید کلاس های جدید ایجاد شده را به شرح زیر آدرس دهید:
c51c33e1533e68c3f8fd24633700789f
استفاده از پرس و جوهای کانتینر مخصوصاً برای عناصر موجود در همپوشانی ها، پنجره های بازشو، نوارهای کناری یا عناصر سفارشی ارزشمند است - حتی اکنون، برای مثال، با اسکریپت بالا.