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

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

Tim არ არის mensch, rozrobniki zastosovuyut პრეფიქსები, რათა vikorystuvat ახალი შესაძლებლობებიბრაუზერები რაც შეიძლება სწრაფია. პრეფიქსები უთანხმოებას იწვევდნენ 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 ბრაუზერებში.

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

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

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

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

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

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

მოხდენილი დეგრადაციის პრინციპის დაცვა საშუალებას აძლევს კლიენტებს (კანის კლიენტი არის პოტენციური კლიენტი) საიტთან მუშაობის შესაძლებლობა ნებისმიერ სიტუაციაში.

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

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

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

პროგრესული გაფართოების პრინციპიდან გამომდინარე, პროცესი შედგება შემდეგი ეტაპებისგან:

• გვერდის შექმნა "სუფთა"HTML
  ამ ეტაპზე იქმნება სრულად ფუნქციონალური გვერდი, რომელიც შედგება მხოლოდ ერთი HTML კოდისგან, რომელიც არის სემანტიკურად და ლოგიკურად სწორი, რაც ნიშნავს, რომ მისი ინტერპრეტაცია შესაძლებელია ნებისმიერი ბრაუზერის მიერ, უმარტივესი სიტყვებით. ამ ეტაპზე ფორმატირება არ ხდება და ბრაუზერი თავად აფორმებს გვერდს იმავე სტანდარტების მიხედვით, როგორც ახალ ჩანართში. პროგრესული გაუმჯობესება განპირობებულია იმით, რომ პირველი ეტაპი ყველაზე მნიშვნელოვანია, რადგან ინტერნეტს არაფერი აქვს ღირებული, შინაარსი.
  მოკლე: სემანტიკური და ლოგიკური დოკუმენტის სტრუქტურის შექმნა
• დამატებითი წესებიCSS
  რომელ ეტაპზეა CSS ცხრილი დაყენებულია ძველ ფორმატზე: განლაგების ბადე, ემატება ელემენტების პოზიციონირება, დაყენება ფონის სურათებიბლოკებისთვის იცვლება ტექსტების სტილი, ფერები და გამოსახულებები. სხვათა შორის, გვერდი ახალ სტილიზებულ სახეს იძენს და ხდება ლამაზი და მისასალმებელი.
  მოკლე: დოკუმენტს გარე იერსახის მიცემა
• Zastosuvannya CSS3
  ახლა დოკუმენტის შევსება შესაძლებელია ყველა ეფექტით და შემოკლებით, CSS3 სპეციფიკაციაზე გადატანით. სიცხადის დასამატებლად, ჩრდილები, მომრგვალებული კიდეები ბლოკებისთვის, ანიმაციური გლუვი გადასვლები ფსევდო-კლასებისთვის ან ფორმის ელემენტებისთვის.
  მოკლე: უცოდინრობის გამო გარედან იყურებადოკუმენტი
• სკრიპტების შექმნაJavaScript
  ამ ეტაპზე იქმნება JavaScript-ის გამოყენებით ვებ გვერდსა და კლიენტს შორის ურთიერთქმედების ყველა ეფექტი და პრინციპი. თუ ითხოვთ AJAX-ს, მაშინ დინამიურად შთაგონებულიან მონაცემთა გადამოწმება, ანიმაციური ეფექტები და ვიჯეტები (მაგალითად, პროტოტიპი ან jQuery). საგულდაგულოდ დავხურეთ მხარე, რომელიც მოსახერხებელია კისტუვაჩისთვის.
  მოკლე: ურთიერთთანამშრომლობა, ინტერაქტიულობა, მოხერხებულობა

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

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

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

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

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

რა პრინციპი უნდა დავიცვათ?

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

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

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

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

მიხარია, რომ განსხვავებაა პროგრესული წინსვლაі ვიტონჩენი დეგრადაცია. მგონი იგივეა.

იქნებ ამიხსნათ რა განსხვავებაა ამ ორს შორის და რა სიტუაციაში ვიქნებოდი გამარჯვებული ერთმანეთზე?

8 ეპიზოდი

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

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

Რა გინდა მომატებამტკიცებულება მათთვის, ვისაც მოსწონს FF3.6 ან Safari 4 ან ნებისმიერი სხვა დისტრიბუტორი, რომელიც აცნობს ღამის ვებ გვერდს, რა გაქვთ, გსურთ შექმნათ საოცარი გამოსვლები, როგორიცაა

• მომრგვალებული კუთხეები css-ის საშუალებით
• ტექსტის დაჩრდილვა (კარგი, იყავი კეთილი, ღმერთო, ნუ იქნები ძალიან მდიდარი)
• ჩამოაგდეთ ჩრდილები (ტაძრების საოცარი სანახაობა)

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

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

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

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

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

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

პირდაპირ სურათიდან ძირითადიკანის გაგება ხოცვა-ჟლეტის შესახებ.

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

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

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

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

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

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

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

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

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

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

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

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

ვიტონჩენი დეგრადაცია

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

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

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

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

პროგრესული წინსვლა

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

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

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

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

პოზილანნია

ვიკიპედია: პროგრესული წინსვლაі

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

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

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

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

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

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

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

კონდახი

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

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

რაზმიტკა

ძალიან მარტივი მენიუ, ძალიან არაორგანიზებული სია (ul):

• ლორემ იფსუმი


• ლორემ იფსუმი


• ლორემ იფსუმი


• ლორემ იფსუმი


• ლორემ იფსუმი

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

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

CSS კიდევ უფრო მარტივია:

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

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

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

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

ერთადერთი სილამაზე აქ არის ლურჯი ფონი

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

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

Zastosuvannya ფერწერა

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

სხეული > ul (საზღვრის სიგანე: 0;)

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

li > a (
ფონის ფერი: #666;
ფერი: თეთრი;
შრიფტის წონა: თამამი;
}

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

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

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



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

ასე აჩვენეთ სია IE7, Firefox, Safari და Opera.

გაცილებით მეტი აქცენტი

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

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

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

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

. მაუსის გადაადგილებისას კანის ელემენტი სრულიად უხილავი ხდება:



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

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

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

როგორც ქვემოთ მოყვანილი სურათიდან ჩანს, ელემენტი, როდესაც მოძრაობს, იძენს ოდნავ ჩრდილს და გვერდიდან ოდნავ ამობურცული ჩანს:



კარგი, თქვენ შეგიძლიათ მხარი დაუჭიროთ Opera-ს განახლებულ მხარდაჭერას CSS 3-ის ახალი სელექტორებისთვის და დაამატოთ კიდევ ერთი გამაძლიერებელი ბურთი: ცვალებადი ფერები ფონისთვის და ამომრჩეველი nth-child:

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

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

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

ჩვენ დაგეხმარებით ოპერაში მენიუს გასინჯვაში:



ჩანთა და თოფი

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



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

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

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

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

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

Moz-საზღვარი-რადიუსი: 10px; /* Firefox-ისთვის */ -webkit-border-radius: 10px; /* Safari-სა და Chrome-ისთვის */ border-radius: 10px; /* Opera და 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, არ აჩვენებს გვერდს საკმარისად „ლამაზად“, მაშინ პროგრესის მიმართ თანაგრძნობა გამოჩნდება.