موبائل فرسٹ کا مطلب ہے کہ آپ اپنے بیس سٹائلز سب سے چھوٹی سکرین کے لیے لکھیں، پھر بڑی سکرینز کے لیے min-width میڈیا کیوریز کے ساتھ پیچیدگی شامل کریں — بجائے ڈیسک ٹاپ سے شروع کرنے اور چیزیں ہٹانے کے۔
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
موبائل فرسٹ کیوں کامیاب ہے: بیس CSS کم رہتی ہے (موبائل کو صرف وہی ملتا ہے جس کی اسے ضرورت ہے — کمزور ڈیوائسز پر کارکردگی اچھی ہے)، اور آپ پیچیدگی شامل کرتے ہیں، جو اسے اوور رائڈ کرنے یا ہٹانے سے سمجھنا آسان ہے۔ یہ بھی اس طریقے سے میل کھاتا ہے جس طرح کنٹینٹ ایک کالم سے کئی میں قدرتی طور پر بہتا ہے۔
میڈیا کیوریز viewport کو جواب دیتی ہیں — پوری ونڈو۔ لیکن ایک قابل استعمال کمپوننٹ (کہہ دیں ایک کارڈ) ایک ہی صفحے پر ایک وسیع مین ایریا میں یا ایک تنگ سائیڈ بار میں ظاہر ہو سکتا ہے۔ Viewport کی چوڑائی آپ کو نہیں بتا سکتی کہ کمپوننٹ کے پاس کتنی جگہ واقعی ہے۔
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
اب وہی کارڈ خود بخود ایک افقی لے آؤٹ میں منتقل ہو جاتا ہے جب بھی اس کا کنٹینر ≥400px ہو — چاہے یہ اس لیے ہو کہ سکرین بڑی ہے یا یہ ایک وسیع کالم میں ہے۔ کمپوننٹ واقعی سیاق و سباق سے آزاد اور دوبارہ استعمال کے قابل بن جاتا ہے۔
موبائل فرسٹ ریسپانسیو CSS کو سادہ اور قابلِ برقراری رکھتا ہے۔
کنٹینر کیوریز ایک بڑی پیشرفت ہیں: وہ کمپوننٹس کو اپنی دستیاب جگہ کے لیے جواب دینے دیتے ہیں، جو بالکل وہی ہے جس کی آپ کو کمپوننٹ پر مبنی آرکیٹیکچر میں ضرورت ہے (ڈیزائن سسٹمز، قابلِ استعمال کارڈز/وجٹس) جہاں ایک جیسا کمپوننٹ بہت سے سیاق و سباق میں آتا ہے۔