უკან დაბრუნება
HTML Can Do That: დინამიკური ვებ-ფუნქციები, რომლებსაც JavaScript აღარ სჭირდება
SiTech AI Team2 წთ. საკითხავი

HTML Can Do That: დინამიკური ვებ-ფუნქციები, რომლებსაც JavaScript აღარ სჭირდება

კრის ბერნელის გვერდი აგროვებს დინამიკურ ქცევას, რომელსაც თანამედროვე HTML დამოუკიდებლად ახერხებს — popover, დიალოგები, აკორდეონები, ლეიზი სურათები — ბრაუზერის მხარდაჭერის გულწრფელი შენიშვნებით.

HTML-მა დიდი ნაწილი შთანთქა იმ სამუშაოსი, რომელიც ადრე JavaScript-ს ეკუთვნოდა; დეველოპერ კრის ბერნელის გვერდი ამის მაგალითებს ერთ ადგილას აგროვებს. „HTML Can Do That" ჩამოთვლის ბრაუზერის ფუნქციებს, რომლებიც დინამიკურ ქცევას მხოლოდ მარკირებით აწვდიან, თითოეულს დემო და ბრაუზერის მხარდაჭერის მონაცემების ბმული ახლავს.

რას აჩვენებს გვერდი

სიაში შედის popover ატრიბუტი, რომელიც ელემენტს აძლევს მსუბუქად დახურვას, Escape-ით დახურვასა და ზედა ფენაში განთავსებას z-index-ის მართვის გარეშე; dialog ელემენტი მოდალური ფანჯრებისთვის, რომელსაც HTML-იდანვე მართავთ popovertarget-ითა და form method="dialog"-ით; და დაჯგუფებული details ელემენტები, სადაც საერთო name ატრიბუტი რამდენიმე გასახსნელ ბლოკს ექსკლუზიურ აკორდეონად აქცევს. ინვოკერ-ბრძანებები (command და commandfor) საშუალებას აძლევს ცალკეულ ღილაკებს, სკრიპტის გარეშე მართონ ერთი popover. სურათები დატვირთვას ანელებენ loading="lazy"-ით, ხოლო hidden="until-found" მალავს ბლოკს, რომელსაც ბრაუზერი ფრაგმენტის ბმულის მიხედვით ავლენს.

გულწრფელი გაფრთხილებები

ბერნელი პირდაპირ ამბობს, რომ ბრაუზერების რეალიზაცია არათანაბარია. ჩაშენებული ფორმის კონტროლები — ფერის, თარიღისა და დიაპაზონის ამრჩევები, meter და progress — ბრაუზერებს შორის ნაგულისხმევი სტილით მკვეთრად განსხვავდება და ხელმისაწვდომობის თვალსაზრისით სუსტი შეიძლება იყოს; ავტორი სიფრთხილეს გვირჩევს. datalist-ის მხარდაჭერა, რომელიც ავტომატურ შემოთავაზებებს დროპდაუნ-ბიბლიოთეკის გარეშე გვაძლევს, ველების სხვადასხვა ტიპზე „ჯერ კიდევ არათანაბარია", და ის მკითხველს ადრიან როზელის ნაშრომისკენ მიუთითებს. until-found ატრიბუტი კი ბრაუზერის საკუთარ ძებნასთან მუშაობს, ეკრანის წამკითხველის ძებნასთან — არა.

რატომ არის მნიშვნელოვანი

გვერდი HTML Day 2026-ზე ერთ საათში შეიქმნა და მოგვიანებით იმის აღსანიშნავად განახლდა, სად არასაკმარისია რეალიზაციები; ავტორის შენიშვნით, ასე აწყობილი ყველაფერი „მაქსიმალურად ხელმისაწვდომი" უნდა იყოს. დეველოპერებისთვის პრაქტიკული დასკვნა მცირე JavaScript-ია: ნაკლები მდგომარეობის მართვა ოვერლეებზე, აკორდეონებზე, დიალოგებსა და ლეიზი მედიაზე — თუ, რა თქმა უნდა, ახალი ფუნქციების ხელმისაწვდომობის კომპრომისები შემოწმდება და არა ვარაუდით მიიღება.

SSiTech

SiTech — AI-გაძლიერებული ვებ დეველოპმენტი

ვქმნით სწრაფ, თანამედროვე ვებსაიტებს და AI-ს ვაერთიანებთ ქართული ბიზნესებისთვის. გაქვთ პროექტი ან კითხვა? სიამოვნებით დაგეხმარებით.