কী! গুরুত্বপূর্ণ #5: অলস-লোডিং আইফ্রেম, পুনরাবৃত্তি করা কোণার-আকৃতির ব্যাকগ্রাউন্ড এবং আরও সিএসএস-কৌশল

কী! গুরুত্বপূর্ণ #5: অলস-লোডিং আইফ্রেম, পুনরাবৃত্তি করা কোণার-আকৃতির ব্যাকগ্রাউন্ড এবং আরও সিএসএস-কৌশল


কিসের গুরুত্বপূর্ণ এই সংখ্যাটি যুক্তরাজ্যে আমাদের বন্ধুদের (ওরফে আমি) নিবেদিত যারা বর্তমানে 43 দিন বৃষ্টির দুর্দশা সহ্য করছেন। পরিচিতি: গত কয়েক সপ্তাহে CSS সম্পর্কে পড়ার জন্য সবচেয়ে আকর্ষণীয় পাঁচটি জিনিস। প্লাসChrome 145-এর সাম্প্রতিক বৈশিষ্ট্য এবং আপনি হয়তো মিস করেছেন এমন কিছু। TL;DR: প্রচুর জিনিস, কিন্তু প্রচুর বৃষ্টিও।

কেন আপনি শুধুমাত্র 4 ঘন্টা / দিন কোড করতে পারেন?

চিন্তা করবেন না, আপনি প্রতিদিন মাত্র 52 মিনিট কোডিং করছেন।

ডাঃ মিলান মিলানভিচ মিটিং, ইমেল, স্ল্যাক, এবং বাধাগুলির ধ্বংসাত্মক প্রভাব এবং আপনি/আপনার পরিচালকরা এটি সম্পর্কে কী করতে পারেন সে সম্পর্কে কথা বলেছেন। এই নিবন্ধটি গড় বিকাশকারীর প্রবাহের অবস্থা সম্পর্কে এক টন মর্মান্তিক (কিন্তু আশ্চর্যজনক নয়) পরিসংখ্যান সহ একটি সত্যিকারের চোখ-খোলা।

কেন আপনার খুব দ্রুত ছোট ব্রেকপয়েন্টে স্যুইচ করা উচিত নয়

আহমেদ শাদিদ ব্যাখ্যা করেছেন যে কেন আপনার খুব দ্রুত ছোট প্রতিক্রিয়াশীল ব্রেকপয়েন্টগুলিতে স্যুইচ করা উচিত নয়, এমন ওয়েবসাইটগুলির উদাহরণ এবং এমন পরিস্থিতিতে যেখানে ব্যবহারকারীরা সেই ব্রেকপয়েন্টগুলিতে পৌঁছতে পারে।

ভাঁজের নিচের আইফ্রেমটি কীভাবে অলস-লোড করবেন

loading=lazy শুধুমাত্র অফ-স্ক্রিন উপাদানগুলির জন্য কাজ করে, তাই স্টেফান বাউয়ার ভাঁজের উপরে অলস-লোড করার জন্য একটি ঝরঝরে কৌশল দেখান ব্যবহার করছে

.

কিভাবে পুনরাবৃত্তি করতে হয় corner-shape পটভূমি

প্রীতি স্যাম আমাদের বলেন কিভাবে ব্যবহার করতে হয় corner-shape ইন s, যা তারপর পুনরাবৃত্তি হিসাবে ব্যবহৃত হয় backgroundএস. আমি আমার নিজের পরীক্ষা করেছি corner-shapeতবে এটি আশ্চর্যজনক এবং অবশ্যই এমন কিছু যা আমি বিবেচনা করিনি।

CSS নির্বাচন (2026 সংস্করণ)

ওয়েব ডেভেলপাররা আসলে CSS দিয়ে কি করে? অন্যান্য গবেষণা অধ্যয়ন বৈশিষ্ট্যগুলির উপর ফোকাস করলে, CSS নির্বাচন (2026 সংস্করণ) CSS প্যাটার্ন এবং কৌশলগুলিতে ফোকাস করে। এটি একটি খুব আকর্ষণীয় পঠন, এবং আপনি অবশ্যই একবার বা দুবার হাসবেন, বিশেষ করে যখন আপনি এটি জুড়ে বিভিন্ন টাইপোস আবিষ্কার করেন। !important.

এখানে আমার প্রিয় কিছু আছে:

  • !IMPORTANT: খুব চিৎকার
  • !impotant: খুব বেশি তথ্য
  • !i: সে শুধু অলস
  • !imPORTANT: চমৎকার ঘোষণা
  • !importantl: আহ, খুব কাছে…

Chrome বৈশিষ্ট্য এবং দ্রুত হিট আপনি হয়তো মিস করেছেন৷

Chrome 145 কয়েকদিন আগে পাঠানো হয়েছে, এবং বরাবরের মতো, আমরা সপ্তাহজুড়ে কিছু দ্রুত হিট শেয়ার করছি। আপনি হোম পেজের সাইডবারে এগুলি খুঁজে পেতে পারেন, তাই আপনি যদি কখনও ‘হুড’-এর মধ্যে থাকেন তবে নির্দ্বিধায় ড্রপ করুন৷

ঘটনাক্রমে, বেশিরভাগ দ্রুত হিটগুলি কোনওভাবে ক্রোম আপডেটের সাথে সম্পর্কিত ছিল, তাই আমি একসাথে সবকিছু সংক্ষিপ্ত করব:

  • text-justifyযার সাথে আপনি একত্রিত করতে পারেন text-align: justify আপনি শব্দ ব্যবধান চান কিনা তা নির্দিষ্ট করতে (text-justify: inter-word) বা অক্ষর ব্যবধান (text-justify: inter-character) টেক্সটকে উপযুক্ত করার জন্য সামঞ্জস্য করতে হবে। জিওফ 2017 সালে এটি সম্পর্কে লিখেছিলেন যখন শুধুমাত্র ফায়ারফক্স এটিকে সমর্থন করেছিল (এমন কিছু…), তাই আমার গণনা অনুসারে, সাফারি এটিকে 2035 সালের মধ্যে সমর্থন করবে। তাই এই দশকে নয়, কিন্তু GTA 6 এর আগে। শুধু মজা করছি… (আমি মনে করি)।
  • আমরা যদি শব্দ এবং অক্ষর ব্যবধান সম্পর্কে কথা বলি, word-spacing এবং letter-spacing এখন গ্রহণ করুন % ইউনিট, যেমন তারা সাফারি এবং ফায়ারফক্সে করে।
  • একইভাবে, overscroll-behavior এখন সাফারি এবং ফায়ারফক্সের মতো নন-রুট স্ক্রোল পাত্রে কাজ করে। RedFox সতর্কতা সম্পর্কে WebDev overscroll-behavior এর চেয়ে ভালো সময় আর আসতে পারত না।
  • column-wrap এবং column-height আরও ভাল মাল্টিকলাম লেআউট এখনও এখানে আছে, কিন্তু দুর্ভাগ্যবশত, শুধুমাত্র Chrome এ।
  • এটি অপ্টিমাইজেশনের ক্ষেত্রেও প্রযোজ্য