ეტაპობრივი გაუმჯობესება CSS3– ით: თანამედროვე ბრაუზერების მხარდაჭერა. დროა გადახედოთ CSS მომწოდებლის პრეფიქსებს თანდათანობითი css დეგრადაციის ტექნიკას

დაბნეული ვარ, რა განსხვავებაა შორის თანდათანობითი ზრდა და მოხდენილი დეგრადაცია... მეჩვენება, რომ ისინი ერთი და იგივეა.

გთხოვთ, ამიხსნათ განსხვავება ამ ორს შორის და რა სიტუაციაში გამოვიყენებდი ერთმანეთს?

8 პასუხი

ისინი ერთნაირია, მაგრამ კონტექსტში განსხვავდება.

არსებობს ბრაუზერების კლასი, რომელსაც ეწოდება "კლასის A ბრაუზერები". ეს არის თქვენი ტიპიური აუდიტორიის წევრები, რომლებიც (ალბათ) ქმნიან თქვენი ვიზიტორების დიდ ნაწილს. თქვენ დაიწყებთ ამ მომხმარებლების საბაზისო დონეზე. მოდით დავარქვათ საუკეთესო თანამედროვე პრაქტიკა.

Თუ გინდა გასადიდებლად გამოცდილება ყველასთვის, ვინც შემთხვევით იყენებს FF3.6- ს ან Safari 4-ს ან სხვა whizbang- ის ყოველკვირეული ვებ – პროგრამების შემქმნელს, რა გსურთ გააკეთოთ საოცარი რამ, როგორიცაა

  • მომრგვალებული კუთხეები css– ის საშუალებით
  • დაჩრდილული ტექსტი (მაგრამ გთხოვთ ღმერთს არა ძალიან ბევრი)
  • ჩამოაგდეს ჩრდილები (იხ. ზემოთ ფრჩხილებში)

ეს ქმნის თქვენს საიტის დარტყმას, მაგრამ არ გატეხავს მას. ის თანდათანობითი ზრდა... მოიცავს მომავალს თვალსაზრისით საუკეთესო პრაქტიკა.

მეორეს მხრივ, თქვენი ნიშნის Nintendo საიტი იზიდავს IE5 მომხმარებლების დიდ რაოდენობას. ღარიბი ხართ, მაგრამ თქვენ ასევე გსურთ დარწმუნდეთ, რომ ისინი კვლავ ბრუნდებიან. შეგიძლიათ Ajax– ის ქცევის ალტერნატივა მიუთითოთ ajax სკრიპტის გარე ფაილში ჩათვლით, და თუ მათი JS არ არის ჩართული, შესაძლოა თქვენი ბმულები განაახლებდეს მთელ გვერდს. და ა.შ. თვალსაზრისით საუკეთესო თანამედროვე პრაქტიკადარწმუნდებით, რომ ზოგიერთ ისტორიულ ბაზარს ემსახურება ფუნქციური საიტის გარკვეული სახე... ის მოხდენილი დეგრადაცია.

ისინი ძირითადად იდენტურია, მაგრამ მრავალი განვითარების ჯგუფისთვის პრიორიტეტული თვალსაზრისით განსხვავდება: PE საკმაოდ ლამაზია, თუ დრო გაქვთ, მაგრამ GD ხშირად საჭირო

თუ თქვენი საიტი ერთნაირად კარგად გამოიყურება ყველა ბრაუზერში, მაგრამ ზოგიერთ ბრაუზერს აქვს, ვთქვათ, მოცეკვავე პონი, რადგან ისინი მხარს უჭერენ მოცეკვავე პონიებს, ეს პროგრესული გაუმჯობესებაა. ის მუშაობს ყველა ბრაუზერში, მაგრამ ზოგიერთ ბრაუზერს დამატებითი რამ აქვს. როგორც წესი, ეს ტერმინი ვრცელდება Javascript– ის გარკვეულ ფუნქციებზე, რომლებსაც შეუძლიათ გააუმჯობესონ გამოყენებადი „ნედლი HTML“ –ის გარეთ.

თუ თქვენი საიტი გამოიყურება ისე, როგორც თქვენ აპირებთ იმ ბრაუზერებს, რომლებიც სრულად უჭერენ მხარს, ვთქვათ, CSS3 და IE8 - იგივე გვერდზე გამოვა, ვთქვათ, მომრგვალებული კუთხეების გარეშე, ეს მოხდენილი დეგრადაციაა. საიტი ნამდვილად განკუთვნილია თანამედროვე ბრაუზერებისათვის, მაგრამ ის კვლავ გამოიყენება ძველ ბრაუზერებში, არც თუ ისე ლამაზი.

ყოველივე ამის შემდეგ, ისინი სინამდვილეში იგივეა, რაც ორი განსხვავებული თვალსაზრისით ჩანს.

მიმართულება არჩეულია ბაზა თითოეული კონცეფციისთვის განსხვავებულია.

მოხდენილი დეგრადაცია იწყება მომხმარებლის გამოცდილების იდეალურ დონეზე და მცირდება მომხმარებლის აგენტის შესაძლებლობების შესაბამისად, მინიმუმამდე და ემსახურება იმ აგენტებს, რომლებიც მხარს არ უჭერენ საბაზისო ხაზის მიერ გამოყენებულ გარკვეულ მახასიათებლებს.

პროგრესული გაფართოება იწყება მომხმარებლის ფართო მინიმალური გამოცდილებიდან და იზრდება, რაც დამოკიდებულია მისი აგენტის შესაძლებლობებზე, უფრო მაღალ დონეზე, რაც უზრუნველყოფს კვების პროდუქტებს უფრო მაღალ ფუნქციებზე, ვიდრე ძირითადი.

ვფიქრობ, შეიძლება გამოყენებულ იქნას ორივე ცნება, თუ დრო / ბიუჯეტი იძლევა. თუ არა, სასურველია მოხდენილი დეგრადაცია.

ბოდიში, რომ აღვადგინე რაღაც, რაც ერთ წელზე მეტია, მაგრამ ვფიქრობდი, რომ გარკვეულწილად შემეძლო საკუთარი აზრის შექმნა ამ საკითხზე.

მიუხედავად იმისა, რომ მე ვეთანხმები ალექს მაკპს და გარკვეულწილად ვცდები, ტერმინებს მოხდენილი დეგრადაცია და პროგრესული გაუმჯობესება ოდნავ განსხვავებული მნიშვნელობით გამოირჩევა მე.

მოხდენილი დეგრადაციები, ბევრი დრო (ჩემი აზრით), როგორც ჩანს, ჯოხია აპლიკაციის ცემა მას შემდეგ, რაც იგი ცუდად აშენდა, პირველ რიგში, ჩემი გამოცდილებით. როგორ აშენებს ვინმეს რაიმე უზარმაზარი javascript ობიექტი, რომელიც მომხმარებელს საშუალებას მისცემს მართლაც მაგრად ითამაშოს, სანამ მენეჯერი არ შემოვა, შეამოწმებს ნივთს და ყველა ყვირის და დარბის, როდესაც ის ყურადღებას აქცევს, რომ მათი გამოყენება არის არ მუშაობს ბრაუზერების 35% -ში. ”ვიღაც უკეთესად მოგაწვდით ამის დაბრუნებას.”

თანდათანობითი ზრდა მიუხედავად იმისა, რომ (და ეს ძალიან კარგი ტერმინია სათქმელიც), ეს უფრო მეტად იმაზე მეტყველებს, რაც უბრალოდ მუშაობს, საწყისი დონეზე, ყველგან, ყველაზე ხელმისაწვდომი ხელმისაწვდომი მეთოდების გამოყენებით, მომხმარებლის ყველა ფუნქციონალური უზრუნველყოფისთვის. ამის შემდეგ შეიძლება დაემატოს სისუფთავე პატარა არამყარ დამხმარეებს, სტილსა და ა.შ., რაც სინამდვილეში აუმჯობესებს განსახილველი აპლიკაციის მომხმარებლების გამოცდილებას, ვიდრე უბრალოდ გახდის გამოყენებას. "რაც მაგრად გამოიყურება. მუშაობს IE6- ში. დიახ, ასეა".

მე ვფიქრობ, რომ შესაძლოა სტილის სახით მოცემული ორი ტერმინის მაგალითზე ორი საუკეთესო პასუხი აქ გამოტოვოთ გამოსაყენებელი რეალური პრობლემა თანდათანობითი ზრდა ხშირად ბუნებით წყვეტს სად მოხდენილი დეგრადაციები უგულებელყოფს მანამ, სანამ რამე არ იქნება არასწორი.

ტირადა დასრულდა ...

მოხდენილი დეგრადაცია არის ვებ – ფუნქციონირების შექმნის პრაქტიკა, რაც უზრუნველყოფს გარკვეული დონის მომხმარებლის გამოცდილებას უფრო თანამედროვე ბრაუზერებში, მაგრამ ასევე მოხდება ძველი ბრაუზერების მომხმარებლის დონის დაქვეითება. ეს ქვედა ფენა არც ისე სასიამოვნოა თქვენი საიტის სტუმრებისთვის, მაგრამ ის მაინც აძლევს მათ ძირითად ფუნქციებს, რომელთა გამოყენებაც თქვენს საიტზე მოვიდა; რამ არ დაარღვიოს მათ.

პროგრესული ზრდა მსგავსია, მაგრამ პირიქითაა. თქვენ დაიწყებთ საბაზისო მომხმარებლის გამოცდილების დამყარებას, რომელსაც ყველა ბრაუზერი შეძლებს თქვენი ვებსაიტის გაწევისას, მაგრამ ასევე ქმნით უფრო მოწინავე ფუნქციონირებას, რომელიც ავტომატურად ხელმისაწვდომი იქნება მისი გამოყენების ბრაუზერებისათვის.

სხვა სიტყვებით რომ ვთქვათ, მოხდენილი დეგრადაცია იწყება სირთულის სტატუს კვოთი და ცდილობს ნაკლები გამოცდილება დააფიქსიროს, ხოლო პროგრესული გაუმჯობესება იწყება ძალიან ძირითადი, სამუშაო მაგალითით და საშუალებას აძლევს მუდმივ გაფართოებას მომავალი გარემოებისთვის. მოხდელად დამცირება ნიშნავს უკანმოხედვას, ხოლო თანდათანობით გაზრდა ნიშნავს წინსვლას, ხოლო ფეხები მყარ ადგილზე გექნება.

მოხდენილი დეგრადაცია

მოხდენილი დეგრადაციები კომპიუტერის, მანქანის, ელექტრონული სისტემის ან ქსელის შესაძლებლობა შეინარჩუნონ შეზღუდული ფუნქციონირება მაშინაც კი, როდესაც მისი უმეტესობა განადგურებულია ან გამორთულია. მოხდენილი დეგრადაციის მიზანია კატასტროფული უკმარისობის თავიდან აცილება.

მოხდენილი დეგრადაცია არის ერთი გამოსავალი. ეს არის ვებსაიტის ან პროგრამის შექმნის პრაქტიკა, ამიტომ იგი უზრუნველყოფს მომხმარებლის ბრაუზერის კარგ დონეს თანამედროვე ბრაუზერებში. ამასთან, ეს მოხდეს მოხდენილი დეგრადაცია ძველ ბრაუზერებზე. სისტემა შეიძლება არც ისე ლამაზი და ლამაზი იყოს, მაგრამ ძირითადი ფუნქციონირება იმუშავებს ძველ სისტემებზე.

მარტივი მაგალითია 24-ბიტიანი Alpha გამჭვირვალე PNG- ების გამოყენება. ამ სურათების ჩვენება თანამედროვე ბრაუზერებში უპრობლემოდ შეიძლება. IE5.5 და IE6 აჩვენებს სურათს, მაგრამ გამჭვირვალობის ეფექტები არ იმუშავებს (საჭიროების შემთხვევაში ის შეიძლება მუშაობდეს). ძველი ბრაუზერები, რომლებსაც არ აქვთ PNG, აჩვენებენ alt ტექსტს ან თეთრ ადგილს.

დეველოპერები, რომლებიც იღებენ გრაციოზულ დეგრადაციას, ხშირად მიუთითებენ ბრაუზერის მხარდაჭერის დონეზე, მაგალითად, დონის 1 ბრაუზერში (საუკეთესო გამოცდილება) და დონის 2 ბრაუზერში (დეგრადირებული გამოცდილება).

თანდათანობითი ზრდა

თანდათანობითი ზრდა ეს არის ვებდიზაინის სტრატეგია, რომელიც ხაზს უსვამს ხელმისაწვდომობას, სემანტიკურ HTML ნიშანდებას, და გარე სტილებს და სკრიპტინგის ტექნოლოგიებს. პროგრესული გაძლიერება იყენებს ვებ – ტექნოლოგიებს ფენიან რეჟიმში, რაც ყველას საშუალებას აძლევს, წვდომა ჰქონდეს ვებ – გვერდის ძირითად შინაარსსა და ფუნქციონირებას ნებისმიერი ბრაუზერის ან ინტერნეტის გამოყენებით და უზრუნველყოს გვერდის გაუმჯობესებული ვერსიები მათთვის, ვინც ბრაუზერის უფრო თანამედროვე პროგრამით ან უფრო მაღალი გამტარობით აქვთ.

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

პროგრესული გაუმჯობესება არ საჭიროებს ჩვენ, რომ შევარჩიოთ მხარდაჭერილი ბრაუზერები ან დავუბრუნდეთ ცხრილზე დაფუძნებულ განლაგებებს. ჩვენ ვირჩევთ ტექნოლოგიის დონეს, ანუ ბრაუზერმა უნდა მხარი დაუჭიროს HTML 4.01 და სტანდარტული გვერდის მოთხოვნებს / პასუხებს.

დავუბრუნდეთ ჩვენს მაგალითს, შეგვიძლია დავადგინოთ, რომ ჩვენი პროგრამა უნდა მუშაობდეს ყველა გრაფიკულ ბრაუზერში. ჩვენ შეგვიძლია ნაგულისხმევად გამოვიყენოთ დაბალი ხარისხის GIF სურათები, მაგრამ ჩავანაცვლოთ ისინი 24-ბიტიანი png- ით, როდესაც ბრაუზერი მხარს უჭერს მათ.

ბმულები

ვიკიპედია: თანდათანობითი ზრდა და

Სარჩევი:

-Webkit- პრეფიქსი იმდენად დომინანტურია CSS- ში, რომ ზოგიერთ საიტზე მის გარეშე არ ფუნქციონირებს სწორად. ეს მიუთითებს იმაზე, რომ დეველოპერები ბოლო წლების საუკეთესო პრაქტიკას არ ასრულებენ და ამან გამოიწვია სამწუხარო, მაგრამ თითქმის იძულებითი გადაწყვეტილება Mozilla- ს მხრიდან. Firefox 46 ან 47 ვერსიაში (ეს არის 2016 წლის აპრილი ან მაისი), Mozilla გეგმავს მხარდაჭერას არასტანდარტული –webkit– პრეფიქსით, რათა გააუმჯობესოს Firefox– ის შესაბამისობა საიტებთან, რომლებიც ძლიერ იყენებენ –webkit (როგორც წესი, მობილური საიტები).

ამასთან, დეველოპერები იყენებენ პრეფიქსიებს, რაც შეიძლება სწრაფად ისარგებლონ ბრაუზერის უახლესი შესაძლებლობებით. პრეფიქსებმა დაბნეულობა გამოიწვია WebKit– ის დომინირებაში, მაგრამ მათ ასევე დააჩქარეს ინტერნეტი დაჩქარებული ტემპით.

Mozilla- ს და Microsoft- ის მიდგომა საიტების უმეტესობისთვის უსაფრთხოა. ბევრ საიტს გამოიყენებს -moz- პრეფიქსი ან არ სჭირდება რაიმეს გაკეთება იმისათვის, რომ შეესაბამებოდეს მომავალ Firefox განახლებას. როგორც პროფესიონალმა ვებ – შემქმნელებმა, ჩვენ ყურადღებით უნდა გავითვალისწინოთ და გვესმოდეს ამის შედეგები. თქვენ ზუსტად იცით, თქვენს საიტებზე რომელი გავლენა შეიძლება მოახდინოს ამ განახლებამ.

დროა გადახედოს პრეფიქსით მიდგომას და მათთან ერთად შეამოწმოთ საიტები.

მხარდაჭერილი პრეფიქსი

არსებობს მთელი რიგი –webkit– პრეფიქსი, რომლის განხორციელებაც Mozilla– ს შეუძლია. ჩემს მიერ მოპოვებული მონაცემების საფუძველზე, Mozilla არ ცდილობს მის მიერ მხარდაჭერილი პრეფიქსი თვისებების ჩამონათვალს Edge თვისებების ჩამონათვალთან შეუსაბამოს, რადგან ყველა მათგანი არ არის საჭირო ძრავის ფორმატის თავსებადობისთვის.

Firefox– ის დეველოპერები ასევე ახლოს არიან მსგავს მიდგომასთან:

Mozilla– ს ამჟამინდელი ტენდენციაა გამყიდველის პრეფიქსების თავიდან აცილება თაროზე მყოფი თვისებების გამორთვით და არასაფიქსირებელი ვერსიის გამოყენებით, თუ საკმარისად სტაბილურია. ეს ზოგადი პოლიტიკაა: გამონაკლისები ზოგიერთ შემთხვევაში შესაძლებელია - ბორისი Mozilla- სგან

Microsoft Edge ასევე აპირებს ჩამოაგდეს გამყიდველის პრეფიქსი:

”Microsoft ასევე ცდილობს ჩამოყაროს გამყიდველის პრეფიქსი Edge- ში. ეს ნიშნავს, რომ დეველოპერები, რომლებიც იყენებენ HTML და CSS– ის სპეციფიკურ მახასიათებლებს, არ გამოიყენებენ Edge– ს სპეციალურ პრეფიქსს. ამის ნაცვლად, ისინი უბრალოდ დაწერენ კოდს სტანდარტების შესაბამისად. ”(Mashable)

აღარ მოხდება თანდათანობითი დეგრადაცია პრეფიქსების საფუძველზე

გამყიდველის პრეფიქსიდან ეს დაშორება ნიშნავს ერთ რამეს - გამყიდველის პრეფიქსით თანდათანობით დეგრადაციას პერსპექტივა არ აქვს.

გამყიდველის პრეფიქსების გამოყენება კონკრეტული ბრაუზერისთვის სტილის გამოყენებისთვის (მაგალითად, მხოლოდ Chrome- ისთვის) არ იყო მათი დანერგვის მიზანი; რეკომენდაცია დეველოპერებისთვის ყოველთვის იყო ყველა პრეფიქსი (-webkit- დან -o-). თუ იყენებთ ფუნქციებს, რომლებიც დამოკიდებულია პრეფიქსიან თვისებებზე და იყენებთ პრეფიქსებს თქვენი დიზაინის სხვა ბრაუზერებში ეტაპობრივად დეგრადირებისთვის, ეს აღარ მუშაობს

დასკვნა

დრო იცვლება. WebKit– ის დომინირებამ უნებლიედ გამოიწვია შეუთავსებლობის საკითხები, რაც ბრაუზერის სხვა გამყიდველებს აიძულებს -webkit– პრეფიქსი გამოიყენონ. ეს საკითხი ამოიწურება, რადგან ბრაუზერის მომწოდებლები მოცილდებიან მომწოდებლის პრეფიქსებს, მაგრამ ახლავე, დეველოპერებმა უნდა დარწმუნდნენ, რომ პრეფიქსი არ იწვევს მოულოდნელ შედეგებს არა WebKit ბრაუზერებში.

ვებდიზაინ ინდუსტრია მუდმივად იცვლება, ნაწილობრივ იმიტომ, რომ ვებ – ბრაუზერები და მოწყობილობები მუდმივად იცვლება. იმის გამო, რომ სამუშაოს, რომელსაც ვებდიზაინერებად და დეველოპერებად ვაკეთებთ, ვებსაიტის საშუალებით უყურებენ, ჩვენს ნამუშევრებს ყოველთვის ექნებათ სიმბიოტიკური ურთიერთობა ამ პროგრამულ უზრუნველყოფასთან.

ვებ ბრაუზერების ცვლილებები

ერთ – ერთი გამოწვევა, რომელსაც ვებგვერდების დიზაინერები და შემქმნელები ყოველთვის განიცდიდნენ, არის არა მხოლოდ ბრაუზერების ცვლილებები, არამედ სხვადასხვა ვებ – ბრაუზერების სპექტრი, რომლებიც გამოყენებული იქნება მათ ვებ – გვერდებზე შესასვლელად. კარგი იქნება, თუ საიტის ყველა ვიზიტორი გამოიყენებს უახლეს და უდიდეს პროგრამულ უზრუნველყოფას, მაგრამ ეს ასე არასდროს ყოფილა (და არც არასოდეს მოხდება).

თქვენი საიტების ზოგიერთი სია დაათვალიერებს ინტერნეტს ძალიან მოძველებული ბრაუზერებით და უფრო თანამედროვე ბრაუზერებიდან გამოტოვებული ფუნქციებით. მაგალითად, Microsoft Internet Explorer ბრაუზერის ძველი ვერსიები მრავალი ვებ – პროფესიონალისთვის დიდი ხანია წარმოადგენს პრობლემას. მიუხედავად იმისა, რომ კომპანიამ უარი თქვა უძველესი ბრაუზერების მხარდაჭერაზე, მაინც არიან ადამიანები, რომლებიც გამოიყენებენ მათ - ადამიანები, რომლებთანაც ურთიერთობა გსურთ და მათთან ურთიერთობა.

განმარტება "მოხდენილი დეგრადაცია"

სინამდვილეში ის არის, რომ ადამიანები, რომლებიც იყენებენ ამ მოძველებულ ბრაუზერებს, ხშირად არც კი იციან, რომ მათ აქვთ მოძველებული პროგრამული უზრუნველყოფა ან მათი ინტერნეტ გამოცდილება შეიძლება კომპრომეტირდეს პროგრამული უზრუნველყოფის არჩევის გამო. მათთვის ეს მოძველებული ბრაუზერი უბრალოდ ის არის, რასაც ისინი დიდი ხნის განმავლობაში იყენებდნენ ვებსაიტებზე შესასვლელად. ვებ დეველოპერების გადმოსახედიდან, ჩვენ გვინდა დავრწმუნდეთ, რომ ამ მომხმარებლებს შეგვიძლია შემოგთავაზოთ ჯილდო გამოცდილება, ასევე შევქმნათ ვებგვერდები, რომლებიც შესანიშნავად მუშაობს უფრო თანამედროვე, გამორჩეული ბრაუზერებით და მოწყობილობებით

"მოხდენილი დეგრადაცია" არის ვებ – გვერდების დიზაინის დამუშავების სტრატეგია, როგორც ძველი, ისე ახალი ბრაუზერებისათვის.

თანამედროვე ბრაუზერებიდან დაწყებული

ეტაპობრივი დეგრადაციისთვის შექმნილი ვებ – გვერდის დიზაინი, ძირითადად, შემუშავებულია თანამედროვე ბრაუზერების გათვალისწინებით. ეს საიტი შექმნილია იმისთვის, რომ ისარგებლოს ამ თანამედროვე ვებ ბრაუზერების შესაძლებლობებით, რომელთა უმეტესობა "ავტომატურად განახლდება" ისე, რომ ადამიანები ყოველთვის იყენებენ უახლეს ვერსიას. ამასთან, მოხდენილი დეგრადირებადი ვებ – გვერდები ეფექტურად მუშაობს ძველი ბრაუზერებისათვის. როდესაც ეს ძველი, ნაკლებად ფუნქციონალური ბრაუზერები ნახულობენ საიტს, ის უნდა დეგრადირდეს, სანამ ის ჯერ კიდევ ფუნქციონირებს, მაგრამ შესაძლოა ნაკლები ფუნქციებით ან ვიზუალური ჩვენების სხვა ელემენტებით. მიუხედავად იმისა, რომ თქვენთვის ნაკლებად ფუნქციონალური ან არც თუ ისე მიმზიდველი საიტის შეთავაზების ეს კონცეფცია შეიძლება უცნაურად მოგეჩვენოთ, სიმართლე ისაა, რომ ხალხმა არც კი იცის რომ აკლია. ისინი არ შეადარებენ საიტს, რომელსაც ხედავენ "საუკეთესო ვერსიასთან", ასე რომ სანამ საიტი მუშაობს იმაზე, რაც მათ სურთ და არ აღმოჩნდება ფუნქციურად ან ვიზუალურად გატეხილი, თქვენ ფორმაში იქნებით.

პროგრესული გაუმჯობესება

თანდათანობითი დეგრადაციის კონცეფცია ჰგავს ვებდიზაინის სხვა კონცეფციას, რომლის შესახებაც შეიძლება გსმენიათ - პროგრესული გაუმჯობესება. მთავარი განსხვავება დეგრადაციის სტრატეგიასა და პროგრესული გაუმჯობესების სტრატეგიას შორის არის ის, თუ სად დაიწყებთ დიზაინს. თუ თქვენ დაიწყებთ ყველაზე დაბალი საერთო მნიშვნელით და შემდეგ დაამატებთ ბრაუზერის უფრო თანამედროვე ფუნქციონირებას თქვენს ვებ – გვერდებს, თქვენ იყენებთ პროგრესულ გაფართოებას. თუ თქვენ დაიწყებთ ყველაზე თანამედროვე, უახლესი მახასიათებლებით და შემდეგ დააშორებთ მასშტაბებს, თქვენ გამოიყენებთ ეტაპობრივ დეგრადაციას. დაბოლოს, შედეგად მიღებული ვებსაიტი, სავარაუდოდ, მოგცემთ იგივე გამოცდილებას, იყენებთ თუ არა პროგრესულ გაუმჯობესებას ან ეტაპობრივ დეგრადაციას. სინამდვილეში, ნებისმიერი მიდგომის მიზანია შექმნათ საიტი, რომელიც შესანიშნავად მოქმედებს თანამედროვე ბრაუზერებისთვის, ხოლო მომხმარებლების გამოცდილებას მაინც უზრუნველყოფს ძველი ვებ ბრაუზერები და კლიენტები, რომლებიც განაგრძობენ მათ გამოყენებას.

მოხდენილი დეგრადაცია არ ნიშნავს, რომ თქვენ მკითხველს ეუბნებით: "ჩამოტვირთეთ უახლესი ბრაუზერი".

ერთ-ერთი მიზეზი, რის გამოც ბევრ თანამედროვე დიზაინერს არ მოსწონს დეგრადაციის მოხდენილი მიდგომა არის ის, რომ იგი ხშირად ითხოვს მკითხველების ჩატვირთვას ყველაზე თანამედროვე ბრაუზერის გვერდის მუშაობისთვის. ეს არ არის მოხდენილი დეგრადაცია. თუ გსურთ დაწეროთ ”ჩატვირთეთ ბრაუზერი X, რომ ეს ფუნქცია გამოდგეს”, თქვენ დატოვებთ ეტაპობრივი დეგრადაციის არეალს და გადახვალთ ბრაუზერზე ორიენტირებულ დიზაინზე. დიახ, უდაოდ სასარგებლოა ვებსაიტის ვიზიტორის დახმარება უკეთეს ბრაუზერში გადასვლაში, მაგრამ ამას ხშირად ეკითხებიან (გახსოვდეთ, ბევრ ადამიანს არ ესმის, როგორ ჩამოტვირთოთ ახალი ბრაუზერები და ამის გაკეთება თქვენი საშინელი იქნება). მათ მოშორებით). თუ ნამდვილად გსურთ, რომ მათმა ბიზნესმა მათ უთხრას, უთხრან, რომ ტოვებენ თქვენს საიტს უკეთესი პროგრამული უზრუნველყოფის ჩამოსატვირთად, ეს შეუძლებელია. თუ თქვენს საიტს არ აქვს ძირითადი ფუნქციები, რაც მოითხოვს ბრაუზერის სპეციალურ ვერსიას ან უფრო მაღალ ვერსიას, იძულებითი ჩამოტვირთვა ხშირად არღვევს მომხმარებლის გამოცდილებას და თავიდან უნდა იქნას აცილებული.

კარგი წესი არის თანდათანობითი გაუარესების იგივე წესების დაცვა, რაც პროგრესული გაუმჯობესებისთვის:

  • დაწერეთ სწორი HTML სტანდარტების შესაბამისი
  • გამოიყენეთ გარე სტილის ფურცლები თქვენი დიზაინისა და განლაგებისათვის
  • გამოიყენეთ გარედან დაკავშირებული სკრიპტები ინტერაქტიულობისთვის
  • დარწმუნდით, რომ შინაარსი ხელმისაწვდომია თუნდაც დაბალი დონის ბრაუზერებისთვის CSS ან JavaScript– ის გარეშე

ამ პროცესის გათვალისწინებით, თქვენ შეგიძლიათ გასვლა და შექმნათ ყველაზე თანამედროვე დიზაინი, რაც შეგიძლიათ! უბრალოდ დარწმუნდით, რომ ის მუშაობს ნაკლებად ფუნქციურ ბრაუზერებში, სანამ მუშაობთ.

რამდენად უკან უნდა წახვიდე?

ბევრი კითხვა, რომელიც ბევრ ვებ – შემქმნელს აქვს, არის რამდენად უნდა დაუჭიროთ მხარი ბრაუზერის ვერსიებს. ამ კითხვაზე ზუსტი და მშრალი პასუხი არ არის. ეს დამოკიდებულია თავად საიტზე. თუ გადავხედავთ ტრაფიკის ანალიზს საიტზე, შეგიძლიათ ნახოთ რომელი ბრაუზერები გამოიყენება ამ საიტის მონახულებისათვის. თუ ხედავთ, რომ ადამიანების მნიშვნელოვანი პროცენტი იყენებს გარკვეულ ხანდაზმულ ბრაუზერს, მაშინ ალბათ გსურთ ამ ბრაუზერის მხარდაჭერა ან ამ ბიზნესის დაკარგვის რისკი. თუ გადახედავთ თქვენს ანალიზს და ხედავთ, რომ არავინ იყენებს ბრაუზერის ძველ ვერსიას, თქვენ ალბათ გადაწყვიტეთ, რომ არ იდარდოთ ამ მემკვიდრეობის ბრაუზერის სრულად მხარდაჭერაზე და მის ტესტირებაზე. ასე რომ, ნამდვილი პასუხი კითხვაზე, თუ რამდენად შორს არის საჭირო თქვენი საიტი მხარდაჭერისთვის: „არ აქვს მნიშვნელობა, რამდენად შორს გეტყვიან თქვენი ანალიტიკოსები, რას იყენებენ თქვენი მომხმარებლები“.

რედაქტირებულია ჯერემი გირარდი.

რა თქმა უნდა, Internet Explorer შეიცავს დიდი რაოდენობით შეცდომებს სხვადასხვა ვერსიებში, მაგრამ პირობითი კომენტარების დახმარებით თქვენ შეგიძლიათ გაუმკლავდეთ მათ და მიაღწიოთ მათ აღმოფხვრას. მაგრამ ის, რაც ვერ დაფიქსირდა, არის ის, რომ IE უიმედოდ მოძველებულია. მიუხედავად იმისა, რომ სხვა ბრაუზერები უფრო და უფრო მეტ CSS3 თვისებას შეიცავს, მხარს უჭერს სხვადასხვა ახალდაფინანსებულ ტექნოლოგიებს, IE აღნიშნავს დროს. IE9 გამოცემა ვერ გადაჭრის პრობლემას, წინა ვერსიები არ აორთქლდება მთელი ღამის განმავლობაში. ასეთ სიტუაციაში საუკეთესო გამოსავალი იქნება მოხდენილი დეგრადაცია - ფუნქციონირების ნაწილის დაკარგვის შემთხვევაში ოპერატიულობის შენარჩუნების პრინციპი.

მოდით გადავხედოთ ამ ხრიკს მცირე მაგალითით, რომელიც აჩვენებს ტექსტს ბლოკში და ღილაკზე. ბლოკს და ღილაკს აქვს მომრგვალებული კუთხეები, ბლოკს ემატება პატარა ჩრდილიც. ჯერჯერობით, CSS3– ის ბრაუზერები ძირითადად იყენებენ სპეციფიკურ თვისებებს საკუთარი პრეფიქსით:

  • Firefox - თვისებები, დაწყებული -moz- ით;
  • Safari და Chrome - თვისებები, დაწყებული -webkit- ით;
  • ოპერა - თვისებები, დაწყებული -o-.

ამ ბრაუზერების სხვადასხვა ვერსიებს შეუძლიათ გაიგონ რამდენიმე თვისება პრეფიქსით ან მის გარეშე, ამიტომ უნივერსალობისთვის ისინი ერთდროულად დაამატებენ რამდენიმე თვისებას. ასე რომ, მომრგვალებული კუთხეების შესაქმნელად ჩვენ გვჭირდება შემდეგი სტილი.

Moz- საზღვარი-რადიუსი: 10px; / * Firefox- ისთვის * / -webkit-border-radius: 10px; / * Safari- სა და Chrome- ისთვის * / border-radius: 10px; / * ოპერისა და IE9– ისთვის * /

მიუხედავად იმისა, რომ ამ თვისებების გამოყენებას არასწორი CSS მოჰყვება, ამ შემთხვევაში უფრო მნიშვნელოვანია მუშაობა ბრაუზერებში Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, აგრეთვე მათ ძველ ვერსიებში. მაგალითი 1 გვიჩვენებს, თუ როგორ უნდა გამოვიყენოთ CSS3 თვისებები ჩამოსაშლელი ჩრდილისა და მომრგვალებული კუთხეების შესაქმნელად.

მაგალითი 1. ჩრდილიანი ბლოკი

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx

ბლოკი

თქვენ უნდა გაიაროთ 20 კითხვა, რომელთა შერჩევა ხდება მონაცემთა ბაზაში. ტესტის ჩასაბარებლად საკმარისია სწორად გასცეს პასუხი შემოთავაზებული შეკითხვების არანაკლებ 75% -ს (15 ან მეტი კითხვა).



მაგალითის შედეგი ნაჩვენებია ნახაზზე. 1

ფიგურა: 1. დაბლოკეთ ხედი Safari– ში

IE8 და ქვემოთ მოცემული იგივე მაგალითი ნაჩვენებია ნახატზე. 2

ფიგურა: 2. ბლოკის ხედი IE8- ში

მიუხედავად იმისა, რომ ელემენტების გამოჩენა დეტალურად განსხვავდება, მთლიანობაში გვერდის ფუნქციონირება რჩება. ღილაკზე დაჭერა შესაძლებელია, ტექსტი იგივე რჩება, მისი ფერისა და ფონის ჩათვლით, ეკრანის შეცდომები არ არის. სინამდვილეში, განსხვავება მხოლოდ წვრილმანებშია, რომლებიც ასრულებენ დეკორატიულ და არა გამოყენებულ ფუნქციებს. შესრულებულია მოხდენილი დეგრადაციის ყველა პრინციპი.

რას იძლევა ეს მიდგომა პრაქტიკაში?

  • საშუალებას გაძლევთ აქტიურად გამოიყენოთ CSS3 დეკორატიული თვისებები ბრაუზერის დათვალიერების გარეშე.
  • მოტივირებულია სხვადასხვა CSS3 ეფექტების გამოყენებაში.
  • ეს ბევრად ამარტივებს დეველოპერის ცხოვრებას, რადგან მას აღარ მოუწევს მოძველებული ბრაუზერების გადაწყვეტილებების ძებნა.
  • აჩქარებს მუშაობის პროდუქტიულობას.

რა თქმა უნდა, მოხდენილი დეგრადაცია ყოველთვის არ გამოიყენება. თუ განლაგების მოთხოვნები მიუთითებს ძველი ვერსიების მხარდაჭერაზე, თქვენ უნდა მოძებნოთ ალტერნატიული გადაწყვეტილებები, მაგალითად, გამოიყენოთ გამოსახულებები მომრგვალებული კუთხეებისთვის. მაგრამ უმეტესწილად, განლაგების მოთხოვნები დადგენილია ზოგადი ვითარების გათვალისწინების გარეშე. და თუ შევადარებთ მოხდენილი დეგრადაციის ყველა უპირატესობას იმ მინუსთან, რომელიც გამოიხატება მხოლოდ იმაში, რომ მოძველებული ბრაუზერები, კერძოდ IE8, არ აჩვენებს გვერდს "ლამაზად", მაშინ თანაგრძნობა იქნება პროგრესის მხარეს.

დიდი ხანია არ მიწერია, ინტერნეტის გარეშე უნდა გადავსულიყავი ადგილზე (ეს არის საშინელება), რის შედეგადაც ბლოგს ვერ მივწერ. დღეს მინდა ვისაუბრო განვითარების მეთოდზე (განლაგებაზე), რომელიც ნაწილობრივ გამოიყენება ჩემი ბლოგის დიზაინის დროს.

ინოვაციური ბრაუზერების უახლესმა ვერსიებმა (როგორიცაა FF 3.5, Opera 10) შემოიტანეს დეკორატიული ეფექტები შემოთავაზებული CSS 3 სპეციფიკაციიდან. გამჭვირვალობა, ჩრდილები და ზებრა (ზოლების) ეფექტები ახლა ხელმისაწვდომია JavaScript- ისა და დამატებითი ნიშნების გარეშე. მაგრამ ზოგიერთი ძველი ბრაუზერი, რომელიც კვლავ იყენებს ამ თვისებებს, არ იქნება და სამწუხარო იქნება, თუ ვიფიქრებთ, რომ ამ შესანიშნავი ეფექტების გამოყენების შანსი კიდევ რამდენიმე წლის განმავლობაში არ გექნებათ.

ამ სტატიაში ვისაუბრებ იმაზე, თუ როგორ უნდა მოხდეს ლამაზი (თანდათანობითი) გაუმჯობესება ბრაუზერებში, რომლებიც მხარს უჭერენ CSS3 მახასიათებლებს და ამავე დროს აჩვენებენ განლაგებას, რომელიც აკმაყოფილებს სხვა მომხმარებლებს.

რა არის პროგრესული გაძლიერება?

იმისთვის, რომ გავიგოთ ”ზრდადი გაუმჯობესება”, უნდა გვესმოდეს ”მოხდენილი დეგრადაციის” პრინციპი, რომელიც კარგად არის აღწერილი შემდეგი ციტირებით:

მცირედი დეგრადაცია ნიშნავს, რომ თქვენი საიტი აგრძელებს მუშაობას მაშინაც კი, როდესაც ნახოთ ნაკლებად ოპტიმალურ ბრაუზერში, რომელშიც მოწინავე ეფექტები არ მუშაობს.
Fluid Thinking, ავტორი პიტერ-პოლ კოხი

"თანდათანობითი გაუმჯობესება" იყენებს იმავე მეთოდს მხოლოდ საპირისპირო მხრიდან, იმის ნაცვლად, რომ იზრუნოთ საიტის ძველ ბრაუზერში, თქვენ ჯერ უნდა იფიქროთ შინაარსზე და უბრალოდ დაამატოთ თანამედროვე პროგრამების მახასიათებლები დიზაინში მომხმარებლის გამოცდილების გასაუმჯობესებლად, ხოლო ბაზის მდგომარეობა განლაგებები კვლავ მუშაობს ძველ მანქანებზე. ამჟამად ეს საუკეთესო გზაა CSS 3 – ის ახალი მახასიათებლების გამოყენებისთვის.

მაგალითი

მაგალითად, მოდით შევადგინოთ მარტივი სანავიგაციო მენიუ, რომელიც ცოტათი გალამაზდება, რაც დამოკიდებულია ნებისმიერ ბრაუზერში CSS მხარდაჭერაზე.

მინდა აღვნიშნო, რომ ამ მაგალითში მე არ ვიყენებ გრაფიკას, ჰაკს ან ბრაუზერის სპეციფიკურ პრეფიქსით - ყველა გაუმჯობესება გამოწვეულია დეკლარირებული შესაძლებლობებით. ამის გათვალისწინებით, ქვემოთ მოცემული ზოგიერთი რამ მხოლოდ მაგალითად არის და შეიძლება არ იყოს საუკეთესო არჩევანი რეალური ვებსაიტების შესაქმნელად.

მონიშვნა

მოდით შევადგინოთ მარტივი მენიუ დალაგებული ჩამონათვალის (ul) გამოყენებით:

ძირითადი სტილი

როგორც ძირითადი, მე გამოვიყენებ სტილს, რომელიც იყენებს მხოლოდ მემკვიდრეობის უბრალო ამორჩევას. იგი ქმნის საზღვარს თითოეულ ელემენტზე და ცვლის ფონს მაუსის გადაადგილებისას (onmouseover). ეს უნდა იმუშაოს ნებისმიერ ბრაუზერში, რომელიც დამზადებულია ბოლო 7-8 წლის განმავლობაში (და შესაძლოა უფრო მეტისაც).

CSS ძალიან მარტივია:

ულ (
ფონის ფერი: ლურჯი;
საზღვრის ქვედა: 1px წერტილოვანი # 999;
სიის სტილი: არცერთი;
ზღვარი: 15px;
სიგანე: 150 პიქსელი;
}

ლი (
ფონის ფერი: #fff;
საზღვარი: 1px წერტილოვანი # 999;
საზღვრის ქვედა სიგანე: 0;
შრიფტი: 1.2em / 1.333 Verdana, Arial, sans-serif;
}

ლი ა (
ფერი შავი;
ჩვენება: ბლოკი;
სიმაღლე: 100%;
შევსება: 0.25em 0;
ტექსტის გასწორება: ცენტრი;
ტექსტი-დეკორაცია: არცერთი;
}

li a: hover (ფონის ფერი: #efefef;)

ერთადერთი უცნაურობა აქ არის ლურჯი ფონი

    ; ამას მოგვიანებით ავუხსნი. ამ სტილის საშუალებით, ჩვენ გვექნება შემდეგი საბაზისო ხედი, რომელიც IE6– ში ასე გამოვა:

    ძირითადი განლაგება, როგორც ის გამოიყურება IE6 და სხვა ძველ ბრაუზერებში.

    გაუმჯობესების გამოყენება

    IE7 იყო პირველი IE ბრაუზერის სერიაში, რომელმაც მხარი დაუჭირა CSS 2.1 ატრიბუტის ყველა სელექტორს, რაც გავრცელებულია თითქმის ყველა სხვა ბრაუზერში. ჩვენ შეგვიძლია გამოვიყენოთ ერთი მათგანი - ბავშვის ამორჩევა - გაუმჯობესების დასაწყებად. რადგან IE6 მხარს არ უჭერს ბავშვის ამორჩევას, ის უგულებელყოფს შემდეგ წესებს:

    კორპუსი\u003e ul (საზღვრის სიგანე: 0;)

    ul\u003e li (
    საზღვარი: 1px მყარი #fff;
    საზღვრის სიგანე: 1px 0 0 0;
    }

    li\u003e a (
    ფონის ფერი: # 666;
    ფერი: თეთრი;
    შრიფტის წონა: სქელი;
    }

    li: პირველი - ბავშვი a (ფერი: ყვითელი;)

    li\u003e a: hover (ფონის ფერი: # 999;)

    ამ CSS წესების მიხედვით, სია ასე გამოიყურება:

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

    ეს გამოჩნდება IE7, Firefox, Safari და Opera- ს სიაში.

    მოდით მეტი ყურადღება გავუსვათ

    შემდეგი ნაბიჯი არის აქცენტის გაზრდა ისეთი თვისების გამოყენებით, რომელსაც IE არ ცნობს: გაუმჭვირვალობა. ამისათვის ჩვენ არ გვჭირდება სპეციალური სელექტორების გამოყენება IE უბრალოდ გამოტოვებს თვისებებს, რომლებსაც მხარს არ უჭერს:

    Li (გაუმჭვირვალობა: 0.9;)

    li: hover (გაუმჭვირვალობა: 1;)

    შემდეგ სურათზე ნაჩვენებია, თუ როგორ მუშაობს ეს თვისება ოპერაში, თქვენ ხედავთ, რომ სიის ელემენტებმა ფონის მსუბუქი ლურჯი ელფერი შეიძინა.

      ... მაუსის გადაადგილებისას, თითოეული ელემენტი ხდება მთლიანად გაუმჭვირვალე:

      თქვენ, რა თქმა უნდა, შეგიძლიათ გამოიყენოთ IE- ს ფილტრის თვისება იგივე ეფექტისთვის IE- ში. ასევე ბრაუზერისთვის დამახასიათებელი პრეფიქსი (-moz-, -webkit-) ქვემოთ მოცემული თვისებებისთვის. მაგრამ საგანმანათლებლო მიზნებისათვის მე ვიცავ CSS სტანდარტს, რადგან ფილტრი არ არის სტანდარტული. ქონება, მაშინ ის არ არის მართებული.

      Firefox 2 მხარს უჭერს გამჭვირვალობას, მაგრამ შემდეგ ბრაუზერებში შეგვიძლია კიდევ უფრო შორს წავიდეთ. Safari- სა და Opera- ში შეგვიძლია ტექსტი გავაფორმოთ ტექსტის ჩრდილის თვისების გამოყენებით:

      Li a: hover (ტექსტური ჩრდილი: 2px 2px 4px # 333;)

      როგორც შემდეგ სურათზეა ნაჩვენები, ელემენტი ოდნავ ჩრდილს იღებს და ჩანს, რომ გვერდიდან ოდნავ გამოდის:

      დაბოლოს, ჩვენ შეგვიძლია ვიზრუნოთ ოპერის სრულ მხარდაჭერაზე CSS 3-ის ახალი სელექტორების მიმართ და დავამატოთ გაუმჯობესების კიდევ ერთი ფენა: ცვალებადი ფონის ფერები მე -9 შვილის არჩევის გამოყენებით:

      Li: nth-child (2n + 1) a (ფონის ფერი: # 333;)

      li: nth-child (n) a: hover (
      ფონის ფერი: #aaa;
      ფერი: # 000;
      }

      li: first - child\u003e a: hover (ფერი: ყვითელი;)

      ოპერის ზოლიან მენიუს ვნახავთ:

      რეზიუმე და დასკვნები

      ქვემოთ მოყვანილი სურათი გვიჩვენებს, თუ როგორ გამოიყურება საწყისი ნიშანი IE6, IE7, Firefox, Safari და Opera- ში, ამ სტატიაში აღწერილი CSS წესების გამოყენების შემდეგ. როგორც ხედავთ, CSS– ს ბრაუზერის მხარდაჭერა უფრო იხვეწება, მენიუები უფრო თანამედროვე და დახვეწილი ხდება, თანდათანობითი გაუმჯობესების ტექნიკის გამოყენებით მენიუები ფუნქციონირებენ ძველ ბრაუზერებშიც კი.

      რა თქმა უნდა, ბევრ ბრაუზერს აქვს სხვა თვისებები, რომლებიც მე აქ არ განვახილე, რომელთა გამოყენება შესაძლებელია, როგორიცაა RGBA ფერები და SVG, როგორც ფონის ფერები.