Safari 27 ने मूल select को अनुकूलन-योग्य बनाया

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 संदर्भ पढ़ें।