سپر فاسٹ سی ایس ایس کے لئے 5 تجاویز

Sep 14, 2025
کيسے

کیا آپ نے اپنی سائٹ کے سی ایس ایس کے سائز کے بارے میں سوچا ہے؟ اگر آپ کا انداز شیٹ بلوننگ ہے تو، یہ صفحہ انجام دینے میں تاخیر کر سکتا ہے.

  • 16 اوپر سی ایس ایس حرکت پذیری کی مثالیں

اگرچہ سی ایس ایس سب سے بڑی اثاثہ کی قسم نہیں ہے جب آپ خدمت کریں گے، یہ سب سے پہلے میں سے ایک ہے کہ براؤزر کو پتہ چلتا ہے. کیونکہ براؤزر اس صفحے کو انجام دینے سے روک دیا جاتا ہے جب تک سی ایس ایس ڈاؤن لوڈ اور پیروی کیا جاتا ہے، یہ ممکن ہو سکے جتنا ممکن ہو. یہاں آپ کی مدد کرنے کے لئے پانچ تجاویز ہیں.

ایک پیچیدہ سائٹ ملا؟ آپ کو کامل کی ضرورت ہے ویب میزبانی سروس. یا، اگر آپ بغیر کسی سائٹ کو بنانے کے لئے چاہتے ہیں، تو کوشش کریں ویب سائٹ بلڈر .

01. آلو انتخاب کاروں کا استعمال کریں

آپ کے والدین نے آپ کو بتایا کہ خوشحالی ایک فضیلت نہیں ہے، لیکن جب یہ سی ایس ایس آتا ہے، تو وہ غلط ہیں. مسلسل استعمال کیا جاتا ہے، اتسو انتخاب کاروں کو بڑے انداز کے چادروں سے کلوبائٹس ٹرم کر سکتے ہیں. یہ منتخب کریں: 

nav ul li.nav-item

یہ زیادہ واضح طور پر اظہار کیا جا سکتا ہے: 

.nav-item

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

مثالی طور پر، آپ چاہتے ہیں کہ انتخاب کاروں کو ممکنہ طور پر اتوار کے طور پر ہونا چاہتے ہیں، لیکن اس کا مطلب یہ نہیں ہے کہ آپ کو ہڈی میں سب کچھ کم کرنا چاہئے. کبھی کبھی آپ کو اجزاء کو بڑھانے کے لئے اضافی مخصوصیت کی ضرورت ہے. صحیح توازن کو ہڑتال کرو، لیکن عملی طور پر بھی.

02. آثار قدیمہ کی خصوصیات کا استعمال کریں

Using shorthand CSS will speed up your site

Shorthand CSS کا استعمال کرتے ہوئے آپ کی سائٹ کو تیز کرے گی

یہ عام احساس کی طرح لگتا ہے، لیکن آپ حیران ہوں گے کہ کتنی بار لونگھند کی خصوصیات غیر ضروری طور پر استعمال کرتے ہیں. یہاں کچھ LORGHAN پر خصوصیات کا ایک مثال ہے: 

 فونٹ سائز: 1.5rem؛
لائن اونچائی: 1.618؛
فونٹ-خاندان: "ایریل"، "ہیلیویٹیکا"، سنس-سیرف؛

یہ بہت سی سی ایس ہے! چلو یہ صاف ہے: 

 فونٹ: 1.5REM / 1.618 "Arial"، "ہیلیویٹیکا"، سینس سیرف؛

The. فونٹ Shorthand کی جائیداد بہت سے اعلانات ایک آسان ایک لائنر میں بہت کم جگہ لیتا ہے جو بہت کم جگہ لیتا ہے.

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

بلکل، فونٹ آپ کے لئے دستیاب واحد آثار نہیں ہے. مثال کے طور پر، مارجن طویل خصوصیات کی جگہ پر استعمال کیا جا سکتا ہے جیسے مارجن- اوپر ، مارجن - دائیں اور اسی طرح.

The. Padding. جائیداد اسی طرح کام کرتا ہے. آپ کے سی ایس ایس کو صاف کرنے کے مزید طریقوں کے لئے، موزیلا ڈویلپر نیٹ ورک ایک مددگار فہرست پیش کرتا ہے آثار قدیمہ پراپرٹی حوالہ جات .

کیا آپ کو جھگڑا میں مزید قیمت کو زیادہ سے زیادہ کرنے کی ضرورت ہے؟ مثال کے طور پر، آتے ہیں کہ آپ کے پاس ایک عنصر عنصر ہے جو بڑے ڈسپلے کے لئے اپنے فونٹ کا سائز تبدیل کرنے کی ضرورت ہے.

اس صورت میں، آپ کو زیادہ مخصوص استعمال کرنا چاہئے حرف کا سائز بجائے ملکیت: 

 H1 {
    فونٹ: 1.5rem / 1.618 "Arial"، "ہیلیویٹیکا"، سینس سیرف؛
}
media (منی چوڑائی: 60REM) {
    H1 {
        فونٹ سائز: 2rem؛
    }
}

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

03. Preload وسائل اشارہ کا استعمال کریں

The. preload. وسائل اشارہ براؤزر کو آپ کی سائٹ کے سی ایس ایس لوڈ کرنے پر ایک سر شروع کر سکتا ہے. The. preload. وسائل اشارہ ایک اثاثہ کے لئے ابتدائی بازو شروع کرنے کے لئے براؤزر کو بتاتا ہے.

آپ اسے ایک کے طور پر مقرر کر سکتے ہیں & lt؛ لنک اور جی ٹی؛ ایچ ٹی ایم ایل میں ٹیگ:

<پری زبان = "ایچ ٹی ایم ایل"> <کوڈ> & lt؛ لنک REL = "Preload" href = "/ CSS / Styles.css" AS = "سٹائل" اور جی ٹی؛

یا آپ کے سرور کی ترتیب میں HTTP ہیڈر کے طور پر:

<پری زبان = "http"> <کوڈ> لنک: & lt؛ /css/styles.csss> ؛؛ rel = preload؛ AS = انداز

ان دونوں نظریات میں، preload. براؤزر کو ایک سر لوڈنگ پر شروع ہوتا ہے / css/styles.css. . استعمال کرتے ہوئے preload. HTTP ہیڈر میں ترجیحی ہے، کیونکہ اس کا مطلب یہ ہے کہ براؤزر جواب کے ہیڈر میں پہلے ہی اشارہ ہیڈر میں اشارہ کرے گا، بعد میں جواب کے جسم میں.

استعمال کرنے کا ایک اور سبب preload. HTTP ہیڈر میں یہ ہے کہ یہ زیادہ سے زیادہ HTTP / 2 عمل درآمد پر سرور دھکا ایونٹ شروع کرے گا. سرور دھکا ایک میکانزم ہے جس کی وجہ سے اثاثوں کو قبل از کم کلائنٹ کو دھکا دیا جاتا ہے جب مواد کی درخواستوں کی درخواست کی جاتی ہے، اور یہ سی ایس ایس کو انلاک کرنے کی طرح کارکردگی کے فوائد پیش کرتا ہے.

HTTP / 1 پر سرور دھکا دستیاب نہیں ہے. تاہم، استعمال کرتے ہوئے preload. HTTP / 1 ماحول میں اب بھی کارکردگی کو بہتر بنا سکتا ہے.

04. CSSCSS کے ساتھ کل ریورسز

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations

CSSCSS کسی بھی سی ایس ایس کی فائلوں کا تجزیہ کرے گا جسے آپ اسے دیتے ہیں اور آپ کو بتائیں کہ کونسلوں نے اعلانات کو نقل کیا ہے

یہ آپ کے سی ایس ایس کو بے ترتیب چیکر کے ساتھ ڈپلیکیٹ قواعد کے لۓ چیک کر سکتا ہے. مثال کے طور پر روبی پر مبنی آلے سی ایس ایس ایس لے لو.

روبی صارفین اس کے ساتھ انسٹال کرسکتے ہیں:

<پری زبان = "روبی"> <کوڈ> منی انسٹال CSSCSS

ایک بار انسٹال ہونے کے بعد، آپ اپنے سی ایس ایس کی طرح اس طرح کی کمی کے لئے جانچ کر سکتے ہیں:

<پری زبان = "روبی"> <کوڈ> CSSCSS -V Styles.css

یہ کمانڈ کی فہرست ہے جس میں منتخب کردہ قواعد و ضوابط کا حصہ ہے جو آپ کو جگہ کو بچانے کے لئے ڈپلیکیٹ کر سکتے ہیں: 

 {H1} اور {P} 3 اعلانات کا اشتراک کریں
  رنگ: # 000.
  لائن کی اونچائی: 1.618.
  مارجن: 0 0 1.5rem

آپ ایک انتخاب کنندہ کے تحت ڈپلیکیٹ قوانین منتقل کر سکتے ہیں: 

 H1، P {
    رنگ: # 000؛
    لائن اونچائی: 1.618؛
    مارجن: 0 0 1.5rem؛
}

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

05. CSSNANO کے ساتھ اضافی میل پر جائیں

cssnano takes your nicely formatted CSS and runs it through many focused optimisations

CSSNANO آپ کی اچھی طرح سے فارمیٹ کردہ سی ایس ایس لیتا ہے اور بہت سے توجہ مرکوز امیدوں کے ذریعے چلتا ہے

سب سے اوپر چیری کے لئے، آپ استعمال کر سکتے ہیں CSSNANO. - ایک نوڈ اور پوسٹ سی ایس ایس پر منحصر آلہ. CSSNANO نہ صرف سی ایس ایس کو کم کرتا ہے، یہ بہت سے توجہ مرکوز کرنے والے اصلاحات بناتا ہے جو آپ کے سی ایس ایس کو بھی کم کرسکتا ہے. اس طرح آپ کے سسٹم پر این پی ایم کے ساتھ انسٹال کریں: 

 NPM I -g CSSNANO-CLI

پھر اپنے سی ایس ایس کو بہتر بنانے کیلئے اسے استعمال کریں: 

 CSSNANO STYLES.CSS آپٹمائزڈ-شیلیوں. سی ایس ایس

اگر چل رہا ہے حکموں کو چل رہا ہے تو آپ کی سٹائل نہیں ہے، آپ تعمیراتی نظام کے ساتھ CSSNANO کو خودکار کرسکتے ہیں. گلپفائل میں CSSNANO کیسے استعمال کرنا ہے: 

 تعمیر گلپ = کی ضرورت ہے ("گلپ")؛
COST POSTCSS = کی ضرورت ہے ("گلپ پوسٹس")؛
COST CSSNANO = کی ضرورت ہے ("CSSNANO")؛

COST Buildcss = () = & gt؛ {
    GUBP.SRC ("سی ایس ایس / شیلیوں. سی ایس ایس" واپس لو)
        .pipe (Postcss ([CSSNANO ()]
        .pipe (gulp.dest ("سی ایس ایس / مرضی کے مطابق"))؛
}؛
Const واچ = () = & gt؛ {
    gulp.watch ("سی ایس ایس / شیلیوں. css"، buildcss)؛
}؛
برآمد. Buildcss = buildcss؛
برآمدات = گھڑی؛

The. Buildcss. ٹاسک آپ لکھتے ہیں سی ایس ایس پڑھتے ہیں سی ایس ایس / شیلیوں. css. پھر، اس کے لئے مرضی کے مطابق پیداوار پائپ سی ایس ایس / مرضی کے مطابق ڈائرکٹری. The. دیکھو ٹاسک بند Buildcss. جب بھی تبدیل ہوتا ہے سی ایس ایس / شیلیوں. css. .

The. دیکھو اس کے بعد ٹرمینل میں ٹاسک کیا جا سکتا ہے: 

 گلپ واچ

کچھ tweaking کے ساتھ، آپ ایک کام کے بہاؤ کی تعمیر کر سکتے ہیں جو دوسرے سی ایس ایس سے متعلقہ کاموں کے علاوہ اس مخصوص اصلاح کو انجام دیتا ہے، جیسے SASS / کم فائلوں، آٹوپریفکس اور زیادہ.

اپنی ویب سائٹ کے صفحات کو بچانا چاہتے ہیں؟ پی ڈی ایف کے طور پر برآمد کریں اور قابل اعتماد میں محفوظ کریں کلاؤڈ اسٹوریج .

یہ مضمون اصل میں شائع ہوا نیٹ ویب ڈیزائنرز کے لئے دنیا کے معروف میگزین. یہاں سبسکرائب کریں .

متعلقہ مضامین:

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

کيسے - انتہائی مشہور مضامین

فوٹوشاپ میں فانٹ کیسے شامل کریں

کيسے Sep 14, 2025

(تصویری کریڈٹ: ایڈوب) فوٹوشاپ میں فانٹ: فوری لنکس روا..

تیل پینٹ میں چمکیلی آنکھیں کیسے بنائیں

کيسے Sep 14, 2025

آنکھوں کو کسی بھی کامیاب تصویر کا سب سے اہم عنصر ہے، لیکن بہت سے لوگ انہ�..

فوٹوشاپ میں رات کو دن کیسے تبدیل کرنا

کيسے Sep 14, 2025

دن سے رات کے تبادلے کے دوران جب تک فوٹوشاپ ایڈجسٹمنٹ تہوں میں موجود ہے، ..

آرٹریج کا استعمال کرتے ہوئے ڈیجیٹل تیل پینٹنگ کیسے بنائیں

کيسے Sep 14, 2025

ڈیجیٹل طور پر استعمال کرتے ہوئے پینٹنگ ڈرائنگ ٹیبلٹ اور ڈرائنگ..

تیز رفتار مجسمہ زبرش میں ایک مخلوق

کيسے Sep 14, 2025

جب زبرش میں مخلوق کا تصور کرتے ہوئے، آپ کے خیال کو ایک گریسیلیل کے طور پ�..

اوریگامی سٹوڈیو کے ساتھ ایک موبائل ایپ پروٹوٹائپ کیسے کریں

کيسے Sep 14, 2025

ایسی دنیا میں جہاں صارفین کو ویب اور موبائل پر ان کے تجربے کی اعلی توقعات ہوتی ہے، پروٹوٹائپ اور صارف کی ت�..

کوکولر 2 کے ساتھ ایک مادی ڈیزائن اپلی کیشن بنائیں

کيسے Sep 14, 2025

کونیی مواد ایک UI اجزاء کے فریم ورک ہے جو کوکولر 2 کے لئے Google کے مواد کے ڈی..

صارف کے دوستانہ موبائل انٹرفیس ڈیزائن کیسے کریں

کيسے Sep 14, 2025

کچھ موبائل ڈیزائن ایک مسئلہ سے متاثر ہوتے ہیں: وہ سطح پر بہت اچھا لگ سکت�..

اقسام