لقد رأيت هذه تُستخدم في الإضافات و Discourse الأصلي، ولكن ليس في السمات (مثال؟). هل هي مدعومة؟
في السمات، هل @container مدعومة في .scss؟
يبدو أن هذا يمر، على سبيل المثال:
.side-by-side {
container-type: inline-size;
container-name: side-by-side;
}
ولكن ليس @container - يبدو أن CSS المغلق يختفي على الرغم من تلبية شرط استعلام الحاوية.
@container side-by-side (min-width: 500px) {
.side-by-side {
tbody {
لقد أجريت اختبارًا سريعًا وأؤكد أن استعلامات الحاوية تعمل في السمات… شيء واحد سألاحظه هو أنها أصعب بكثير في الفهم من استعلامات الوسائط. لقد ارتبك اثنان منا في الفريق بهذا في البداية.
إنها ليست مجرد استعلامات وسائط على الحاويات، ولكن لها مجموعة منفصلة من المتطلبات. أكبر مشكلة هي:
يحول احتواء الحجم قدرة العنصر على الحصول على معلومات الحجم من محتوياته، وهو أمر مهم لاستعلامات الحاوية لتجنب الحلقات اللانهائية.
لذلك لا يمكنك استخدام استعلام حاوية مع حاوية ذات عرض ديناميكي. يجب عليك تعيين عرض ثابت للحاوية. هذا يحد بشكل كبير مما تتوقع أن تكون قادرًا على فعله بها للأسف.
@media screen and (min-width: 500px) {
.fk-d-button-tooltip {
width: 300px;
background: green;
container-type: inline-size;
}
}
@media screen and (min-width: 1000px) {
.fk-d-button-tooltip {
width: 500px;
background: yellow;
container-type: inline-size;
}
}
@container (min-width: 400px) {
#create-topic {
background: blue !important;
}
}
حاوية أقل من 400 بكسل:
حاوية أكبر من 400 بكسل:
شكرا للنظر في هذا! وشكراً للتأكيد،
أوه!
بالتأكيد! 
أعتقد أنني عزلّت مشكلتي: الحاويات لا يمكن أن تكون جداول، يبدو أنها يجب أن تكون عناصر div.
لقد أنشأت “pen” يحتوي على حاويتين متطابقتين، باستثناء أن إحداهما كانت جدولًا.
استعلام الحاوية يفشل على الجدول، ولكنه ينجح على عنصر div المتطابق تقريبًا.
الحل النهائي هنا كان نقل الحاوية إلى #list-area وهو عنصر div وهذا حل مشكلتي!
أقدر حقًا اهتمامك بهذا الأمر، لأن تأكيد أنه يجب أن يعمل في السمات (إلى الحد الذي يعمل فيه) أعطاني الدافع الإضافي الأكثر أهمية!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
