Safari 27 নেটিভ select-কে কাস্টমাইজযোগ্য করেছে
Safari 27.0 16 সেপ্টেম্বর এসেছে, যাতে রয়েছে স্টাইল করার উপযোগী নেটিভ select এবং স্ক্রিন রিডার ঘোষণার জন্য ariaNotify()। অন্যের পেজে এমবেড করা ফর্মের জন্য এর অর্থ কী, আর এটি কী ঠিক করে না।
এই পোস্টটি যন্ত্রের মাধ্যমে অনুবাদ করা হয়েছে। ইংরেজিতে মূল পোস্টটি পড়ুন
Safari 27.0 16 সেপ্টেম্বর 2026-এ প্রকাশিত হয়েছে। Apple-এর রিলিজ নোটে iOS 27, iPadOS 27, visionOS 27, macOS 27, macOS 26 এবং macOS Sequoia-র জন্য বিল্ড 27.0 (20625.1.29) উল্লেখ আছে। 17 সেপ্টেম্বর প্রকাশিত Web Standards সারসংক্ষেপ 83টি নতুন ফিচার গুনেছে।
এই রিলিজ গভীরের চেয়ে বিস্তৃত: নতুন করে লেখা ES মডিউল লোডার, সাবপিক্সেল ইনলাইন লেআউট, সক্রিয় না করেই কাজ করা স্ক্রল অ্যাঙ্করিং, service worker স্ট্যাটিক রাউটিং API, এবং অ্যাক্সেসিবিলিটি সংশোধনের দীর্ঘ তালিকা। 83টির মধ্যে দুটি ফিচার ঠিক করে অন্যের পেজে এমবেড করা ফর্ম কী ধরে নিতে পারে: একটি নেটিভ select যা স্টাইল করা যায়, এবং লাইভ রিজিয়ন ছাড়া বার্তা ঘোষণার উপায়।
নেটিভ select এখন স্টাইলযোগ্য
select উপাদানটি ছিল সেই কন্ট্রোল যা সবচেয়ে কম স্টাইল করা হতো এবং সবচেয়ে বেশি বদলানো হতো। কাস্টমাইজযোগ্য select এই হিসাব বদলে দেয়। appearance: base-select প্রয়োগ করলে উপাদানটি নতুন ইউজার-এজেন্ট ডিফল্টে চলে যায় এবং বাকি সুবিধা খুলে যায়।
select,
select::picker(select) {
appearance: base-select;
}::picker(select) পপআপটিকেই লক্ষ্য করে, আর ::picker-icon তার তীরকে।
::checkmark নির্বাচিত সারির চিহ্নকে লক্ষ্য করে।
selectedcontent ঠিক করে বন্ধ কন্ট্রোল বর্তমান অপশনের জন্য কী দেখাবে, তাই সারাংশ লেবেলের নকল না হয়ে মার্কআপ হতে পারে।
option এখন HTML রাখতে পারে, তাই একটি অপশন আইকন বা দুই লাইনের লেবেল বহন করতে পারে।
এর কোনোটিই কন্ট্রোলের জায়গা নেয় না। এটি এখনও সত্যিকারের ফর্ম কন্ট্রোল, তাই কীবোর্ড নেভিগেশন, স্ক্রিন রিডার সিমান্টিক্স, ফর্ম সাবমিশন, কনস্ট্রেইন্ট ভ্যালিডেশন এবং change ইভেন্ট কাজ করতে থাকে। div দিয়ে নতুন করে বানানো ড্রপডাউন এসব বাদ দেয়, তারপর আরও খারাপ একটি সংস্করণ বানায়। base-select বেছে নিলে তা হয় না।
লাইভ রিজিয়ন ছাড়া ariaNotify()
Apple-এর রিলিজ নোট ariaNotify API-র সমর্থন যোগ করে, যা টেক্সটকে সারিতে রাখে যাতে ARIA লাইভ রিজিয়ন ছাড়াই স্ক্রিন রিডার তা ঘোষণা করে। ফর্মের জন্য এটি একটি নির্দিষ্ট ফাঁক ভরে। লাইভ রিজিয়ন কেবল তখনই বলে যখন তার কনটেন্ট বদলায়, তাই একই বাক্য পুনরাবৃত্তি করা ত্রুটি সারাংশ দ্বিতীয়বার কোনো পরিবর্তন বা ঘোষণা তৈরি করে না। ariaNotify() বার্তাটিকেই সারিতে রাখে।
ঝুঁকি পরিমাণে। ঘোষণা ভ্যালিডেশন বার্তা নয়। এমবেড করা ফর্ম যদি প্রতিটি ফিল্ড পরিবর্তনের ঘোষণা দেয়, তবে স্ক্রিন রিডার ব্যবহারকারী একটানা ভাষ্য শোনেন এবং পেজ ছেড়ে যান। কেবল তা ঘোষণা করুন যা নিয়ে ব্যক্তিকে কিছু করতে হবে: সাবমিটের পর প্রথম অবৈধ ফিল্ড, যে Submission সম্পন্ন হয়নি, বা যে Step এইমাত্র খুলেছে।
এমবেড করা ফর্মে কী পরীক্ষা করবেন
দীর্ঘ অপশন তালিকায় বন্ধ select, হালকা ও গাঢ় দুই মোডে।
জেনারেট করা কম্পোনেন্টের নিজের লেআউটে select, 320px-এ।
ত্রুটি সারাংশ একবার ঘোষিত হবে, দুইবার নয়।
forced-colors মোড, কারণ base-select নিজের ডিফল্ট নিয়ে আসে।
FormFlow-এর জেনারেট করা কম্পোনেন্ট নেটিভ HTML ফর্ম কন্ট্রোল রেন্ডার করে, তাই Safari-র নতুন ডিফল্ট আমাদের দিক থেকে কোনো পরিবর্তন ছাড়াই এমবেড করা ফর্মে পৌঁছাতে পারে। এই পোস্টের জন্য আমরা জেনারেট করা কম্পোনেন্ট Safari 27-এ যাচাই করিনি, এবং করেছি বলে ইঙ্গিত দেব না। আপনি যদি ফর্ম এমবেড করেন, ডিফল্ট চেহারার ওপর নির্ভর করার আগে তা আপনার সমর্থিত Safari সংস্করণে রেন্ডার করুন।
এটি কী ঠিক করে না
Safari কাস্টমাইজযোগ্য select প্রকাশ করা এটি ইন্টারঅপারেবল করে না। Web Standards সারসংক্ষেপে বলা হয়েছে নতুন ডিফল্ট ডিজাইন আরও পরিমার্জনের জন্য CSS ওয়ার্কিং গ্রুপে গেছে, এবং অভিন্ন শুরুর বিন্দু নির্ভর করে অন্য ব্রাউজারগুলো তাদের বাস্তবায়ন হালনাগাদ করার ওপর। Safari 27-এ সঠিক দেখানো স্টাইল একই দিনে অন্য ইঞ্জিনে ভুল দেখাতে পারে।
ariaNotify() ব্রাউজারের সংযোজন, ফর্মের মানদণ্ড নয়। এটি ঠিক করে না কোন ঘোষণা উপযুক্ত, এবং এটি লেবেল, legend-সহ fieldset, বা ফিল্ডের পাশে দৃশ্যমান ত্রুটির জায়গা নেয় না।
এখানে কিছুই Safari 27-এর জন্য FormFlow-এর সমর্থন বিবৃতি নয়, এবং এখানে কিছুই বদলায় না যে এমবেড করা ফর্ম এমন Safari সংস্করণে কেমন আচরণ করে যেখানে এই ফিচারগুলো নেই। এমবেড করা ফর্ম যে POST চুক্তিতে পাঠায়, তার জন্য API রেফারেন্স পড়ুন।