CSS

براؤزر CSS قواعد کی خاصیت کے لحاظ سے یہ طے کرتا ہے کہ کسی عنصر پر کون سے اسٹائل دکھائے جائیں۔ ہم فرض کرتے ہیں کہ براؤزر نے پہلے ہی ان قواعد کا تعین کر لیا ہے جو کسی خاص عنصر سے مماثل ہیں۔ مماثل قواعد میں، چار کوما سے علیحدہ شدہ اقدار، 'a, b, c, d' ہر قاعدہ کے لیے درج ذیل کی بنیاد پر شمار کی جاتی ہیں:

1. 'a' یہ ہے کہ کیا ان لائن اسٹائل استعمال کیے جا رہے ہیں۔ اگر پراپرٹی ڈیکلریشن عنصر پر ایک ان لائن اسٹائل ہے تو 'a' 1 ہے، ورنہ 0۔
2. 'b' ID سلیکٹرز کی تعداد ہے۔
3. 'c' کلاسز، خصوصیات اور سیوڈو کلاسز سلیکٹرز کی تعداد ہے۔
4. 'd' ٹیگز اور سیوڈو عناصر سلیکٹرز کی تعداد ہے۔

نتیجہ خیز خاصیت کوئی اسکور نہیں ہے، بلکہ اقدار کا ایک میٹرکس ہے جس کا موازنہ کالم بہ کالم کیا جا سکتا ہے۔ جب یہ طے کرنے کے لیے سلیکٹرز کا موازنہ کیا جائے کہ کس کی خاصیت سب سے زیادہ ہے، تو بائیں سے دائیں دیکھیں، اور ہر کالم میں سب سے زیادہ قدر کا موازنہ کریں۔ لہذا 'b' کالم میں ایک قدر 'c' اور 'd' کالموں میں اقدار کو اوور رائیڈ کر دے گی، چاہے وہ کچھ بھی ہوں۔ اس طرح، '0,1,0,0' کی خاصیت '0,0,10,10' سے زیادہ ہوگی۔

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

میں کم خاصیت کے ساتھ CSS قواعد لکھوں گا تاکہ اگر ضرورت ہو تو انہیں آسانی سے اوور رائیڈ کیا جا سکے۔ CSS UI جزو لائبریری کوڈ لکھتے وقت، یہ ضروری ہے کہ ان کی خاصیت کم ہو تاکہ لائبریری کے صارفین انہیں صرف خاصیت بڑھانے یا '!important' کا سہارا لینے کے لیے بہت پیچیدہ CSS قواعد استعمال کیے بغیر اوور رائیڈ کر سکیں۔

• ری سیٹ کرنا - ری سیٹ کرنے کا مطلب عناصر پر تمام ڈیفالٹ براؤزر اسٹائلنگ کو ہٹانا ہے۔ مثال کے طور پر تمام عناصر کے 'margin's، 'padding's، 'font-size's کو یکساں کرنے کے لیے ری سیٹ کیا جاتا ہے۔ آپ کو عام ٹائپوگرافک عناصر کے لیے دوبارہ اسٹائلنگ کا اعلان کرنا ہوگا۔
• نارملائز کرنا - نارملائز کرنا مفید ڈیفالٹ اسٹائلز کو محفوظ رکھتا ہے بجائے اس کے کہ ہر چیز کو 'غیر اسٹائل' کرے۔ یہ عام براؤزر انحصار کے لیے کیڑے بھی درست کرتا ہے۔

میں اس وقت ری سیٹ کرنے کا انتخاب کروں گا جب میرے پاس ایک بہت ہی حسب ضرورت یا غیر روایتی سائٹ ڈیزائن ہو تاکہ مجھے اپنی بہت سی اسٹائلنگ کرنی پڑے اور کسی بھی ڈیفالٹ اسٹائلنگ کو محفوظ رکھنے کی ضرورت نہ ہو۔

فلوٹ ایک CSS پوزیشننگ پراپرٹی ہے۔ فلوٹ کیے گئے عناصر صفحہ کے بہاؤ کا حصہ رہتے ہیں، اور دوسرے عناصر کی پوزیشننگ کو متاثر کریں گے (مثال کے طور پر ٹیکسٹ فلوٹ کیے گئے عناصر کے گرد بہے گا)، 'position: absolute' عناصر کے برعکس، جو صفحہ کے بہاؤ سے ہٹا دیے جاتے ہیں۔

CSS 'clear' پراپرٹی کو 'left'/'right'/'both' فلوٹ کیے گئے عناصر کے نیچے پوزیشن میں رکھنے کے لیے استعمال کیا جا سکتا ہے۔

اگر کسی پیرنٹ عنصر میں صرف فلوٹ کیے گئے عناصر شامل ہیں، تو اس کی اونچائی کچھ بھی نہیں ہو جائے گی۔ اسے کنٹینر میں فلوٹ کیے گئے عناصر کے بعد لیکن کنٹینر کے بند ہونے سے پہلے فلوٹ کو صاف کرکے ٹھیک کیا جا سکتا ہے۔

'.clearfix' ہیک فلوٹس کو صاف کرنے کے لیے ایک ہوشیار CSS سیوڈو سلیکٹر ('::after') استعمال کرتا ہے۔ پیرنٹ پر اوور فلو سیٹ کرنے کے بجائے، آپ اس پر ایک اضافی کلاس 'clearfix' لگاتے ہیں۔ پھر یہ CSS لگائیں:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

متبادل کے طور پر، پیرنٹ عنصر کو 'overflow: auto' یا 'overflow: hidden' پراپرٹی دیں جو بچوں کے اندر ایک نیا بلاک فارمیٹنگ سیاق و سباق قائم کرے گا اور یہ اپنے بچوں کو شامل کرنے کے لیے پھیل جائے گا۔

CSS میں 'z-index' پراپرٹی اوور لیپ ہونے والے عناصر کے عمودی اسٹیکنگ آرڈر کو کنٹرول کرتی ہے۔ 'z-index' صرف ان عناصر کو متاثر کرتا ہے جن کی 'position' ویلیو 'static' نہیں ہے۔

کسی بھی 'z-index' ویلیو کے بغیر، عناصر اسی ترتیب میں اسٹیک ہوتے ہیں جس میں وہ DOM میں ظاہر ہوتے ہیں (ایک ہی درجہ بندی کی سطح پر سب سے نچلا والا اوپر ظاہر ہوتا ہے)۔ غیر جامد پوزیشننگ والے عناصر (اور ان کے بچے) ہمیشہ ڈیفالٹ جامد پوزیشننگ والے عناصر کے اوپر ظاہر ہوں گے، HTML درجہ بندی سے قطع نظر۔

ایک اسٹیکنگ سیاق و سباق ایک ایسا عنصر ہے جس میں تہوں کا ایک مجموعہ ہوتا ہے۔ ایک مقامی اسٹیکنگ سیاق و سباق کے اندر، اس کے بچوں کی 'z-index' اقدار اس عنصر کے نسبت مقرر کی جاتی ہیں نہ کہ دستاویز کی جڑ کے نسبت۔ اس سیاق و سباق سے باہر کی تہیں - یعنی ایک مقامی اسٹیکنگ سیاق و سباق کے ہم جنس عناصر - اس کے اندر کی تہوں کے درمیان نہیں بیٹھ سکتیں۔ اگر ایک عنصر B عنصر A کے اوپر بیٹھتا ہے، تو عنصر A کا ایک بچہ عنصر، عنصر C، عنصر B سے کبھی بھی اونچا نہیں ہو سکتا چاہے عنصر C کی 'z-index' عنصر B سے زیادہ ہو۔

ہر اسٹیکنگ سیاق و سباق خود مختار ہوتا ہے - عنصر کے مواد کو اسٹیک کرنے کے بعد، پورا عنصر پیرنٹ اسٹیکنگ سیاق و سباق کے اسٹیکنگ آرڈر میں سمجھا جاتا ہے۔ چند CSS خصوصیات ایک نیا اسٹیکنگ سیاق و سباق شروع کرتی ہیں، جیسے کہ 'opacity' 1 سے کم، 'filter' جو 'none' نہیں ہے، اور 'transform' جو 'none' نہیں ہے۔

_نوٹ: ایک عنصر کو اسٹیکنگ سیاق و سباق بنانے کے لیے کون سی چیزیں بالکل اہل بناتی ہیں اس کی فہرست [قواعد] کے اس لمبے سیٹ میں دی گئی ہے۔

ایک بلاک فارمیٹنگ سیاق و سباق (BFC) ایک ویب صفحہ کی بصری CSS رینڈرنگ کا حصہ ہے جس میں بلاک باکسز کو ترتیب دیا جاتا ہے۔ فلوٹس، مکمل طور پر پوزیشن والے عناصر، 'inline-blocks'، 'table-cells'، 'table-caption's، اور 'overflow' والے عناصر 'visible' کے علاوہ (سوائے اس کے کہ جب اس قدر کو ویو پورٹ میں پھیلایا گیا ہو) نئے بلاک فارمیٹنگ سیاق و سباق قائم کرتے ہیں۔

ایک بلاک فارمیٹنگ سیاق و سباق قائم کرنے کا طریقہ جاننا ضروری ہے، کیونکہ ایسا کیے بغیر، کنٹیننگ باکس فلوٹ کیے گئے بچوں کو [شامل نہیں کرے گا]۔ یہ کولیپسنگ مارجنز سے مشابہ ہے، لیکن زیادہ خطرناک ہے کیونکہ آپ کو پورے باکسز کو عجیب و غریب طریقوں سے کولیپس کرتے ہوئے پائیں گے۔

ایک BFC ایک HTML باکس ہے جو درج ذیل میں سے کم از کم ایک شرط کو پورا کرتا ہے:

• 'float' کی ویلیو 'none' نہیں ہے۔
• 'position' کی ویلیو نہ تو 'static' ہے اور نہ ہی 'relative'۔
• 'display' کی ویلیو 'table-cell'، 'table-caption'، 'inline-block'، 'flex'، یا 'inline-flex'، 'grid'، یا 'inline-grid' ہے۔
• 'overflow' کی ویلیو 'visible' نہیں ہے۔

ایک BFC میں، ہر باکس کا بائیں بیرونی کنارہ کنٹیننگ بلاک کے بائیں کنارے کو چھوتا ہے (دائیں سے بائیں فارمیٹنگ کے لیے، دائیں کنارے چھوتے ہیں)۔

ایک BFC میں ملحقہ بلاک لیول باکسز کے درمیان عمودی مارجن کولیپس ہو جاتے ہیں۔ [کولیپسنگ مارجنز] پر مزید پڑھیں۔

• خالی 'div' طریقہ - '<div style="clear:both;"></div>'۔
• Clearfix طریقہ - اوپر دی گئی '.clearfix' کلاس کا حوالہ دیں۔
• 'overflow: auto' یا 'overflow: hidden' طریقہ - پیرنٹ ایک نیا بلاک فارمیٹنگ سیاق و سباق قائم کرے گا اور اپنے فلوٹ کیے گئے بچوں کو شامل کرنے کے لیے پھیل جائے گا۔

بڑے منصوبوں میں، میں ایک یوٹیلٹی '.clearfix' کلاس لکھوں گا اور انہیں ان جگہوں پر استعمال کروں گا جہاں مجھے اس کی ضرورت ہے۔ 'overflow: hidden' بچوں کو کاٹ سکتا ہے اگر بچے پیرنٹ سے لمبے ہوں اور بہت مثالی نہ ہو۔

CSS اسپرائٹس ایک سے زیادہ تصاویر کو ایک ہی بڑی تصویر میں ضم کرتے ہیں۔ یہ آئیکون کے لیے عام طور پر استعمال ہونے والی تکنیک ہے (جی میل اسے استعمال کرتا ہے)۔ اسے کیسے لاگو کیا جائے:

1. ایک اسپرائٹ جنریٹر استعمال کریں جو ایک سے زیادہ تصاویر کو ایک میں پیک کرے اور اس کے لیے مناسب CSS پیدا کرے۔
2. ہر تصویر میں 'background-image'، 'background-position' اور 'background-size' خصوصیات کے ساتھ ایک متعلقہ CSS کلاس ہوگی۔
3. اس تصویر کو استعمال کرنے کے لیے، اپنے عنصر میں متعلقہ کلاس شامل کریں۔

فوائد:

• ایک سے زیادہ تصاویر کے لیے HTTP درخواستوں کی تعداد کو کم کریں (ہر اسپرائٹ شیٹ کے لیے صرف ایک واحد درخواست درکار ہے)۔ لیکن HTTP2 کے ساتھ، ایک سے زیادہ تصاویر لوڈ کرنا اب کوئی بڑا مسئلہ نہیں رہا۔
• ان اثاثوں کی پیشگی ڈاؤن لوڈنگ جو ضرورت پڑنے تک ڈاؤن لوڈ نہیں ہوں گے، جیسے کہ وہ تصاویر جو صرف ':hover' سیوڈو اسٹیٹس پر ظاہر ہوتی ہیں۔ پلک جھپکنا نظر نہیں آئے گا۔

• مسئلہ اور متاثرہ براؤزر کی شناخت کرنے کے بعد، ایک علیحدہ اسٹائل شیٹ استعمال کریں جو صرف اس وقت لوڈ ہو جب وہ مخصوص براؤزر استعمال ہو رہا ہو۔ تاہم اس تکنیک کے لیے سرور سائیڈ رینڈرنگ کی ضرورت ہوتی ہے۔
• بوٹ اسٹریپ جیسی لائبریریاں استعمال کریں جو پہلے ہی ان اسٹائلنگ کے مسائل کو سنبھالتی ہیں۔
• اپنے کوڈ میں وینڈر پری فکسز کو خود بخود شامل کرنے کے لیے 'autoprefixer' استعمال کریں۔
• ری سیٹ CSS یا نارملائز.css استعمال کریں۔
• اگر آپ پوسٹ سی ایس ایس (یا اسی طرح کی ٹرانسپیلنگ لائبریری) استعمال کر رہے ہیں تو، ایسے پلگ انز ہو سکتے ہیں جو آپ کو جدید CSS syntax (اور یہاں تک کہ W3C تجاویز) استعمال کرنے کا اختیار دیں گے جو آپ کے کوڈ کے ان حصوں کو متعلقہ محفوظ کوڈ میں تبدیل کر دیں گے جو آپ کے استعمال کردہ اہداف میں کام کرے گا۔

• گریسیفل ڈیگریڈیشن - جدید براؤزرز کے لیے ایک ایپلیکیشن بنانے کا عمل جبکہ یہ یقینی بنانا کہ یہ پرانے براؤزرز میں بھی فعال رہے۔
• پروگریسو انہینسمنٹ - صارف کے تجربے کی بنیادی سطح کے لیے ایک ایپلیکیشن بنانے کا عمل، لیکن جب براؤزر اس کی حمایت کرتا ہے تو فعال اضافہ شامل کرنا۔
• فیچر سپورٹ چیک کرنے کے لیے [caniuse.com] استعمال کریں۔
• خودکار وینڈر پری فکس اندراج کے لیے آٹو پریفیکسر۔
• [Modernizr] کا استعمال کرتے ہوئے فیچر کی شناخت۔
• CSS فیچر استفسارات [@support] استعمال کریں۔

یہ تکنیکیں رسائی (a11y) سے متعلق ہیں۔

• 'width: 0; height: 0'۔ عنصر کو اسکرین پر بالکل بھی جگہ نہ لینے دیں، جس کے نتیجے میں اسے نہ دکھایا جائے۔
• 'position: absolute; left: -99999px'۔ اسے اسکرین سے باہر پوزیشن میں رکھیں۔
• 'text-indent: -9999px'۔ یہ صرف 'block' عناصر کے اندر ٹیکسٹ پر کام کرتا ہے۔ یہ ایک وسیع پیمانے پر استعمال ہونے والی اور مشہور چال ہے، لیکن یہ [کچھ خامیوں] کے ساتھ آتی ہے جیسے کہ کارکردگی کے مسائل پیدا کرنا، لہذا آپ 'text-indent: 100%' استعمال کرنے پر غور کر سکتے ہیں۔
• میٹا ٹیگز۔ مثال کے طور پر Schema.org، RDF، اور JSON-LD کا استعمال کرکے۔
• WAI-ARIA۔ ایک W3C تکنیکی وضاحت جو یہ بتاتی ہے کہ ویب صفحات کی رسائی کو کیسے بڑھایا جائے۔

اگرچہ WAI-ARIA مثالی حل ہے، میں 'absolute' پوزیشننگ کے طریقہ کار کو اپناؤں گا، کیونکہ اس میں سب سے کم خامیاں ہیں، زیادہ تر عناصر کے لیے کام کرتا ہے اور یہ ایک آسان تکنیک ہے۔

فلیکس کے مقبول ہونے سے پہلے (تقریباً 2014 میں)، 'float' پر مبنی گرڈ سسٹم سب سے زیادہ قابل اعتماد تھا کیونکہ اس میں متبادل موجودہ سسٹمز (فلیکس، گرڈ) میں سب سے زیادہ براؤزر سپورٹ تھی۔ بوٹ اسٹریپ بوٹ اسٹریپ 4 تک 'float' طریقہ استعمال کر رہا تھا جو 'flex' پر مبنی طریقہ میں تبدیل ہو گیا تھا۔ لکھنے کے وقت (2020)، 'flex' گرڈ سسٹم بنانے کے لیے تجویز کردہ طریقہ ہے اور اس کی [اچھی براؤزر سپورٹ] ہے۔

دلچسپی رکھنے والے [CSS Grid Layout] میں دیکھ سکتے ہیں، جو چمکدار نئی 'grid' پراپرٹی استعمال کرتا ہے؛ یہ گرڈ لے آؤٹ بنانے کے لیے 'flex' سے بھی بہتر ہے اور مستقبل میں ایسا کرنے کا ڈی فیکٹو طریقہ ہوگا۔

جی ہاں۔ ایک مثال یہ ہوگی کہ ایک اسٹیکڈ پِل نیویگیشن کو ایک خاص بریک پوائنٹ سے آگے فکسڈ باٹم ٹیب نیویگیشن میں تبدیل کرنا۔

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

بنیادی رنگ کاری نوڈ پر دو خصوصیات سیٹ کرکے کی جا سکتی ہے: 'fill' اور 'stroke'۔ 'fill' آبجیکٹ کے اندر کا رنگ سیٹ کرتا ہے اور 'stroke' آبجیکٹ کے گرد کھینچی گئی لائن کا رنگ سیٹ کرتا ہے۔ آپ وہی CSS رنگ نامی اسکیمیں استعمال کر سکتے ہیں جو آپ HTML میں استعمال کرتے ہیں، چاہے وہ رنگوں کے نام ہوں (یعنی 'red')، RGB اقدار (یعنی 'rgb(255,0,0)')، Hex اقدار، RGBA اقدار، وغیرہ۔

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

اوپر 'fill="purple"' ایک پریزنٹیشنل ایٹریبیوٹ کی ایک مثال ہے۔ دلچسپ بات یہ ہے کہ، ان لائن اسٹائلز جیسے 'style="fill: purple"' کے برعکس جو کہ ایک خصوصیت بھی ہے، پریزنٹیشنل خصوصیات کو اسٹائل شیٹ میں بیان کردہ CSS اسٹائلز سے [اوور رائیڈ کیا جا سکتا ہے]۔ لہذا، اگر آپ نے 'svg { fill: blue; }' جیسا کچھ کیا تو یہ ہمارے بیان کردہ جامنی رنگ کے بھرے پن کو اوور رائیڈ کر دے گا۔

جی ہاں، @media پراپرٹیز کی چار اقسام ہیں (بشمول screen):

• 'all' - تمام میڈیا ٹائپ ڈیوائسز کے لیے
• 'print' - پرنٹرز کے لیے
• 'speech' - اسکرین ریڈرز کے لیے جو صفحہ کو بلند آواز میں 'پڑھتے' ہیں
• 'screen' - کمپیوٹر اسکرینز، ٹیبلٹس، سمارٹ فونز وغیرہ کے لیے

یہاں 'print' میڈیا ٹائپ کے استعمال کی ایک مثال ہے:

@media print {
  body {
    color: black;
  }
}

سب سے پہلے، یہ سمجھیں کہ براؤزر دائیں سے بائیں (کلیدی سلیکٹر) سلیکٹرز کو میچ کرتے ہیں۔ براؤزر DOM میں عناصر کو کلیدی سلیکٹر کے مطابق فلٹر کرتے ہیں اور مماثلت کا تعین کرنے کے لیے اس کے پیرنٹ عناصر پر چڑھتے ہیں۔ سلیکٹر چین کی لمبائی جتنی چھوٹی ہوگی، براؤزر اتنی ہی تیزی سے یہ تعین کر سکے گا کہ آیا وہ عنصر سلیکٹر سے مماثل ہے۔ لہذا کلیدی سلیکٹرز سے بچیں جو ٹیگ اور یونیورسل سلیکٹرز ہیں۔ وہ بڑی تعداد میں عناصر سے مماثل ہوتے ہیں اور براؤزر کو یہ تعین کرنے میں زیادہ کام کرنا پڑے گا کہ آیا پیرنٹ مماثل ہیں۔

[BEM (بلاک ایلیمنٹ موڈیفائر)] میتھڈولوجی تجویز کرتی ہے کہ ہر چیز کی ایک واحد کلاس ہوتی ہے، اور جہاں آپ کو درجہ بندی کی ضرورت ہوتی ہے، وہ بھی کلاس کے نام میں شامل ہو جاتی ہے، یہ فطری طور پر سلیکٹر کو موثر اور اوور رائیڈ کرنے میں آسان بناتا ہے۔

اس بات سے آگاہ رہیں کہ کون سی CSS خصوصیات [ٹرگر] ری فلو، ری پینٹ، اور کمپوزٹنگ کرتی ہیں۔ جہاں ممکن ہو لے آؤٹ کو تبدیل کرنے والے اسٹائل (ٹرگر ری فلو) لکھنے سے گریز کریں۔

فوائد:

• CSS کو زیادہ قابل انتظام بنایا گیا ہے۔
• نیسٹڈ سلیکٹرز لکھنا آسان ہے۔
• مستقل تھیمنگ کے لیے متغیرات۔ تھیم فائلوں کو مختلف پراجیکٹس میں شیئر کر سکتے ہیں۔
• بار بار CSS تیار کرنے کے لیے مکسینز۔
• Sass خصوصیات جیسے لوپس، لسٹس، اور میپس کنفیگریشن کو آسان اور کم وضاحتی بنا سکتے ہیں۔
• اپنے کوڈ کو متعدد فائلوں میں تقسیم کرنا۔ CSS فائلوں کو بھی تقسیم کیا جا سکتا ہے لیکن ایسا کرنے کے لیے ہر CSS فائل کو ڈاؤن لوڈ کرنے کے لیے ایک HTTP درخواست کی ضرورت ہوگی۔

نقصانات:

• پری پروسیسنگ کے لیے ٹولز کی ضرورت ہے۔ دوبارہ کمپائلیشن کا وقت سست ہو سکتا ہے۔
• فی الحال اور ممکنہ طور پر قابل استعمال CSS نہ لکھنا۔ مثال کے طور پر، [webpack] کے ساتھ [postcss-loader] جیسی چیز کا استعمال کرکے، آپ ممکنہ طور پر مستقبل کے مطابق CSS لکھ سکتے ہیں، جس سے آپ Sass متغیرات کے بجائے CSS متغیرات جیسی چیزیں استعمال کر سکتے ہیں۔ اس طرح، آپ نئی مہارتیں سیکھ رہے ہیں جو اگر/جب معیاری ہو جائیں تو فائدہ مند ہو سکتی ہیں۔

پسند:

• زیادہ تر اوپر ذکر کردہ فوائد۔
• جاوا اسکرپٹ میں کم لکھا جاتا ہے، جو نوڈ کے ساتھ اچھی طرح چلتا ہے۔

ناپسند:

• میں 'node-sass' کے ذریعے Sass استعمال کرتا ہوں، جو C++ میں لکھا گیا LibSass کے لیے ایک بائنڈنگ ہے۔ نوڈ ورژنز کے درمیان سوئچ کرتے وقت مجھے اسے بار بار دوبارہ کمپائل کرنا پڑتا ہے۔
• Less میں، متغیر نام '@' سے شروع ہوتے ہیں، جو نیٹو CSS کی ورڈز جیسے '@media'، '@import' اور '@font-face' rule سے الجھ سکتے ہیں۔

'@font-face' استعمال کریں اور مختلف 'font-weight's کے لیے 'font-family' کی وضاحت کریں۔

یہ حصہ موثر CSS لکھنے کے بارے میں ہے۔ براؤزر دائیں سے بائیں (کلیدی سلیکٹر) سلیکٹرز کو میچ کرتے ہیں۔ براؤزر DOM میں عناصر کو کلیدی سلیکٹر کے مطابق فلٹر کرتے ہیں اور مماثلت کا تعین کرنے کے لیے اس کے پیرنٹ عناصر پر چڑھتے ہیں۔ سلیکٹر چین کی لمبائی جتنی چھوٹی ہوگی، براؤزر اتنی ہی تیزی سے یہ تعین کر سکے گا کہ آیا وہ عنصر سلیکٹر سے مماثل ہے۔

مثال کے طور پر اس سلیکٹر 'p span' کے ساتھ، براؤزر سب سے پہلے تمام '<span>' عناصر کو تلاش کرتے ہیں اور ان کے پیرنٹ پر جڑ تک چڑھتے ہیں تاکہ '<p>' عنصر کو تلاش کریں۔ ایک خاص '<span>' کے لیے، جیسے ہی اسے ایک '<p>' ملتا ہے، اسے معلوم ہو جاتا ہے کہ '<span>' مماثل ہے اور وہ اپنی مماثلت روک سکتا ہے۔

ایک CSS سیوڈو عنصر ایک سلیکٹر میں شامل کیا جانے والا ایک کلیدی لفظ ہے جو آپ کو منتخب عناصر کے کسی خاص حصے کو اسٹائل کرنے دیتا ہے۔ انہیں سجاوٹ (':first-line'، ':first-letter') کے لیے یا مارک اپ میں عناصر شامل کرنے کے لیے ('content: ...' کے ساتھ مل کر) استعمال کیا جا سکتا ہے بغیر مارک اپ میں ترمیم کیے (':before'، ':after')۔

• ':first-line' اور ':first-letter' کو ٹیکسٹ کو سجانے کے لیے استعمال کیا جا سکتا ہے۔
• '.clearfix' ہیک میں جیسا کہ اوپر دکھایا گیا ہے 'clear: both' کے ساتھ ایک زیرو اسپیس عنصر شامل کرنے کے لیے استعمال کیا جاتا ہے۔
• ٹول ٹپس میں تکونی تیر ':before' اور ':after' استعمال کرتے ہیں۔ خدشات کی علیحدگی کی حوصلہ افزائی کرتا ہے کیونکہ مثلث کو اسٹائلنگ کا حصہ سمجھا جاتا ہے نہ کہ واقعی DOM کا۔

CSS باکس ماڈل مستطیل باکسز کی وضاحت کرتا ہے جو دستاویز کے درخت میں عناصر کے لیے تیار کیے جاتے ہیں اور بصری فارمیٹنگ ماڈل کے مطابق ترتیب دیے جاتے ہیں۔ ہر باکس میں ایک مواد کا علاقہ (مثلاً ٹیکسٹ، ایک تصویر، وغیرہ) اور اختیاری گردنواح 'padding'، 'border'، اور 'margin' علاقے ہوتے ہیں۔

CSS باکس ماڈل درج ذیل کا حساب لگانے کے لیے ذمہ دار ہے:

• ایک بلاک عنصر کتنی جگہ گھیرتا ہے۔
• آیا سرحدیں اور/یا مارجن اوور لیپ ہوتے ہیں یا کولیپس ہوتے ہیں۔
• ایک باکس کے ابعاد۔

باکس ماڈل میں درج ذیل قواعد ہیں:

• ایک بلاک عنصر کے ابعاد کا حساب 'width'، 'height'، 'padding'، 'border's، اور 'margin's سے لگایا جاتا ہے۔
• اگر کوئی 'height' کی وضاحت نہیں کی جاتی ہے، تو ایک بلاک عنصر اس کے مواد کے برابر اونچا ہوگا، علاوہ 'padding' (سوائے اس کے کہ جب فلوٹس ہوں، جس کے لیے نیچے دیکھیں)۔
• اگر کوئی 'width' کی وضاحت نہیں کی جاتی ہے، تو ایک غیر فلوٹ بلاک عنصر اپنے پیرنٹ کی چوڑائی کو فٹ کرنے کے لیے پھیل جائے گا، 'padding' کو کم کر کے۔
• ایک عنصر کی 'height' کا حساب مواد کی 'height' سے لگایا جاتا ہے۔
• ایک عنصر کی 'width' کا حساب مواد کی 'width' سے لگایا جاتا ہے۔
• بطور ڈیفالٹ، 'padding's اور 'border's کسی عنصر کی 'width' اور 'height' کا حصہ نہیں ہوتے۔

• بطور ڈیفالٹ، عناصر پر 'box-sizing: content-box' لاگو ہوتا ہے، اور صرف مواد کا سائز ہی شمار کیا جاتا ہے۔
• 'box-sizing: border-box' عناصر کی 'width' اور 'height' کا حساب لگانے کا طریقہ بدل دیتا ہے، 'border' اور 'padding' بھی حساب میں شامل ہوتے ہیں۔
• ایک عنصر کی 'height' کا حساب اب مواد کی 'height' + عمودی 'padding' + عمودی 'border' width سے لگایا جاتا ہے۔
• ایک عنصر کی 'width' کا حساب اب مواد کی 'width' + افقی 'padding' + افقی 'border' width سے لگایا جاتا ہے۔
• 'padding's اور 'border's کو ہمارے باکس ماڈل کے حصے کے طور پر شامل کرنا اس بات سے زیادہ ہم آہنگ ہوتا ہے کہ ڈیزائنرز اصل میں گرڈز میں مواد کا تصور کیسے کرتے ہیں۔

• 'none'، 'block'، 'inline'، 'inline-block'، 'flex'، 'grid'، 'table'، 'table-row'، 'table-cell'، 'list-item'۔

| 'display' | وضاحت | | :-- | :-- | | 'none' | کسی عنصر کو ظاہر نہیں کرتا (عنصر اب دستاویز کے لے آؤٹ کو متاثر نہیں کرتا)۔ تمام چائلڈ عناصر بھی اب ظاہر نہیں ہوتے۔ دستاویز ایسے رینڈر ہوتی ہے جیسے عنصر دستاویز کے درخت میں موجود ہی نہ ہو | | 'block' | عنصر بلاک سمت میں پوری لائن (جو عام طور پر افقی ہوتی ہے) استعمال کرتا ہے | | 'inline' | عناصر ایک دوسرے کے ساتھ ترتیب دیے جا سکتے ہیں | | 'inline-block' | 'inline' کی طرح ہے، لیکن کچھ 'block' خصوصیات کی اجازت دیتا ہے جیسے 'width' اور 'height' سیٹ کرنا | | 'table' | '<table>' عنصر کی طرح برتاؤ کرتا ہے | | 'table-row' | '<tr>' عنصر کی طرح برتاؤ کرتا ہے | | 'table-cell' | '<td>' عنصر کی طرح برتاؤ کرتا ہے | | 'list-item' | '<li>' عنصر کی طرح برتاؤ کرتا ہے جو اسے 'list-style-type' اور 'list-style-position' کی وضاحت کرنے کی اجازت دیتا ہے |

میں اچھے اقدام کے لیے 'block' کے ساتھ موازنہ کروں گا۔

| | 'block' | 'inline-block' | 'inline' | | --- | --- | --- | --- | | سائز | اپنے پیرنٹ کنٹینر کی چوڑائی بھرتا ہے۔ | مواد پر منحصر ہے۔ | مواد پر منحصر ہے۔ | | پوزیشننگ | ایک نئی لائن پر شروع ہوتا ہے اور اس کے ساتھ کوئی HTML عناصر برداشت نہیں کرتا (سوائے جب آپ 'float' شامل کریں) | دوسرے مواد کے ساتھ بہتا ہے اور اس کے ساتھ دوسرے عناصر کی اجازت دیتا ہے۔ | دوسرے مواد کے ساتھ بہتا ہے اور اس کے ساتھ دوسرے عناصر کی اجازت دیتا ہے۔ | | 'width' اور 'height' کی وضاحت کر سکتے ہیں | ہاں | ہاں | نہیں. اگر سیٹ کیا جائے تو نظر انداز کر دے گا۔ | | 'vertical-align' کے ساتھ سیدھا کیا جا سکتا ہے | نہیں | ہاں | ہاں | | مارجنز اور پیڈنگز | تمام اطراف کا احترام کیا جاتا ہے۔ | تمام اطراف کا احترام کیا جاتا ہے۔ | صرف افقی اطراف کا احترام کیا جاتا ہے۔ عمودی اطراف، اگر بیان کیے گئے ہوں، تو لے آؤٹ کو متاثر نہیں کرتے۔ عمودی جگہ جو یہ لیتا ہے وہ 'line-height' پر منحصر ہے، حالانکہ 'border' اور 'padding' بصری طور پر مواد کے ارد گرد ظاہر ہوتے ہیں۔ | | فلوٹ | - | - | ایک 'block' عنصر کی طرح ہو جاتا ہے جہاں آپ عمودی مارجنز اور پیڈنگز سیٹ کر سکتے ہیں۔ |

ایک پوزیشن والا عنصر وہ عنصر ہوتا ہے جس کی computed 'position' پراپرٹی یا تو 'relative'، 'absolute'، 'fixed' یا 'sticky' ہو۔

• 'static' - ڈیفالٹ پوزیشن؛ عنصر عام طور پر صفحے میں بہے گا۔ 'top'، 'right'، 'bottom'، 'left' اور 'z-index' پراپرٹیز لاگو نہیں ہوتی ہیں۔
• 'relative' - عنصر کی پوزیشن خود کے نسبت ایڈجسٹ کی جاتی ہے، بغیر لے آؤٹ کو تبدیل کیے (اور اس طرح عنصر کے لیے ایک خلا چھوڑ دیا جاتا ہے جہاں یہ پوزیشن میں نہ ہوتا تو ہوتا)۔
• 'absolute' - عنصر کو صفحے کے بہاؤ سے ہٹا دیا جاتا ہے اور اس کی قریب ترین پوزیشن والے آبائی عنصر کے نسبت ایک مخصوص پوزیشن پر رکھا جاتا ہے اگر کوئی ہے، یا بصورت دیگر ابتدائی کنٹیننگ بلاک کے نسبت۔ مکمل طور پر پوزیشن والے باکسز کے مارجن ہو سکتے ہیں، اور وہ کسی دوسرے مارجن کے ساتھ کولیپس نہیں ہوتے۔ یہ عناصر دوسرے عناصر کی پوزیشن کو متاثر نہیں کرتے۔
• 'fixed' - عنصر کو صفحے کے بہاؤ سے ہٹا دیا جاتا ہے اور ویو پورٹ کے نسبت ایک مخصوص پوزیشن پر رکھا جاتا ہے اور اسکرول کرنے پر حرکت نہیں کرتا۔
• 'sticky' - اسٹکی پوزیشننگ ریلیٹو اور فکسڈ پوزیشننگ کا ایک ہائبرڈ ہے۔ عنصر کو 'relative' پوزیشن والے کے طور پر سمجھا جاتا ہے جب تک کہ یہ ایک مخصوص حد کو عبور نہ کرے، اس وقت اسے 'fixed' پوزیشن والے کے طور پر سمجھا جاتا ہے۔

• بوٹ اسٹریپ - سست ریلیز سائیکل۔ بوٹ اسٹریپ 4 تقریباً 2 سال سے الفا میں ہے۔ ایک اسپنر بٹن جزو شامل کریں، کیونکہ یہ وسیع پیمانے پر استعمال ہوتا ہے۔
• سیمانٹک UI - سورس کوڈ کی ساخت تھیم کی حسب ضرورت کو سمجھنا انتہائی مشکل بنا دیتی ہے۔ اس کا غیر روایتی تھیمنگ سسٹم حسب ضرورت بنانے میں درد ہے۔ وینڈر لائبریری کے اندر ہارڈ کوڈڈ کنفگ پاتھ۔ بوٹ اسٹریپ کے برعکس متغیرات کو اوور رائیڈ کرنے کے لیے اچھی طرح ڈیزائن نہیں کیا گیا ہے۔
• بلما - بہت سارے غیر سیمانٹک اور اضافی کلاسز اور مارک اپ درکار ہیں۔ پچھلے ورژن کے ساتھ مطابقت نہیں رکھتا۔ ورژنز کو اپ گریڈ کرنے سے ایپ کو باریک طریقوں سے توڑ دیتا ہے۔

جی ہاں۔ فلیکس باکس بنیادی طور پر 1-جہتی لے آؤٹ کے لیے ہے جبکہ گرڈ 2-جہتی لے آؤٹ کے لیے ہے۔

فلیکس باکس CSS میں بہت سے عام مسائل کو حل کرتا ہے، جیسے کہ کنٹینر کے اندر عناصر کی عمودی مرکزیت، اسٹکی فوٹر وغیرہ۔ بوٹ اسٹریپ اور بلما فلیکس باکس پر مبنی ہیں، اور یہ آج کل لے آؤٹ بنانے کا شاید تجویز کردہ طریقہ ہے۔ میں نے پہلے فلیکس باکس کو آزمایا تھا لیکن 'flex-grow' استعمال کرنے میں کچھ براؤزر کی عدم مطابقت کے مسائل (سفاری) میں پھنس گیا، اور مجھے اپنے کوڈ کو 'inline-blocks' اور ریاضی کا استعمال کرتے ہوئے دوبارہ لکھنا پڑا تاکہ چوڑائیوں کو فیصد میں حساب کیا جا سکے، یہ کوئی اچھا تجربہ نہیں تھا۔

گرڈ گرڈ پر مبنی لے آؤٹ بنانے کے لیے اب تک کا سب سے بدیہی طریقہ ہے (یہ بہتر ہوگا!) لیکن براؤزر سپورٹ فی الحال وسیع نہیں ہے۔

یاد رہے کہ یہ دونوں 2 طریقے خصوصی نہیں ہیں۔

کسی ویب سائٹ کو ریسپونسیو بنانے کا مطلب ہے کہ کچھ عناصر ڈیوائس کی اسکرین کے سائز کے مطابق اپنی سائز یا دیگر فعالیت کو ڈھال کر جواب دیں گے، عام طور پر ویو پورٹ کی چوڑائی، CSS میڈیا کیوریز کے ذریعے، مثال کے طور پر، چھوٹی ڈیوائسز پر فونٹ کا سائز چھوٹا کرنا۔

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

موبائل فرسٹ حکمت عملی بھی ریسپونسیو ہے، تاہم یہ اس بات سے اتفاق کرتی ہے کہ ہمیں موبائل ڈیوائسز کے لیے تمام اسٹائلز کو بطور ڈیفالٹ اور تعریف کرنی چاہیے، اور بعد میں صرف دیگر ڈیوائسز کے لیے مخصوص ریسپونسیو قواعد شامل کرنے چاہیے۔ پچھلی مثال پر عمل کرتے ہوئے:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

موبائل فرسٹ حکمت عملی کے 2 اہم فوائد ہیں:

• یہ موبائل ڈیوائسز پر زیادہ کارکردگی دکھاتی ہے، کیونکہ ان کے لیے لاگو ہونے والے تمام قواعد کو کسی بھی میڈیا کیوریز کے خلاف توثیق کرنے کی ضرورت نہیں ہوتی۔
• یہ ریسپونسیو CSS قواعد کے احترام میں صاف کوڈ لکھنے پر مجبور کرتی ہے۔

ریسپونسیو اور اڈاپٹیو دونوں ڈیزائن مختلف آلات پر صارف کے تجربے کو بہتر بنانے کی کوشش کرتے ہیں، مختلف ویو پورٹ سائز، ریزولوشنز، استعمال کے سیاق و سباق، کنٹرول میکانزم وغیرہ کے لیے ایڈجسٹ کرتے ہیں۔

ریسپونسیو ڈیزائن لچک کے اصول پر کام کرتا ہے - ایک واحد فلوئڈ ویب سائٹ جو کسی بھی آلہ پر اچھی لگ سکتی ہے۔ ریسپونسیو ویب سائٹیں میڈیا کیوریز، لچکدار گرڈز، اور ریسپونسیو تصاویر کا استعمال کرتی ہیں تاکہ ایک ایسا صارف تجربہ تیار کیا جا سکے جو متعدد عوامل کی بنیاد پر لچکدار اور تبدیل ہوتا ہے۔ جیسے ایک ہی گیند مختلف hoops سے گزرنے کے لیے بڑھتی یا سکڑتی ہے۔

اڈاپٹیو ڈیزائن پروگریسو انہینسمنٹ کی جدید تعریف کی طرح ہے۔ ایک لچکدار ڈیزائن کے بجائے، اڈاپٹیو ڈیزائن آلہ اور دیگر خصوصیات کا پتہ لگاتا ہے اور پھر پہلے سے طے شدہ ویو پورٹ سائز اور دیگر خصوصیات کے سیٹ کی بنیاد پر مناسب خصوصیت اور لے آؤٹ فراہم کرتا ہے۔ سائٹ استعمال شدہ آلہ کی قسم کا پتہ لگاتی ہے اور اس آلہ کے لیے پہلے سے سیٹ لے آؤٹ فراہم کرتی ہے۔ کئی مختلف سائز کے hoops سے گزرنے والی ایک ہی گیند کے بجائے، آپ کے پاس hoop کے سائز کے لحاظ سے استعمال کرنے کے لیے کئی مختلف گیندیں ہوں گی۔

دونوں طریقوں میں کچھ مسائل ہیں جن پر غور کرنے کی ضرورت ہے:

• ریسپونسیو ڈیزائن کافی چیلنجنگ ہو سکتا ہے، کیونکہ آپ بنیادی طور پر تمام حالات کو فٹ کرنے کے لیے ایک ہی لچکدار لے آؤٹ استعمال کر رہے ہیں۔ میڈیا کیوری بریک پوائنٹس کو کیسے سیٹ کیا جائے یہ ایک ایسا چیلنج ہے۔ کیا آپ معیاری بریک پوائنٹ اقدار استعمال کرتے ہیں؟ یا، کیا آپ ایسے بریک پوائنٹس استعمال کرتے ہیں جو آپ کے مخصوص لے آؤٹ کے لیے معنی خیز ہوں؟ اگر وہ لے آؤٹ تبدیل ہو جائے تو کیا ہوگا؟
• اڈاپٹیو ڈیزائن عام طور پر یوزر ایجنٹ اسنفنگ، یا DPI کا پتہ لگانے وغیرہ کی ضرورت ہوتی ہے، یہ سب کچھ غیر قابل اعتماد ثابت ہو سکتا ہے۔

ریٹنا صرف ایک مارکیٹنگ کی اصطلاح ہے جو ہائی ریزولوشن اسکرینز کو پکسل ریشو 1 سے زیادہ کے ساتھ حوالہ دیتی ہے۔ جاننے کی اہم بات یہ ہے کہ پکسل ریشو کا استعمال کا مطلب ہے کہ یہ ڈسپلے عناصر کو ایک ہی سائز کے ساتھ دکھانے کے لیے کم ریزولوشن اسکرین کی نقل کر رہے ہیں۔ آج کل ہم تمام موبائل آلات کو ریٹنا ڈی فیکٹو ڈسپلے سمجھتے ہیں۔

براؤزر بطور ڈیفالٹ DOM عناصر کو ڈیوائس ریزولوشن کے مطابق رینڈر کرتے ہیں، سوائے تصاویر کے۔

ریٹنا ڈسپلے کا بہترین استعمال کرنے والے کرسپ، خوبصورت گرافکس حاصل کرنے کے لیے ہمیں جہاں ممکن ہو ہائی ریزولوشن تصاویر استعمال کرنے کی ضرورت ہے۔ تاہم ہمیشہ سب سے زیادہ ریزولوشن تصاویر استعمال کرنے سے کارکردگی پر اثر پڑے گا کیونکہ زیادہ بائٹس تار پر بھیجنے کی ضرورت ہوگی۔

اس مسئلے پر قابو پانے کے لیے، ہم HTML5 میں بیان کردہ ریسپونسیو تصاویر استعمال کر سکتے ہیں۔ اس کے لیے براؤزر کو ایک ہی تصویر کی مختلف ریزولوشن فائلیں دستیاب کرانے اور اسے یہ فیصلہ کرنے دینے کی ضرورت ہوتی ہے کہ کون سی تصویر بہترین ہے، HTML خصوصیت 'srcset' اور اختیاری طور پر 'sizes' کا استعمال کرتے ہوئے، مثال کے طور پر:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

یہ نوٹ کرنا ضروری ہے کہ وہ براؤزر جو HTML5 کے 'srcset' کو سپورٹ نہیں کرتے (یعنی IE11) اسے نظر انداز کر دیں گے اور اس کے بجائے 'src' استعمال کریں گے۔ اگر ہمیں واقعی IE11 کو سپورٹ کرنے کی ضرورت ہے اور ہم کارکردگی کی وجوہات کی بنا پر یہ خصوصیت فراہم کرنا چاہتے ہیں تو ہم ایک جاوا اسکرپٹ پولی فل استعمال کر سکتے ہیں، مثلاً:

آئیکنز کے لیے، میں جہاں ممکن ہو SVG اور آئیکن فونٹس استعمال کرنے کو بھی ترجیح دوں گا، کیونکہ وہ ریزولوشن سے قطع نظر بہت کرسپ رینڈر ہوتے ہیں۔

'translate()' CSS 'transform' کی ایک قدر ہے۔ 'transform' یا 'opacity' کو تبدیل کرنے سے براؤزر ری فلو یا ری پینٹ کو متحرک نہیں کرتا بلکہ کمپوزیشنز کو متحرک کرتا ہے؛ جبکہ مطلق پوزیشننگ کو تبدیل کرنے سے 'reflow' متحرک ہوتا ہے۔ 'transform' براؤزر کو عنصر کے لیے ایک GPU پرت بنانے کا سبب بنتا ہے لیکن مطلق پوزیشننگ خصوصیات کو تبدیل کرنے سے CPU استعمال ہوتا ہے۔ لہذا 'translate()' زیادہ موثر ہے اور ہموار اینیمیشنز کے لیے پینٹ کے کم وقت کا نتیجہ ہوگا۔

'translate()' کا استعمال کرتے وقت، عنصر اب بھی اپنی اصل جگہ پر قابض رہتا ہے (کچھ 'position: relative' کی طرح)، مطلق پوزیشننگ کو تبدیل کرنے کے برعکس۔