2022 میں آپ کو کون سا CSS بالکل جاننا ہے؟

ساچا گریف کھلے عام تعجب کیا کیا CSS بن گیا ہے، آپ جانتے ہیں، بہت بڑا۔ ان تمام سامانوں کے ساتھ جو پچھلے دو سالوں میں براؤزرز میں بھیجی گئی ہیں۔ کنٹینر کے سوالات! رشتہ دار رنگ نحو! جھرن کی تہوں! منطقی خصوصیات! میڈیا کے سوالات میں رینج! انفرادی تبدیلیاں! :has() سلیکٹر! - اور وہ سب جو ممکنہ افق پر ہے - CSS ٹوگلز! nesting کے! رنگ اختلاط! اسکرول سے منسلک متحرک تصاویر! دائرہ کار انداز! — نئے اور تجربہ کار فرنٹ اینڈرز کے لیے ان دنوں CSS کے لیے سیکھنے کا ایک مختلف وکر ضرور ہے۔

ایک وقت ایسا بھی آیا ہوگا جب سی ایس ایس کی زیادہ تر خصوصیات کو جاننا اور وہ کیسے کام کرتی ہیں۔ کم از کم میرے جیسے بوڑھے ہاتھ کے لیے وہ دن گزر چکے ہیں۔ لیکن اس قسم کا سوال پیدا ہوتا ہے: آپ کو کون سا CSS بالکل جاننا ہے؟

Vincas Stonys حال ہی میں ایک فہرست پر ایک وار لیا. کرس ایک ساتھ رکھو CSS3 سے جاری کردہ خصوصیات پر مبنی۔ آپ کو شاید اندازہ ہو گا کہ آپ فہرست میں کیا شامل کریں گے۔ اگر مجھے ٹاپ 5 کو اکٹھا کرنا ہے اور خود کو صرف پراپرٹیز اور سلیکٹرز تک محدود رکھنا ہے تو یہ کچھ اس طرح نظر آسکتا ہے…

writing-mode

میں اس کے بارے میں کافی نہیں کہہ سکتا writing-mode جائیداد جو چیز اسے اہم بناتی ہے — خاص طور پر سیکھنے کے نقطہ نظر سے — وہ یہ ہے کہ یہ آپ کو ایسے جامع اصولوں کے لیے ترتیب دیتا ہے جو صارف کی زبان سے قطع نظر، ترتیب سازی کے لیے اکاؤنٹ بناتے ہیں۔ کی اچھی تفہیم writing-mode کی تفہیم کی قیادت کرنے جا رہا ہے منطقی خصوصیات اور اقدار، اور وہ، بدلے میں، کے لحاظ سے دستاویز کے بہاؤ اور سوچ کو سمجھنے کے لیے مرحلہ طے کرتے ہیں۔ block, inline, start، اور end جسمانی سمتوں کے بجائے۔

display

مجھے یہ یقین کرنے میں سخت دقت ہوتی ہے کہ کوئی بھی اس پر ٹھوس گرفت کے بغیر اچھا سی ایس ایس لکھ سکتا ہے۔ display جائیداد یہ لے آؤٹ بنانے کے لیے پراپرٹی اور فریم ورک دونوں ہے۔ اس کے بغیر کوئی Flexbox یا CSS گرڈ نہیں ہے، جس سے یہ ان اہم خصوصیات کو سمجھنے کے لیے ایک گیٹ کیپر کی طرح ہے۔

اس کے علاوہ ، display پراپرٹی بالکل مکمل کرتی ہے۔ writing-mode. یہ بالکل وہی ہے جس کی آپ کو ایک بار ضرورت ہوگی۔ writing-mode نے آپ کو دستاویز کے بہاؤ اور منطقی سمتوں سے روشناس کرایا ہے۔ آپ کو کسی عنصر کے معمول کے بہاؤ کو تبدیل کرنے کے لیے ایک خاصیت کی ضرورت ہوگی (جیسے کسی بلاک عنصر کو ان لائن میں تبدیل کرنا) یا چیزوں کو باہر رکھنا شروع کریں (جیسے ایک لچکدار ترتیب کا سیاق و سباق بنانا) اور وہیں display کھیل میں آتا ہے.

margin / padding / border

اوہ، میں یہاں مکمل طور پر دھوکہ دے رہا ہوں لیکن سیکھنے کے بارے میں سوچو margin, padding، اور border ایک ساتھ ناگزیر ہے. وہ سب کے حصے ہیں۔ باکس ماڈل, وقفہ کاری اور اسٹائلنگ میں سبھی مدد کرتے ہیں، اور سبھی سے واقفیت کی ضرورت ہوتی ہے۔ سی ایس ایس کی لمبائی کی اکائیاں. یہ جاننا کہ ان خصوصیات کو کیا کرنے کے لیے ڈیزائن کیا گیا ہے اور وہ عنصر کے حسابی سائز میں کس طرح حصہ ڈالتے ہیں یقینی طور پر آپ کو بہت زیادہ اسٹائلنگ کنٹرول فراہم کرتا ہے، اور کسی بھی قسم کی الجھن کو دور کرتا ہے کہ عنصر اس کا سائز کیوں ہے — ایک عام سی ایس ایس سر درد!

::before اور ::after

ایک اور جہاں میں تھوڑا سا دھوکہ دے رہا ہوں۔ جی ہاں، ::before اور ::after دو انفرادی چھدم عناصر ہیں، لیکن ایک بار پھر، میں دوسرے کے بغیر ایک کے بارے میں سیکھنے کا تصور بھی نہیں کر سکتا۔ یہ ایک دو فیر ہے!

مجھے یاد ہے کہ یہ جاننا میرے لیے کتنا حیران کن تھا کہ یہ موجود ہیں اور ان کا استعمال ہر چیز کو بنانے کے لیے کیا جا سکتا ہے۔ ٹھنڈے UI اثرات مکمل کرنے کے لئے سنگل div عکاسی. یہ نئے امکانات کھولتا ہے اور پہلی جھانکتا ہے کہ CSS واقعی کتنا طاقتور ہے۔

@media

اوف، میں پہلے سے ہی فہرست میں اپنے پانچویں اور آخری آئٹم پر ہوں اور مجھے لگتا ہے کہ سی ایس ایس کی بہت اچھی خوبی یہاں سے تعلق رکھتی ہے۔ لیکن اگر مجھے ایک آخری چیز کا انتخاب کرنا ہے، تو یہ ہوگا۔ میڈیا کے سوالات. کیوں؟ کیونکہ یہ سیال، لچکدار ترتیب اور دیکھنے کے مختلف سیاق و سباق بنانے کے لیے ایک اہم جزو ہے۔ کنٹینر کے سوالات ہو سکتا ہے کہ یہ میری فہرست سے دستک ہو جائے جیسا کہ یہ پختہ ہوتا ہے، لیکن ابھی کے لیے، @media ذمہ دار ڈیزائن کے لیے ایک بہترین پرائمر ہے۔

اس کے علاوہ، @media CSS کی مشروط خصوصیات میں ایک اچھا پہلا قدم ہے۔ چاہے ہم استعمال کیے جانے والے آلے کی قسم کی بنیاد پر کوئی استفسار لکھ رہے ہوں (مثال کے طور پر، screen or print) یا جب براؤزر کا ویو پورٹ کسی خاص معیار پر پورا اترتا ہے (مثلاً، width >= 768px) @media نحو مختلف حالات کے لیے موزوں ترتیب دینے کے لیے ناقابل یقین حد تک مفید ہے۔

اوہ، اور ہم نے اس کو بھی نہیں چھوا ہے کہ کیسے @media اس کی قابلیت کی بدولت رسائی سے متعلق ہے۔ صارف کی ترجیحات پر مبنی طرزیں لاگو کریں۔ (مثال کے طور پر، prefers-reduced-motion)۔ لہذا، مشروط لے آؤٹ تیار کرنے کے علاوہ، میڈیا کے سوالات جامع ڈیزائن کو سمجھنے کی طرف ایک اچھا اگلا قدم ہے۔

قابل احترام تذکرہ

سی ایس ایس کو پانچ جاننا ضروری خصوصیات اور سلیکٹرز کی فہرست میں ڈسٹل کرنا مشکل ہے، خاص طور پر اب جب کہ سی ایس ایس آج سے زیادہ طاقتور ہے، کہہ لیں، یہاں تک کہ پانچ سال پہلے۔ بہت سی دوسری چیزیں ہیں جو میں واقعی میں شامل کرنا چاہتا تھا، جیسے (کسی خاص ترتیب میں):

• calc()
• has()
• color
• font
• overflow
• position (خاص طور پر یہ)
• z-index

لیکن میں اپنے انتخاب پر قائم ہوں۔ سی ایس ایس سیکھنا خواص کی فہرست کو یاد رکھنے سے زیادہ اہم ہے۔ یہ ایک سفر ہے اور میں سمجھتا ہوں کہ میں نے جن پانچوں کا انتخاب کیا ہے وہ سیکھنے کا ایک اچھا راستہ بناتے ہیں جو اچھے طرز کے اصول لکھنے اور CSS میں مزید گہرائی میں جانے کے لیے اگلے مراحل طے کرتا ہے۔

ٹھیک ہے، مجھے اپنا بتاؤ!

میری فہرست سے متفق نہیں؟ آپ کو چاہیے! میں شرط لگاتا ہوں کہ آپ کے پاس کچھ ہوشیار آراء ہیں اور میں یہ دیکھنا چاہتا ہوں کہ آپ نے ٹاپ 5 کی فہرست کو کس طرح مکمل کیا ہوگا۔