مواد
- قبول تصاویر
- کارکردگی
- مشروط اور سست لوڈنگ
- قبول نوع ٹائپ
- جاوا اسکرپٹ میں میڈیا سوالات
- ترقی پسندانہ اضافہ
- ترتیب
- سی ایس ایس گرڈ ترتیب
- آخر میں
قبول ویب ڈیزائن حیرت انگیز حد تک آسان لگتا ہے۔ لے آؤٹ کے ل flex لچکدار گرڈ کا انتخاب کریں ، لچکدار میڈیا (تصاویر ، ویڈیو ، iframes) استعمال کریں ، اور کسی بھی ویو پورٹ پر مشمولات کا بہترین بندوبست کرنے کے لئے ان پیمائشوں کو اپ ڈیٹ کرنے کیلئے میڈیا کے سوالات کا اطلاق کریں۔ عملی طور پر ہم نے یہ سیکھا ہے کہ واقعی اتنا آسان نہیں ہے۔ چھوٹے منصوبے جو ہر منصوبے کے دوران پیدا ہوتے ہیں وہ ہمیں اپنے سروں کو کھرچتے رہتے ہیں ، اور کبھی کبھار یہاں تک کہ ہمارے ڈیسک پر انگلی کے ناخن بھی تراشتے ہیں۔
چونکہ میں نے قبول ڈیزائن ہفتہ وار نیوز لیٹر کی تشکیل شروع کی ہے اس لئے میں خوش قسمت رہا ہوں کہ ویب کمیونٹی کے بہت سے ممبروں کے ساتھ بات کروں اور ان کے تجربات سنے۔ میں حقیقت میں یہ جاننا چاہتا تھا کہ برادری واقعتا learn کیا سیکھنا چاہتی ہے ، لہذا میں نے ایک سروے قارئین تک پہنچایا۔ یہاں سر فہرست نتائج ہیں:
- قبول تصاویر
- کارکردگی کو بہتر بنانا
- قبول نوع ٹائپ
- جاوا اسکرپٹ میں میڈیا سوالات
- ترقی پسند افزودگی
- ترتیب
ان موضوعات کو ذہن میں رکھتے ہوئے ، میں نے اپنے صنعت کے کچھ رہنماؤں سے ان کے خیالات پوچھنے کے لئے پوڈ کاسٹوں کا ایک سلسلہ چلایا۔ ان کے جوابات میں ، ایک نقطہ متفقہ تھا: دلچسپ اور جدید تکنیک کے بارے میں فکر کرنے سے پہلے بنیادی باتوں کو سمجھنے پر توجہ دیں۔ چیزوں کو بنیادی باتوں پر واپس لے جانے سے ، ہم ہر ایک کے ل. ایک مضبوط انٹرفیس تیار کرنے کے اہل ہو جاتے ہیں ، جب آلہ یا صارف کا سیاق و سباق اجازت دیتا ہے تو خصوصیات پر مشتمل ہوتا ہے۔
’تو ... ان جدید تکنیکوں کا کیا ہوگا؟’ سنتا ہوں کہ آپ پوچھتے ہیں۔ میرے خیال میں اسٹیفن ہی نے اس کا بہترین خلاصہ اس وقت کیا جب انہوں نے کہا: ’RWD کی حتمی تکنیک یہ ہے کہ RWD کی کسی بھی جدید تکنیک کا استعمال نہ کرکے شروع کیا جائے۔ تشکیل شدہ مواد کے ساتھ شروع کریں اور اپنا راستہ تیار کریں۔ جب ڈیزائن ٹوٹ جاتا ہے اور مشمولات اس کو حکم دیتے ہیں اور ... بس یہی ہوتا ہے۔
اس مضمون میں ، میں بنیادی باتوں سے شروع کروں گا اور پیچیدگی کی پرتوں کو شامل کروں گا جیسا کہ صورتحال ان جدید تکنیکوں کو استوار کرنے کی اجازت دیتی ہے۔ آو شروع کریں.
قبول تصاویر
جب میڈیا کی پہلی بار ایتھن مارکوٹی نے تعریف کی تھی تو سیال میڈیا آر ڈبلیو ڈی کا ایک کلیدی حصہ تھا۔ چوڑائی: 100٪؛ ، زیادہ سے زیادہ چوڑائی: 100؛؛ آج بھی کام کرتا ہے ، لیکن جوابی تصویری منظر نامہ بہت زیادہ پیچیدہ ہوگیا ہے۔ مدد کرنے کیلئے اسکرین کے سائز ، پکسل کثافت اور آلات کی بڑھتی ہوئی تعداد کے ساتھ ہم زیادہ سے زیادہ کنٹرول کے خواہاں ہیں۔
قبول امیجز کمیونٹی گروپ (آر آئی سی جی) نے تین اہم خدشات کی وضاحت کی تھی۔
- ہم تصویر کے کلو بائٹ سائز جس کو ہم تار بھیج رہے ہیں
- اس تصویر کا جسمانی سائز جس کو ہم اعلی DPI آلات پر بھیج رہے ہیں
- ویو پورٹ کے خاص سائز کے ل art آرٹ کی سمت کی شکل میں شبیہہ کی فصل
یویو ویس نے انڈیگوگو کی مدد سے ، پلک عمل درآمد پر زیادہ تر کام کیا ہے - گوگل کا ویب کٹ کا کانٹا ، اور جب آپ اس کو پڑھ رہے ہوں گے تو یہ کروم اور فائر فاکس میں بھیج دیا جائے گا۔ سفاری 8 srcset بھیجے گی ، تاہم سائز کا وصف صرف رات کے وقت بنتا ہے اور تصویر> ابھی تک نافذ نہیں کیا گیا ہے۔
ہمارے ویب ڈویلپمنٹ کے عمل میں کوئی نئی چیز کی آمد کے ساتھ ، اس کا آغاز کرنا مشکل ہوسکتا ہے۔ آئیے ایک مثال کے ساتھ قدم بہ قدم چلائیں۔
img! - تمام غیر تصویری مددگار براؤزرز کے لئے فال بیک تصویر کا اعلان کریں -> src = "orse-350.webp "! - تمام سائز کے سائز کو سی آر سیٹ میں اعلان کریں۔ ہر تصویر کی چوڑائی کے براؤزر کو مطلع کرنے کیلئے ڈبلیو ڈسکرپٹر کا استعمال کرتے ہوئے تصویر کی چوڑائی شامل کریں ۔--> srcset = "orse-350.webp 350w ،orse-500.webp 500w ،orse-1024.webp 1024w ،orse.webp 2000w "! - سائز ہماری سائٹ کی ترتیب کے براؤزر کو مطلع کرتے ہیں۔ یہاں ہم کسی ایسے ویو پورٹ کے لئے کہہ رہے ہیں جو ems 64 سیمی اور اس سے بڑی ہے ، ایسی تصویر استعمال کریں جو ویو پورٹ -> سائز = "(منٹ کی چوڑائی: em 64 ایم) v 70 وی ڈبلیو پر قبضہ کرے گی ، اگر یہ ویو پورٹ ایسا نہیں ہے تو بڑا ، پھر کسی بھی ویو پورٹ کے لئے جو 37.5 ملی میٹر اور اس سے بڑا ہے ، ایک ایسی تصویر استعمال کریں جو ویو پورٹ کے 95٪ پر مشتمل ہو -> (منٹ کی چوڑائی: 37.5 ملی میٹر) 95 وی ڈبلیو ، - اور اگر ویو پورٹ اس سے چھوٹا ہے تو پھر استعمال کریں۔ ایسی تصویر جس میں ویوپورٹ کے 100٪ پر قبضہ ہوتا ہے -> 100vw "! ہمیشہ ایل ای ٹی ٹیکسٹ رکھتے ہیں ۔--> alt =" ایک گھوڑا "/>
کارکردگی کے نقطہ نظر سے اس سے کوئی فرق نہیں پڑتا اگر آپ سائز وصف میں کم سے کم چوڑائی یا زیادہ سے زیادہ چوڑائی استعمال کرتے ہیں - لیکن ماخذ آرڈر سے کوئی فرق نہیں پڑتا ہے۔ براؤزر ہمیشہ پہلے میچ والے سائز کا استعمال کرے گا۔
اس کے علاوہ ، یاد رکھیں کہ ہم اپنے ڈیزائن کے خلاف براہ راست تعریف کرنے کے لئے سائز کے وصف کو سخت کوڈ کر رہے ہیں۔ اس سے مسائل آگے بڑھنے کا سبب بن سکتے ہیں۔ مثال کے طور پر ، اگر آپ اپنی سائٹ کو نئے سرے سے ڈیزائن کرتے ہیں تو ، آپ کو img> یا تصویر> s کے سب پر دوبارہ نظر ڈالنے اور سائز کو نئی شکل دینے کی ضرورت ہوگی۔ اگر آپ CMS استعمال کر رہے ہیں تو ، آپ کی تعمیر کے عمل کے حصے کے طور پر اس پر قابو پایا جاسکتا ہے۔
ورڈپریس کے پاس مدد کے لئے پہلے سے ہی ایک پلگ ان موجود ہے۔ یہ WP معیاری تصویری اقسام پر srcset کی وضاحت کرتا ہے اور آپ کو مرکزی مقام پر سائز کا اعلان کرنے کی اجازت دیتا ہے۔ جب صفحہ ڈیٹا بیس سے تیار ہوتا ہے ، تو یہ img> پر کسی بھی طرح کے تذکروں کو تبدیل کرتا ہے اور تصویر کی مارک اپ کے ساتھ ان کی جگہ لے لیتا ہے۔
بنیادی
- اس بارے میں سوچئے کہ کیا آپ کو واقعی میں کوئی تصویر شامل کرنے کی ضرورت ہے۔ کیا تصویر کا بنیادی مواد ہے ، یا یہ آرائشی ہے؟ ایک کم شبیہہ کا مطلب تیز بوجھ کا وقت ہوگا
- تصویری اوپٹیم کا استعمال کرتے ہوئے آپ کی ضرورت والی تصاویر کو بہتر بنائیں
- اپنے سرور یا .htaccess فائل پر اپنی تصویروں کے لئے میعاد ختم ہونے والے عنوانات مقرر کریں (’پرفارمنس‘ کے تحت تفصیلات دیکھیں)
- پکچر فل تصویروں کے لئے پولیفل سپورٹ فراہم کرتا ہے
اعلی درجے کی
- jQuery کے سست لوڈ پلگ ان کا استعمال کرتے ہوئے سست اپنی تصاویر لوڈ کریں
- خصوصیت کی کھوج کے ل HTML ایچ ٹی ایم ایل آئیمی ایلمنٹ. سائز اور ایچ ٹی ایم ایل پٹچر ایلیمنٹ کا استعمال کریں۔
- گتوب پر ملنے والا جدید ترین فلٹر فل ڈبلیو پی پلگ ان ، آپ کو اپنی مرضی کے مطابق تصویر کی چوڑائیوں اور سائز کی اقدار کی وضاحت کرنے کی سہولت دے گا
کارکردگی
ہمارے صفحات پر تیزی سے سمجھی جانے والی کارکردگی حاصل کرنے کے ل we ، ہمیں سرور سے پہلے جواب کے اندر اپنے صفحے کے اوپری حصے کو پیش کرنے کے لئے تمام HTML اور CSS کی ضرورت ہے۔ یہ جادو نمبر 14 کلوبٹ ہے اور پہلے راؤنڈ ٹرپ ٹائم (آر ٹی ٹی) کے اندر زیادہ سے زیادہ بھیڑ ونڈو سائز پر مبنی ہے۔
گارڈین میں فرنٹ اینڈ ٹیکنیکل برتری ، پیٹرک ہیمن ، اور ان کی ٹیم فرنٹ اینڈ اور بیک اینڈ ٹیکنیکس کے مرکب کا استعمال کرکے 1000 ایم ایس رکاوٹ کو توڑنے میں کامیاب ہوگئی ہے۔ گارڈین کا نقطہ نظر مطلوبہ مواد کو یقینی بنانا ہے - مضمون - صارف کو جلد از جلد اور 14 کلو وزٹ میجک نمبر کے اندر پہنچایا جائے۔
آئیے اس عمل کو دیکھیں:
- کسی خبر کی کہانی کے گوگل لنک پر صارف کلک کرتا ہے
- مضمون کے لئے ڈیٹا بیس کو ایک ہی بلاک کرنے کی درخواست بھیجی گئی ہے۔ کوئی متعلقہ کہانیوں یا تبصروں کی درخواست نہیں کی جاتی ہے
- ایچ ٹی ایم ایل بھری ہوئی ہے جس میں کریٹیکل سی ایس ایس موجود ہے
- سر میں>
- ایک ‘سرسوں کو کاٹنا’ عمل شروع کیا گیا ہے اور صارف کے آلے کی خصوصیات پر مبنی کوئی بھی مشروط عنصر بھری ہوئی ہیں
- مضمون سے متعلق یا اس کی تائید کرنے سے متعلق کوئی بھی مواد (متعلقہ آرٹیکل امیجز ، آرٹیکل کمنٹس اور اسی طرح) اپنی جگہ پر سست روی کا مظاہرہ کرتے ہیں
اس طرح اہم انجام دینے والے راستہ کو بہتر بنانا اس کا مطلب ہے کہ سر 222 لائن لمبا ہے۔ تاہم ، صارف کے پاس جو تنقیدی مواد اب بھی دیکھنے کے لئے آیا وہ جی زیپ کرنے پر 14kb ابتدائی پے لوڈ کے اندر آتا ہے۔ یہ وہ عمل ہے جو 1000 ملی میٹر کی رکاوٹ کو توڑنے میں مدد کرتا ہے۔
مشروط اور سست لوڈنگ
مشروط لوڈنگ ان کے آلے کی خصوصیت کی بنیاد پر صارف کے تجربے کو بہتر بناتی ہے۔ موڈرنزر جیسے ٹولز آپ کو ان خصوصیات کی جانچ کرنے کی اجازت دیتے ہیں ، لیکن اس بات سے آگاہ رہیں کہ براؤزر کے کہنے پر وہ مدد فراہم کرتا ہے ، اس کا مطلب ہمیشہ مکمل تعاون نہیں ہوتا ہے۔
ایک تکنیک میں کسی بھی چیز کی لوڈنگ کو روکنا ہے جب تک کہ صارف اس خصوصیت کو استعمال کرنے کا ارادہ ظاہر نہ کرے۔ اس کو مشروط سمجھا جائے گا۔ آپ سماجی شبیہیں میں اس وقت تک لوڈنگ کو روک سکتے ہیں جب تک کہ صارف شبیہیں کو چھپائے یا ٹچ نہ کرے ، یا آپ چھوٹے ویو پورٹ پر افرائیم گوگل میپ لوڈ کرنے سے گریز کرسکتے ہیں جہاں صارف کسی وقف کردہ تعریفیں ایپلی کیشن سے منسلک ہونے کو ترجیح دیتے ہیں۔ ایک اور نقطہ نظر یہ ہے کہ ’’ سرسوں کاٹنا ‘‘ - اس بارے میں تفصیلات کے لئے اوپر کا آؤٹ باکس دیکھیں۔
سست لوڈنگ کو کسی ایسی چیز سے تعبیر کیا جاتا ہے جس کا آپ ہمیشہ صفحہ پر لوڈ کرنا چاہتے ہیں۔ وہ تصاویر جو آرٹیکل ، تبصرے یا دیگر متعلقہ مضامین کا ایک حصہ ہیں۔ لیکن اس میں صارف کو مواد کی کھپت شروع کرنے کی ضرورت نہیں ہے۔
بنیادی
- فائلوں کے لئے گیزپنگ کو فعال کریں اور تمام جامد مشمولات کے لئے میعاد ختم ہونے والے ہیڈرز کو سیٹ کریں (netm.ag/expire-260)
- سست لوڈ jQuery پلگ ان کا استعمال کریں۔ ویو پورٹ پر پہنچنے یا وقت کی ایک خاص مدت کے بعد جب یہ تصاویر بھری ہوئی ہیں
اعلی درجے کی
- فاسٹ یا کلاؤڈ فلایر کو سیٹ اپ کریں۔ مواد کی فراہمی کے نیٹ ورک (CDNs) آپ کے مستحکم مواد کو آپ کے اپنے سرور سے زیادہ تیزی سے صارفین تک پہنچاتے ہیں ، اور ان میں کچھ مفت درجات ہوتے ہیں
- متوازی HTTP درخواستوں جیسی HT2 خصوصیات کا فائدہ اٹھانے کے لئے HT2- فعال براؤزرز کے لئے SPDY کو قابل بنائیں
- سماجی شمار آپ کے سماجی شبیہیں کو مشروط لوڈ کرنے کی اجازت دیتا ہے
- جامد نقشے API کا استعمال آپ کو تصاویر کے ل Inte انٹرایکٹو Google نقشہ جات کو تبدیل کرنے کی اجازت دے گا۔ بریڈ فراسٹ کی مثال پر نیٹم ڈاٹ ایگ / اسٹاٹٹی ۔260 پر ایک نظر ڈالیں
- ایجیکس انکلوڈ پیٹرن مواد کے ٹکڑوں کو یا تو ڈیٹا سے پہلے ، ڈیٹا کے بعد یا ڈیٹا کی جگہ سے منسوب وصف سے لوڈ کرے گا
قبول نوع ٹائپ
نوع ٹائپ آپ کے مواد کو ہضم کرنا آسان بناتا ہے۔ قبول نوع ٹائپ میں مختلف وسائل اور ویوپورٹ میں پڑھنے کی اہلیت کو یقینی بنانے کے لئے اس میں توسیع کی گئی ہے۔ اردن مور نے اعتراف کیا کہ اس قسم کی ایک چیز ہے جس پر وہ بجٹ بجانے کو تیار نہیں ہے۔ اگر آپ کی ضرورت ہو تو ایک یا دو تصویر گرا دیں ، لیکن یہ یقینی بنائیں کہ آپ کی قسم عمدہ ہے۔
اسٹیفن ہی نے ایچ ٹی ایم ایل فونٹ کے سائز کو 100 فیصد مقرر کرنے کا مشورہ دیا ہے (پڑھیں: بس جیسا اسے چھوڑ دیں) کیونکہ ہر براؤزر یا ڈیوائس کارخانہ دار کسی خاص ریزولوشن یا ڈیوائس کے لئے معقول طور پر پڑھنے کے قابل ڈیفالٹ بنا دیتا ہے۔ زیادہ تر ڈیسک ٹاپ براؤزرز کے لئے یہ 16 پکسس ہے۔
دوسری طرف ، مور کچھ مخصوص عناصر کے ل for کم سے کم فونٹ سائز متعین کرنے کے لئے REM یونٹ اور HTML فونٹ سائز کا استعمال کرتا ہے۔ مثال کے طور پر ، اگر آپ چاہتے ہیں کہ کسی آرٹیکل کی بائن لائن ہمیشہ 14px ہو ، تو پھر اس کو HTML عنصر پر بیس فونٹ سائز کے طور پر سیٹ کریں اور. لائن {فونٹ سائز: 1rem} مقرر کریں۔ جیسا کہ آپ جسم کو پیمانہ کرتے ہیں: فونٹ سائز: ویو پورٹ کے مطابق کرنے کے لئے آپ. بائن لائن اسٹائل کو متاثر نہیں کریں گے۔
اچھی لکھنے کی لائن کی لمبائی بھی اہم ہے۔ 45 سے 65 حرف تکمیل کریں۔ ایک بک مارکلیٹ ہے جسے آپ اپنے مشمولات کو چیک کرنے کے لئے استعمال کرسکتے ہیں۔ اگر آپ اپنے ڈیزائن کے ساتھ متعدد زبانوں کی حمایت کر رہے ہیں تو ، پھر لائن کی لمبائی بھی مختلف ہوسکتی ہے۔ مور نے وہاں موجود کسی بھی مسئلے کو چھپانے کے لئے: lang (de) آرٹیکل {زیادہ سے زیادہ چوڑائی: 30 م using کے استعمال کا مشورہ دیا ہے۔
عمودی تال برقرار رکھنے کے ل content ، لائن لائن کی اونچائی کی طرح ہی ، مشمولاتی بلاکس ، <<<<<، blockquote> ، table> ، blockquote> اور اسی طرح کے خلاف مارجن-نیچے سیٹ کریں۔ اگر امیجز کے تعارف کے ساتھ تال میں خلل پڑتا ہے تو آپ اسے بیس لائن ڈاٹ جے ایس یا بیس لائن ایلائن ڈاٹ جی ایس شامل کرکے اسے ٹھیک کرسکتے ہیں۔
بنیادی
- اپنے فونٹ کو 100 فی صد جسم پر رکھیں
- رشتہ دار ایم یونٹوں میں کام کریں
- اپنے ڈیزائن میں عمودی تال برقرار رکھنے کیلئے اپنی حاشیہ کو اپنی لائن اونچائی پر رکھیں
اعلی درجے کی
- Enhance.js یا موخر فونٹ لوڈنگ کے ساتھ فونٹ لوڈ کرنے کی کارکردگی کو بہتر بنائیں
- مطلب کی عنوانات کے لئے ساس @ کنولڈس کا استعمال کریں۔
- اکثر ہمیں سائڈبار ویجیٹ میں h5 اسٹائل استعمال کرنے کی ضرورت ہوتی ہے جس میں h2 مارک اپ کی ضرورت ہوتی ہے۔ داڑھی والے ٹائپوگرافک مکسنز کو سائز کو کنٹرول کرنے اور ذیل کے کوڈ کے ساتھ سنمک رہنے کے لئے استعمال کریں:
.sidebar h2 {@ عنوان -5 inc شامل کریں
جاوا اسکرپٹ میں میڈیا سوالات
جب سے ہم میڈیا کے سوالات کے ذریعہ مختلف ویوپورٹ میں لے آؤٹ کو کنٹرول کرنے میں کامیاب ہوچکے ہیں ، تب سے ہم اپنے جاوا اسکرپٹ کو چلانے کے ل tie اس کو جوڑنے کا کوئی طریقہ ڈھونڈ رہے ہیں۔ جاوا اسکرپٹ کو مخصوص ویو پورٹ کی چوڑائیوں ، اونچائیوں اور واقفیت پر فائر کرنے کے کچھ طریقے ہیں اور کچھ ہوشیار افراد نے Enquire.js اور سادہ اسٹیٹ مینیجر جیسے کچھ استعمال میں آسان مقامی JS پلگ ان لکھے ہیں۔ یہاں تک کہ آپ میچمیڈیا کا استعمال کرکے خود بھی اس کو تشکیل دے سکتے ہیں۔ تاہم ، آپ کے پاس یہ مسئلہ ہے کہ آپ کو اپنے سی ایس ایس اور جاوا اسکرپٹ میں اپنے میڈیا سوالات کو نقل کرنے کی ضرورت ہے۔
ہارون گسٹافسن کی ایک صاف چال ہے جس کا مطلب ہے کہ آپ کو اپنے سی ایس ایس اور اپنے جے ایس میں اپنے میڈیا سوالات کا نظم و نسق اور میچ نہیں کرنا ہوگا۔ یہ خیال اصل میں جیریمی کیتھ سے آیا ہے اور اس مثال میں گسٹافسن نے اسے مکمل نفاذ تک پہنچایا ہے۔
getActiveMQ (netm.ag/media-260) کا استعمال کرتے ہوئے ، جسم کے عنصر کے اختتام پر div # getActiveMQ- نگہ دار انجیکشن لگائیں اور اسے چھپائیں۔ پھر سی ایس ایس سیٹ کے اندر # getActiveMQ-watchcher {فونٹ فیملی: توڑ -0؛ media پہلے میڈیا استفسار پر ، فونٹ فیملی: بریک 1؛ دوسرا ، فونٹ-کنبہ: توڑ -2؛ تیسری اور اسی طرح
یہ دیکھنے کے لئے کہ اس ویو پورٹ کا سائز تبدیل ہوا ہے یا نہیں ، اور پھر فعال فونٹ فیملی کو پڑھ کر اسکرپٹ میں واچ ریزائز () (netm.ag/resize-260) کا استعمال کیا گیا ہے۔ اب آپ جے ایس میں اضافہ کرنے کے لook اس طرح استعمال کرسکتے ہیں جیسے ڈی ایل> میں ٹیب انٹرفیس شامل کرنا ، جب ویو پورٹ کی اجازت دیتا ہے ، لائٹ باکس کا طرز عمل تبدیل کرنا ، یا ڈیٹا ٹیبل کی ترتیب کو اپ ڈیٹ کرنا ہے۔ نیٹ ایم ڈاٹ ایگ / ایکٹیو -60 پر getActiveMQ کوڈین دیکھیں۔
بنیادی
- مختلف ویو پورٹ کے لئے جاوا اسکرپٹ کے بارے میں بھول جائیں۔ صارفین کو مواد اور ویب سائٹ کے افعال کو ایک طرح سے فراہم کریں تاکہ وہ اس کو تمام ویو پورٹ پر رسائی حاصل کرسکیں۔ ہمیں کبھی بھی جاوا اسکرپٹ کی ضرورت نہیں ہونی چاہئے
اعلی درجے کی
- میڈیا سوالات کی پیش وضاحتی فہرست کے طور پر بریک اپ کا استعمال کرکے اور getActiveMQ- نگہداشت کرنے والے فونٹ فیملیز کی فہرست کی تخلیق کو خودکار بنا کر گسٹافسن کے طریقہ کار میں اضافہ کریں۔
ترقی پسندانہ اضافہ
ترقی پسندی بڑھانے کے بارے میں ایک عام غلط فہمی یہ ہے کہ لوگ یہ سمجھتے ہیں ، ’’ اوہ ٹھیک ہے میں اس نئی خصوصیت کو استعمال نہیں کر سکتا ‘‘ ، لیکن واقعتا، ، اس کے برعکس ہے۔ ترقی پسندی میں اضافے کا مطلب یہ ہے کہ آپ کسی خصوصیت کی فراہمی کرسکتے ہیں اگر یہ صرف ایک میں یا کسی براؤزر میں تعاون یافتہ ہے ، اور وقت گزرنے کے ساتھ ساتھ نئے ورژن آنے کے ساتھ ہی لوگوں کو ایک بہتر تجربہ ملے گا۔
اگر آپ کسی بھی ویب سائٹ کے بنیادی فعل کو دیکھیں تو آپ اسے HTML کے بطور فراہم کرسکتے ہیں اور سرور کی طرف تمام پروسیسنگ کروا سکتے ہیں۔ ادائیگیاں ، فارمز ، پسندیدگیاں ، ای میلز ، ڈیش بورڈز - یہ سب کچھ ہوسکتا ہے۔ ایک بار جب بنیادی کام تیار ہوجاتا ہے تو ہم اس کے بعد عجیب و غریب ٹیکنالوجیز تیار کرسکتے ہیں ، کیونکہ ہمارے پاس ان لوگوں کو پکڑنے کے لئے حفاظتی جال بچھایا جاتا ہے جو ان میں سے گزرتے ہیں۔ یہاں ہم نے جس جدید ترین طریقوں کے بارے میں بات کی ہے وہ زیادہ تر ترقی پسندی میں اضافہ پر مبنی ہیں۔
ترتیب
لچکدار ترتیب کہنا آسان ہے ، لیکن اس میں بہت سے مختلف انداز ہیں۔ استعمال کرتے ہوئے کم مارک اپ کے ساتھ آسان گرڈ لے آؤٹ تیار کریں: اینٹی چائلڈ () سلیکٹر۔
/ * گرڈ کے لئے موبائل کی پہلی چوڑائی کا اعلان کریں * / .gg-1-4 {فلوٹ: بائیں؛ چوڑائی: 100٪؛ } / * جب ویو پورٹ کم از کم 37.5 ملی میٹر ہو تو گرڈ کو فی عنصر 50٪ پر سیٹ کریں (* / @ میڈیا (منٹ کی چوڑائی: 37.5 ملی میٹر) g. گرڈ-1-4 {چوڑائی: 50٪؛ } / * پہلے سیکنڈ کے بعد ہر دوسرے عنصر کو فلوٹ صاف کریں۔ اس کو 3 ، 5 ، 7 ویں ، 9 ویں… گرڈ میں نشانہ بنایا گیا ہے۔ * / .grid-1-4: nth-of-type (2n + 1) {واضح: بائیں؛ }} @ میڈیا (منٹ کی چوڑائی: 64 ایم) g. گرڈ-1-4 {چوڑائی: 25٪؛ } / * پچھلی واضح کو ہٹا دیں * / .gg-1-4: nth-of-type (2n + 1) {واضح: کوئی نہیں؛ } / * پہلے چوتھے عنصر کے بعد ہر چوتھا عنصر کو صاف کریں۔ اس کو 5 ، 9 ویں ... کو گرڈ میں نشانہ بنایا گیا ہے۔ * / .grid-1-4: nth-of-type (4n + 1) {واضح: بائیں؛ }
اپنی ترتیب کے ل using پوزیشن اور فلوٹ کے استعمال کو الوداع کریں۔ اگرچہ انہوں نے آج تک ہماری اچھی طرح سے خدمت کی ہے ، لیکن ترتیب کے لئے ان کا استعمال ضروری ہیک رہا ہے۔ اب ہمارے پاس اس بلاک پر دو نئے بچے ملے ہیں جو ہماری تمام ترتیب پریشانیوں کو حل کرنے میں مدد کریں گے۔ فلیکس باکس اور گرڈ۔
فلیکس باکس انفرادی ماڈیولز کے لئے بہت اچھا ہے ، جو ہر ماڈیول میں مواد کے ٹکڑوں کی ترتیب کو کنٹرول کرتا ہے۔ ہماری کچھ ایسی ترتیب ہیں جن کی فراہمی کی ہم کوشش کرتے ہیں جو فیلیکس باکس کا استعمال کرتے ہوئے آسانی سے حاصل کیا جاسکتا ہے ، اور یہ قابل قبول سائٹوں کے ساتھ بھی زیادہ حقیقت میں ہے۔ اس کے بارے میں مزید معلومات کے ل CSS ، فلیکس باکس یا فلیکس باکس پولی فیل کیلئے سی ایس ایس ٹرکس کی ہدایت نامہ دیکھیں۔
سی ایس ایس گرڈ ترتیب
میکرو سطح کی ترتیب کے لئے گرڈ زیادہ ہے۔ گرڈ لے آؤٹ ماڈیول آپ کو اپنے سی ایس ایس میں اپنی ترتیب کو بیان کرنے کا ایک عمدہ طریقہ فراہم کرتا ہے۔ اگرچہ ابھی اس مسودے کے مرحلے میں ہے ، میں اس مضمون کی سفارش سی ایس ایس گرڈ ترتیب راچیل اینڈریو کے ذریعہ کرتا ہوں۔
آخر میں
آپ کے جوابی عمل کو بڑھانے کے لئے یہ چند نکات ہیں۔ کسی بھی نئے جوابدہ کام کے قریب پہنچنے پر ، ایک قدم پیچھے ہٹیں اور اس بات کو یقینی بنائیں کہ آپ بنیادی باتوں کو صحیح سمجھیں۔ اپنے مشمولات ، HTML اور پرت کے بہتر تجربات کے ساتھ ان کا آغاز کریں اور اس بات کی کوئی حد نہیں ہوگی کہ آپ اپنے ڈیزائن کو کس جگہ لے جاسکیں۔
یہ مضمون اصل میں 260 کے شمارے میں شائع ہوا ہے نیٹ میگزین.
