ვებ ბრაუზერები უკვე გარშემო, რადგან საიტებზე აქვს. სინამდვილეში, ბრაუზერები არიან არსებითი ნივთიერება გამოცდილება ან ხალხი ათვალიერებენ თქვენს საიტზე - მაგრამ არა ყველა ბრაუზერები იქმნება თანაბრად. სრულიად შესაძლებელია (და სინამდვილეში სავარაუდოდ), რათა მომხმარებელს იხილოთ ბრაუზერების ვებ-გვერდები, რომლებიც უაღრესად ძველი და დაკარგული თვისებებია, რომლებიც უფრო თანამედროვე ბრაუზერებში გვხვდება. ეს შეიძლება გამოიწვიოს მნიშვნელოვან პრობლემებს, რადგან თქვენ ვცდილობთ ვებსაიტების განვითარება, რაც უპირატესობას ანიჭებს უახლეს მიღწევებს ვებ დიზაინი და განვითარება . თუ ვინმეს მოდის თქვენი საიტი გამოყენებით ერთი იმ antiqued ბრაუზერები, და თქვენი უახლესი მოწინავე ტექნიკა არ მუშაობს მათთვის, თქვენ შეიძლება მიწოდების ცუდი გამოცდილება საერთო. პროგრესული გაფართოება არის სხვადასხვა ბრაუზერის ვებ-გვერდის დიზაინის გატარების სტრატეგია, კერძოდ, იმ ძველი ბრაუზერები, რომლებიც არ არიან თანამედროვე მხარდაჭერაში.
პროგრესული გაფართოება არის ვებ გვერდების შემუშავების გზა ისე, რომ უფრო მეტი თვისებები მომხმარებელი აგენტი მხარს უჭერს, მეტი ფუნქციები ვებ გვერდზე ექნება. ეს არის საპირისპირო დიზაინი სტრატეგია ცნობილია, როგორც მოხდენილი დეგრადაცია . ეს სტრატეგია აშენებს გვერდებზე ყველაზე თანამედროვე ბრაუზერებს და შემდეგ უზრუნველყოფს, რომ ისინი ასევე ფუნქციონირებენ კარგად ფუნქციონალური ბრაუზერები - რომ გამოცდილება "degrades mercedes." პროგრესული გაფართოება თავდაპირველად ნაკლებად შეუძლია ბრაუზერებით იწყება და იქიდან გამომდინარეობს გამოცდილება.
როგორ გამოვიყენოთ პროგრესული გაძლიერება
როდესაც თქვენ შექმნით ვებ დიზაინს პროგრესული გაფართოების გამოყენებით, პირველი, რაც თქვენ გააკეთებთ, შექმნის დიზაინს, რომელიც მუშაობს ვებ ბრაუზერების ყველაზე დაბალი საერთო მნიშვნელობით. მისი ძირითადი, პროგრესული გაფართოება ამბობს, რომ თქვენი კონტენტი ხელმისაწვდომი უნდა იყოს ყველა ვებ ბრაუზერისთვის, არა მხოლოდ ქვე-კომპლექტი.ასევე დაიწყე ამ ძველი, მოძველებული და ნაკლებად ეფექტური ბრაუზერების მხარდაჭერით.თუ შექმნა საიტი, რომელიც კარგად მუშაობს მათთვის, თქვენ იცით, რომ თქვენ შექმენით საბაზისო, რომელიც უნდა გამოვიყენოთ მინიმუმ გამოსადეგი გამოცდილება ყველა სია.
როდესაც მინიმუმ შეუძლია ბრაუზერებით დაწყებული, გინდათ, რომ ყველა თქვენი HTML უნდა იყოს სწორი და სემანტიკურად სწორი. ეს ხელს შეუწყობს უზრუნველყოს, რომ ფართო მრავალფეროვანი მომხმარებლის აგენტები შეგიძლიათ ნახოთ გვერდზე და ცარიელია ზუსტად.
გახსოვდეთ, რომ ვიზუალური დიზაინის სტილი და საერთო გვერდის განლაგება დაემატება გარე სტილების გამოყენებით . ეს მართლაც, სადაც პროგრესული გაფართოება ხდება. თქვენ იყენებთ სტილი ფურცელს, რათა შეიქმნას საიტი დიზაინი, რომელიც მუშაობს ყველა სია. შემდეგ შეგიძლიათ დაამატოთ დამატებითი სტილის გვერდი, როგორც მომხმარებელი აგენტები მოიპოვოს ფუნქციონირება. ყველას იღებს baselines სტილის, მაგრამ ნებისმიერი საინფორმაციო ბრაუზერები, რომლებიც ხელს შეუწყობს უფრო თანამედროვე და თანამედროვე სტილის, ისინი კიდევ დამატებით. თქვენ "პროგრესულ გაძლიერებას" ბრაუზერის გვერდს, რომელსაც შეუძლია ამ სტილის მხარდაჭერა.
არსებობს რამდენიმე გზა, რომელიც შეგიძლიათ გამოიყენოთ პროგრესული გაფართოება. პირველ რიგში, უნდა გაითვალისწინოთ, თუ რა ბრაუზერია, თუ ეს არ გესმის CSS- ის ხაზს, ის იგნორირებას უკეთებს! ეს რეალურად მუშაობს თქვენს სასარგებლოდ. თუ თქვენ შექმნით ფონური კომპლექტი სტილის ყველა ბრაუზერის გაგება, შეგიძლიათ შემდეგ დამატებითი სტილის ახალი ბრაუზერები. თუ ისინი მხარს უჭერენ სტილებს, ისინი გამოიყენებენ მათ. თუ არა, ისინი იგნორირებას უკეთებენ და მხოლოდ იმ საბაზისო სტილის გამოყენებას შეძლებენ. პროგრესული გაფართოების მარტივი მაგალითია ამ CSS- ში:
.main- შინაარსი {
ფონზე: # 999;
ფონზე: rgba (153,153,153, .75);
}
ეს სტილის პირველი ადგენს ფონზე greyish ფერი. მეორე წესი იყენებს RGBA ფერი ღირებულებებს გამჭვირვალობის დონის დასადგენად. თუ ბრაუზერი მხარს უჭერს RGBA- ს, ის მეორე სტილით გადააჭარბებს. თუ ეს არ მოხდება, მხოლოდ პირველი იქნება გამოყენებული. თქვენ დააყენეთ საბაზისო ფერი და შემდეგ დამატებით სტილებს უფრო თანამედროვე ბრაუზერებისთვის.
გამოყენება თვისებები
კიდევ ერთი გზა შეგიძლიათ მიმართოთ პროგრესულ გაფართოებას გამოიყენოს ის, რაც ცნობილია, როგორც "თვისებები queries". ეს მსგავსია მედიის კითხვებზე , რომლებიც მნიშვნელოვანია საპასუხო ვებ-დიზაინით . მიუხედავად იმისა, რომ მედიის კითხვები გარკვეულ ეკრანის ზომის ტექსტს შეესაბამება, გამორჩეული მოთხოვნები შეამოწმებს თუ არა გარკვეული ფუნქციის მხარდაჭერა. სინტაქსი გამოიყენოთ:
@ მხარდაჭერა (ჩვენება: flex) {}ნებისმიერ სტილს, რომელიც თქვენ დაემატეთ ამ წესის შიგნით, იმუშავებს მხოლოდ იმ შემთხვევაში, თუ ბრაუზერი მხარს უჭერს "Flex", რომელიც სტილის Flexbox- სთვისაა. თქვენ შეგიძლიათ დააყენოთ ერთი კომპლექტი წესები ყველასთვის და შემდეგ გამოიყენოთ ფუნქცია queries, რომ დაემატოს დამატებითი ბრაუზერის მხოლოდ.
ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 12/13/16.