ক্রোম প্রথম প্রকাশিত হওয়ার দশ বছর হয়ে গেছে। তারপর থেকে অনেক কিছু পরিবর্তিত হয়েছে, কিন্তু আধুনিক ওয়েব অ্যাপ্লিকেশনগুলির জন্য একটি দৃঢ় ভিত্তি তৈরি করা আমাদের লক্ষ্য হয়নি!
Chrome 69-এ, আমরা এর জন্য সমর্থন যোগ করেছি:
- CSS স্ক্রোল স্ন্যাপ আপনাকে মসৃণ, চটকদার, স্ক্রোল অভিজ্ঞতা তৈরি করতে দেয়।
- ডিসপ্লে কাটআউটগুলি আপনাকে ডিসপ্লে কাটআউটের পিছনে যেকোন স্থান সহ স্ক্রিনের সম্পূর্ণ এলাকা ব্যবহার করতে দেয়, যাকে কখনও কখনও একটি খাঁজ বলা হয়।
- ওয়েব লক এপিআই আপনাকে অ্যাসিঙ্ক্রোনাসভাবে একটি লক অর্জন করতে দেয়, কাজটি সঞ্চালিত হওয়ার সময় এটিকে ধরে রাখুন, তারপর এটি ছেড়ে দিন।
এবং আরো অনেক আছে!
আমি পিট লেপেজ । চলুন ডুব দিয়ে দেখি Chrome 69-এ ডেভেলপারদের জন্য নতুন কী আছে!
পরিবর্তনের সম্পূর্ণ তালিকা চান? Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা দেখুন।
CSS স্ক্রোল স্ন্যাপ
CSS স্ক্রোল স্ন্যাপ আপনাকে স্ক্রোল স্ন্যাপ অবস্থান ঘোষণা করে মসৃণ, চটকদার, স্ক্রোল অভিজ্ঞতা তৈরি করতে দেয় যা ব্রাউজারকে প্রতিটি স্ক্রলিং অপারেশনের পরে কোথায় থামতে হবে তা বলে। এটি ইমেজ ক্যারোসেল বা পৃষ্ঠাযুক্ত বিভাগগুলির জন্য অত্যন্ত সহায়ক যেখানে আপনি ব্যবহারকারীকে একটি নির্দিষ্ট বিন্দুতে স্ক্রোল করতে চান।
একটি চিত্র ক্যারোজেলের জন্য, আমি scroll-snap-type: x mandatory; স্ক্রোল পাত্রে, এবং scroll-snap-align: center; প্রতিটি ছবিতে। তারপরে, ব্যবহারকারী ক্যারোজেলের মাধ্যমে স্ক্রোল করার সাথে সাথে প্রতিটি চিত্র মসৃণভাবে নিখুঁত অবস্থানে স্ক্রোল করা হবে।
#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
#gallery img {
scroll-snap-align: center;
}
সিএসএস স্ক্রোল স্ন্যাপিং ভাল কাজ করে, এমনকি যখন স্ন্যাপ লক্ষ্যগুলি বিভিন্ন আকারের হয় বা যখন তারা স্ক্রলারের চেয়ে বড় হয়! আরও বিশদ বিবরণ এবং আপনি চেষ্টা করতে পারেন এমন নমুনার জন্য CSS স্ক্রোল স্ন্যাপ সহ ভাল-নিয়ন্ত্রিত স্ক্রলিং পোস্টটি দেখুন!
ডিসপ্লে কাটআউট (ওরফে খাঁজ)
ডিসপ্লে কাটআউট সহ ক্রমবর্ধমান সংখ্যক মোবাইল ডিভাইস মুক্তি পাচ্ছে, যাকে কখনও কখনও একটি খাঁজ বলা হয়। এটি মোকাবেলা করার জন্য, ব্রাউজারগুলি আপনার পৃষ্ঠায় কিছুটা অতিরিক্ত মার্জিন যুক্ত করে যাতে বিষয়বস্তু খাঁজ দ্বারা অস্পষ্ট না হয়।
কিন্তু আপনি যদি সেই স্থানটি ব্যবহার করতে চান?
CSS এনভায়রনমেন্ট ভেরিয়েবল এবং viewport-fit মেটা ট্যাগ সহ, এখন আপনি করতে পারেন। উদাহরণস্বরূপ, ব্রাউজারকে ডিসপ্লে কাটআউট এলাকায় প্রসারিত করতে বলতে, cover জন্য viewport মেটা ট্যাগে viewport-fit বৈশিষ্ট্য সেট করুন।
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
তারপর আপনি আপনার বিষয়বস্তু লেআউট করতে safe-area-inset-* CSS পরিবেশ ভেরিয়েবল ব্যবহার করতে পারেন।
.content {
padding: 16px;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
iPhone X-এর জন্য ওয়েবসাইট ডিজাইন করার বিষয়ে WebKit ব্লগে একটি দুর্দান্ত পোস্ট রয়েছে, অথবা আরও বিশদ বিবরণের জন্য ব্যাখ্যাকারীকে দেখুন।
ওয়েব লক API
ওয়েব লক এপিআই আপনাকে অ্যাসিঙ্ক্রোনাসভাবে একটি লক অর্জন করতে দেয়, কাজটি সঞ্চালিত হওয়ার সময় এটিকে ধরে রাখুন, তারপর এটি ছেড়ে দিন। লকটি রাখা অবস্থায়, মূলের অন্য কোনো স্ক্রিপ্ট একই লক অর্জন করতে পারে না, শেয়ার করা সম্পদের ব্যবহার সমন্বয় করতে সাহায্য করে।
উদাহরণস্বরূপ, যদি একাধিক ট্যাবে চলমান একটি ওয়েব অ্যাপ নিশ্চিত করতে চায় যে শুধুমাত্র একটি ট্যাব নেটওয়ার্কে সিঙ্ক হচ্ছে, সিঙ্ক কোড network_sync_lock নামে একটি লক অর্জন করার চেষ্টা করবে।
navigator.locks.request('network_sync_lock', async lock => {
// The lock has been acquired.
await do_something();
await do_something_else();
// Now the lock will be released.
});
লকটি অর্জন করার জন্য প্রথম ট্যাবটি নেটওয়ার্কে ডেটা সিঙ্ক করবে। অন্য ট্যাব একই লক অর্জন করার চেষ্টা করলে, এটি সারিবদ্ধ হবে। একবার লকটি প্রকাশ করা হলে, পরবর্তী সারিবদ্ধ অনুরোধটি লকটি মঞ্জুর করা হবে এবং কার্যকর করা হবে।
MDN এর একটি দুর্দান্ত ওয়েব লক প্রাইমার রয়েছে এবং এতে আরও গভীর ব্যাখ্যা এবং প্রচুর উদাহরণ রয়েছে। অথবা আরও গভীরে ডুব দিন এবং স্পেকটি দেখুন।
এবং আরো!
এইগুলি বিকাশকারীদের জন্য Chrome 69-এর কয়েকটি পরিবর্তন, অবশ্যই, আরও অনেক কিছু রয়েছে।
- CSS4 স্পেক থেকে, আপনি এখন কনিক গ্রেডিয়েন্ট ব্যবহার করে একটি বৃত্তের পরিধির চারপাশে রঙ পরিবর্তন করতে পারেন। Lea Verou-এর একটি CSS
conic-gradient()পলিফিল রয়েছে যা আপনি ব্যবহার করতে পারেন, এবং পৃষ্ঠাটিতে সত্যিই দুর্দান্ত সম্প্রদায় জমা দেওয়া নমুনাগুলির একটি সম্পূর্ণ গুচ্ছ অন্তর্ভুক্ত রয়েছে। - উপাদানগুলির উপর একটি নতুন
toggleAttribute()পদ্ধতি রয়েছে যাclassList.toggle()এর মতো একটি বৈশিষ্ট্যের অস্তিত্ব টগল করে। - জাভাস্ক্রিপ্ট অ্যারে দুটি নতুন পদ্ধতি পাচ্ছে:
flat()এবংflatMap()। তারা একটি নতুন অ্যারে ফেরত দেয় যার মধ্যে সমস্ত সাব-অ্যারে উপাদানগুলি স্মুশ করা হয়। - এবং
OffscreenCanvasকাজটি মূল থ্রেড থেকে একজন কর্মীকে নিয়ে যায়, কর্মক্ষমতার বাধা দূর করতে সাহায্য করে।
ইস্টার ডিম
আপনি ভিডিওতে ইস্টার ডিম সব খুঁজে পেয়েছেন?
- ক্রোম কমিক বই
- Chromercise ব্যান্ড
- আলু কামান
- পিট মনস্টার
- CDS 2017 থেকে কাঠের ডিনো
Chrome-এ New-এর 28টি পর্ব ঘটানোর জন্য যারা সাহায্য করেছেন তাদের সকলকে বিশেষ ধন্যবাদ। এই মানুষ প্রতি একক এক ভয়ঙ্কর!
Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers
Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja
Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer
Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin
আমাদের প্রথম পর্ব থেকে Chrome এ কতটা নতুন এসেছে তা দেখতে চান? এই মজাদার 30 সেকেন্ডের অগ্রগতি ভিডিওটি দেখুন যা আমাদের প্রথম ভিডিও থেকে আজ পর্যন্ত আমাদের ইতিহাস লেখে!
এবং অবশ্যই, দেখার জন্য এবং আপনার মন্তব্য এবং প্রতিক্রিয়া প্রদান করার জন্য আপনাকে ধন্যবাদ! আমি তাদের সব পড়ি, এবং হৃদয়ে আপনার পরামর্শ গ্রহণ. আপনার কারণে এই ভিডিওগুলি আরও ভাল হয়েছে!
দেখার জন্য ধন্যবাদ!
Chrome Bloopers-এ নতুন
আপনার উপভোগ করার জন্য আমরা একটি মজার ছোট ব্লুপার রিল একসাথে রেখেছি! এটি দেখার পরে, আমি কয়েকটি জিনিস শিখেছি:
- যখন আমি আমার কথার উপর ভ্রমন করি, তখন আমি কিছু অদ্ভুত শব্দ করি।
- আমি মুখ তৈরি করি এবং আমার জিহ্বা বের করি।
- আমি নড়বড়ে, অনেক.
সদস্যতা
আমাদের ভিডিওগুলির সাথে আপ টু ডেট থাকতে চান, তারপরে আমাদের Chrome বিকাশকারী YouTube চ্যানেলে সদস্যতা নিন , এবং যখনই আমরা একটি নতুন ভিডিও চালু করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷
আমি পিট লেপেজ, এবং Chrome 70 রিলিজ হওয়ার সাথে সাথে, আমি আপনাকে বলতে এখানে থাকব -- Chrome-এ নতুন কি!