Вэб-браўзэры былі вакол да таго часу, як вэб-сайты маюць. На самай справе, браўзэры з'яўляюцца важным кампанентам у вопыце або людзей, праглядаюць ваш сайт - але не ўсе браўзэры аднолькава. Цалкам магчыма (і на самай справе даволі верагодна), каб кліенты прагляду вэб-старонак у браўзэрах, якія вельмі старыя і не хапае, функцыі, якія знаходзяцца ў больш сучасных браўзэрах. Гэта можа стварыць сур'ёзныя праблемы , як вы імкнуцца да распрацоўкі вэб - сайтаў , якія выкарыстоўваюць перавагі апошніх дасягненняў у галіне дызайну і распрацоўкі вэб - сайта . Калі хто-то прыходзіць на ваш сайт, выкарыстоўваючы адзін з гэтых браўзэраў Antiqued, і вашы апошнія перадавыя метады не працуюць для іх, вы маглі б пастаўляць дрэнны вопыт у цэлым. Прагрэсіўнае паляпшэнне з'яўляецца стратэгія апрацоўкі дызайн вэб-старонкі для розных браўзэраў, а менавіта тых старых браўзэраў, якія адсутнічаюць у сучаснай падтрымкі.
Прагрэсіўнае паляпшэнне з'яўляецца спосаб распрацоўкі вэб-старонак, так што больш магчымасцяў агент карыстальніка падтрымлівае, тым больш функцый вэб-старонка будзе мець. Гэта супрацьлегласць стратэгіі праектавання , вядомая як грацыёзная дэградацыя . Гэтая стратэгія стварае старонкі для самых сучасных браўзэраў, а затым гарантуе, што яны таксама працуюць дастаткова добра з менш функцыянальнымі браўзэры - «дэградуе хупава», што вопыт Прагрэсіўнае паляпшэнне пачынаецца з менш здольнымі браўзэрамі першых і будуе вопыт адтуль.
Як выкарыстоўваць Progressive Enhancement
Пры стварэнні вэб-дызайн з выкарыстаннем прагрэсіўнага паляпшэння, то першае, што вы будзеце рабіць гэта, каб стварыць дызайн, які працуе па найменшай агульнага назоўніка вэб-браўзэраў. Па сваёй сутнасці, прагрэсіўнае паляпшэнне кажа , што ваш кантэнт павінен быць даступны для ўсіх вэб - браўзэраў, а не толькі суб-set.This чаму вы пачынаеце, падтрымліваючы гэты стары, састарэлы і менш здольны browsers.If стварыць сайт , які добра працуе для іх, вы ведаеце, што вы стварылі базавую лінію, якая павінна даставіць па меншай меры карысны вопыт для ўсіх наведвальнікаў.
Пры запуску з найменш здольнымі браўзэрамі першага, вы хочаце, каб пераканацца, што ўсе вашыя HTML павінны быць сапраўднымі і семантычны правільна. Гэта дапаможа гарантаваць, што гэта самы шырокі выбар карыстацкіх агентаў могуць праглядаць старонкі і адлюстроўваць яго дакладна.
Памятаеце , што візуальныя стылі дызайну і агульны макет старонкі дадаюцца з дапамогай знешніх табліц стыляў . Гэта сапраўды дзе прагрэсіўнае паляпшэнне адбываецца. Вы можаце выкарыстоўваць табліцу стыляў для стварэння дызайну сайта, які працуе для ўсіх наведвальнікаў. Вы можаце дадаць дадатковыя стылі для паляпшэння старонкі як агенты карыстальніка атрымаць функцыянальнасць. Кожны атрымлівае стылі базавых узроўняў, але і для любых навін браўзэраў, якія могуць падтрымліваць больш складаныя і больш сучасныя стылі, яны атрымліваюць некаторыя дадатковыя. Вы "прагрэсіўнае павышэнне» старонкі для браўзэраў, якія могуць падтрымліваць гэтыя стылі.
Ёсць некалькі спосабаў, якія вы можаце ўжыць прагрэсіўнае паляпшэнне. Па-першае, вы павінны ўлічваць, што браўзэр робіць, калі ён не разумее лінію CSS - ён ігнаруе гэта! Гэта на самай справе працуе ў вашу карысць. Калі стварыць базавы набор стыляў, якія ўсе браўзэры разумеюць, вы можаце дадаць дадатковыя стылі для новых браўзэраў. Калі яны падтрымліваюць стылі, яны будуць прымяняць іх. Калі няма, то яны будуць ігнараваць іх і выкарыстоўваць толькі тыя базавыя стылі. Просты прыклад прагрэсіўнага паляпшэння можна ўбачыць у гэтым CSS:
.main-кантэнту {
фон: # 999;
фон: RGBA (153153153, +0,75);
}
Гэты стыль спачатку ўсталёўвае фон для шараватага колеру. Другое правіла выкарыстоўвае каляровыя значэння RGBA, каб усталяваць ўзровень празрыстасці. Калі браўзэр падтрымлівае RGBA, ён будзе перакрываць першы стыль з другім. Калі гэтага не адбудзецца, толькі першы з іх будзе прымяняцца. Вы ўсталявалі базавы колер, а затым дадалі дадатковыя стылі для больш сучасных браўзэраў.
З дапамогай функцыі запытаў
Іншым спосабам вы можаце ўжыць прагрэсіўнае паляпшэнне заключаецца ў выкарыстанні так званых «мастацкіх запытаў». Яны падобныя на медыя - запыты , якія з'яўляюцца неад'емнай часткай рэагуюць канструкцый сайта . Хоць медиазапросы тэкст для пэўных памераў экрана, функцыя запыты будуць правяраць, калі нейкая функцыя падтрымліваецца ці не. Сінтаксіс вы б выкарыстоўваць гэта:
@supports (дысплей: Flex) {}Любыя стылі вы дадалі ўнутры гэтага правіла будуць працаваць толькі ў тым выпадку, калі браўзэр падтрымліваў «флекс», які стылі для Flexbox. Вы можаце ўсталяваць адзін набор правілаў для ўсіх, а затым выкарыстоўваць мастацкія запыты, каб дадаць дадатковыя толькі для некаторых браўзэраў.
Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 12/13/16.