Што такое на сёння тэставанне браўзара?
Original on stuffandnonsense.co.uk
Перад тым як адправіць наш дызайн файлаў да хлопцаў з CannyBill, мы праглядаем браўзары, якія праверылі ў новым дызайне і некаторыя разважанні пра тое, што тэставанне браўзараў насамрэч азначае ў сучасных ўмовах усё большую разнастайнасць браўзараў і прылад ландшафту.
Як я ўжо казаў, на некалькіх пасадах мой дызайн для CannyBill інтэнсіўна выкарыстоўвае HTML5 і завупашыраную версію CSS. Пашыраная версія CSS з’яўляецца CSS2.1, часткай спецыфікацыі CSS3, якія ўжо былі рэалізаваны ў прагрэсіўных рухавіках рэндэрынгу, а таксама вам прапануецца CSS3, браўзар органаў, якія быў прадстаўлены W3C. Гэта праца, такім чынам, не азначае, што мая канструкцыя з’яўляецца гнуткай і адаптоўвальнай да прыродных адрозненняў паміж браўзарамі. Падрабязней пра гэта мы пагаворым крыху пазней.
Хоць мы глядзелі на кожную старонку нашага набору браўзараў, каб захаваць гэту пасаду, але мы ўсе ж такі сцісла спынімся на двух самых складаных пунктах – хатнія старонкі і план старонак.
Выбар эталона браўзара
Я цвёрда веру, што для дасягнення лепшага дызайну, я магу і павінен выкарыстоўваць лепшы браўзар, які я толькі магу знайсці, без найменшага агульнага назоўніка і найболей шырока ўсталяваны. Ваша тэставанне браўзара можа быць розным, але маё выкарыстанне Safari 4 – гэта не проста таму, што ў мяне Mac, але таму, што яго рухавік Webkit – гэта сэрца шматлікіх дя настольных і мабільных браўзараў. Выкарыстанне Safari 4 (ці любога сучаснага браўзара на базе Webkit выглядае сапраўды гэтак жа, як я меркаваў, у камплекце з элементамі, якія я назваў межамі з радыусам CSS, якія генеруюцца градыентамі і ценамі RGBA.
Safari 4 Webkit
Галоўная старонка ў Safari 4 Flickr
Шматлікія іншыя старонкі на на новай хатняй старонцы CannyBill залежыць ад:
- RGBA, колер моўная панэлі і іншыя элементы
- Памежны радыус галоўнай навігацыі і заклік да дзеяння кнопкі спасылак
- CSS генеруюцца градыентамі для асноўнай навігацыі і заклікаў да дзеяння спасылкі
- CSS генеруе акно цені, для вызначаныя дзяржавы навядзіце
планы і кошты старонцы пашыраных CSS пераўтварэнняў (шкалы) і пераходаў.
Планы старонкі ў Safari 4 Flickr
Хоць, акрамя Webkit, толькі Firefox 3.6 ажыццяўляе вялікую частку гэтай CSS, у большасці выпадкаў яна можа жыць і з гэтым, таму што, як мы ведаем, вэб-сайты не абавязкова павінны быць дасведчанымі гэтак жа ў любым браўзары.
Firefox 3,5
Наступны ў маім парадку тэставання ідзе Firefox 3,5, які ажыццяўляе RGBA памежнага радыусу.
Галоўная старонка ў Firefox 3,5 Flickr
Планы старонкі ў Firefox 3,5 Flickr
Хоць гэты браўзар бракуе здольнасці адлюстроўваць некаторыя CSS Webkit, але людзі, якія выкарыстоўваюць яго, не будуць мець свайго досведу, што аказвае адмоўнае ўздзеянне, але няма абсалютна ніякіх падстаў не ўключаць гэтыя функцыі вылучна на аснове адсутнасці меншага браўзара.
Camino 2
Camino 2 (бэта) таксама мае прымальны вынік з яго рухавіком Gecko.
Планы старонкі ў Camino 2 (бэта) Flickr
Опера 10
Опера 10 м прадстаўляе велізарнае паляпшэнне ў параўнанні з папярэднімі версіямі, але яго распрацоўнікі настолькі кансерватыўныя ў стаўленні да рэалізацыі CSS, што ен не паказаны ці амаль не паказаны на W3C. Вось чаму, хоць опера 10 мае фантастычны новы карыстацкі інтэрфейс і некаторыя цікавыя функцыі, я не лічу, што гэта штосьці па-сапраўднаму прагрэсіўнае, як Firefox і Webkit-браўзары.
Галоўная старонка ў Opera 10 Flickr
Планы старонкі ў Оперы 10 Flickr
Адсутныя элементы CSS дызайну ўключаюць цвёрдыя характарыстыкі, такія як межы радыусу, скрынку-цяні і CSS слупкі. Я ўпэўнены, што гэта з’явіцца ў наступнай версіі оперы, я жадаў бы, каб распрацоўнікі і дызайнеры атрымалі каманду ад Опера, якая б заахвоціла іх адстойваць свае ўласныя межы CSS.
Firefox 3,6
Браўзар пейзажу стаў больш разнастайным, і я б адважыўся сказаць цікавейшым, чым гэта было шмат гадоў таму. Як карыстач Safari, мне вельмі падабаецца навіны Webkit, але Mozilla таксама вядомая сваім наватарствам. У наступнай версіі Firefox неабходна прынесці гэты браўзар блізка да магчымасцяў Webkit.
Планы старонкі ў Firefox 3,6 Flickr
IE8
У наш час некаторыя з вас, магчыма, будуць зацікаўлены інфармацыяй пра Internet Explorer? Мы вызначаем у нашых кантрактах,што займаемся правяркай апошніх версій любога браўзара, а для Internet Explorer гэта азначае адсутнасць IE8. Хоць IE8 вырашыў шматлікія пытанні сваіх папярэдніх увасабленняў і з’яўляецца выдатным браўзарам, ён усе ж такі бракуе рэалізацыі RGBA, межы радыусу, цені і, вядома, CSS градыенты, якія генеруюцца толькі ў Webkit і Firefox 3.6.
Галоўная старонка ў Internet Explorer 8 на XP (VMWare) Flickr
Планы старонку ў Internet Explorer 8 на XP (VMWare) Flickr
У большасці выпадкаў браўзар, у якім адсутнічаюць гэтыя функцыі, не замінае працэсу дызайну і досведу чалавека ад яго выкарыстання. У выпадках жа з IE8, я выкарыстоўваю Modernizr, каб ен дапамог мне ўжыць альтэрнатыўныя стылі, заснаваныя не на самім браўзары, а на магчымасці гэтага браўзара.
.rgba { /* styles */ }
.no-rgba { /* styles */ }Вам трэба ведаць таксама, што адсутнасць градыентаў CSS у Firefox 3.5, Camino 2, Опера 10 і IE8 будзе перашкаджаць сведчанню прапановы дызайну. А Webkit і Firefox 3,6 могуць ужыць CSS градыенты.
.cssgradients .testimonial {
background-color : rgb(247,249,251);
background-repeat : no-repeat;
background-image : -webkit-gradient(
linear, left top, left bottom,
from(rgb(255,255,255)),
to(rgb(247,249,251)));
background-image : -moz-linear-gradient(
left top, left bottom,
from(rgb(255,255,255)),
to(rgb(247,249,251))); } Для іншых браўзараў я проста спрасціў дызайн, дадаўшы суцэльны белы фон з кветакамі. Я таксама выкарыстоўваў Modernizr, каб змяніць становішча некаторых элементаў у самім сведчанні.
.no-cssgradients .testimonial {
background-color : rgb(255,255,255);
border : 1px solid rgb(223,231,239); }
.no-cssgradients .testimonial p.more {
bottom : 20px; } Людзі, якія выкарыстоўваюць Internet Explorer 6, убачаць старонку з ужываннем дадзенага стылю Ўсеагульнай IE6 . Гэта прагматычны выбар, але адзінае, што вызваляе каштоўны час і рэсурсы, выдаткаваныя на дызайн, а не на дарагія хакі для зламанага браўзара, які будзе змяншаць прыбытковасць.
Што такое браўзар тэставання сёння?
Толькі некалькі гадоў назад тэставанне браўзара азначала, што я буду марнаваць гадзіны свайго часу (і шмат грошай маіх кліентаў) для простай праверкі замаху крос-браузера, пікселяў дасканаласці. Зараз гэта не толькі не практычна ці даступна, але зараз гэта проста не ўяўляецца магчымым. Гэта значыць, што я змагу паменшыць маю калекцыю да найменшага агульнага назоўніка ці выкарыстоўваць дарагія абыходныя шляхі.
Чаму б не зрабіць гэта? Шматлікія людзі дагэтуль лічаць, што гэта неад’емная частка вэб-дызайна ці забудоўшчыка працы.
Я не згодзен.
Ландшафт і прамысловасць змяняюцца вельмі хутка. Калі вы лічыце, што праца ідзе гэтак жа, як пяць гадоў назад, паглядзець на тое, што я ўсё яшчэ змагаюся з потам.
Галоўная старонка ў Internet Explorer 5 Mac Flickr
Гэта не вэб-дызайнерская праца / праца распрацоўніка выпраўляць ці палепшаць браўзар. Гэта праца для распрацоўніка браўзара, яна з’яўляецца простай і зразумелай. Гэта не толькі непрактычная і неэканамічная спроба зрабіць выгляд сайта візуальна ідэнтычным ва ўсіх браўзарах, але яна прроста перашкаджае твараў браўзараў паляпшаць ці ажыццяўляць новыя CSS.
Усё гэта падводзіць мяне да таго, што ж менавіта азначае тэставання браўзараў ў 2009/10 навучальным годзе. Для мяне гэта проста забеспячэнне таго, каб маё ўтрыманне і функцыянальнасць былі даступнымі (з дапамогай значнай разметкі, CSS асноў і ненадакучлівых сцэнараў), а дызайн не будзе выглядаць зламаным пры праглядзе праз больш старыя і меней здольныя браўзары. Такі падыход вызваляе нас ад мноства прблем. Гэта таксама стымулюе развіцце дызайну.
Вы, магчыма, думаеце, што мне вельмі пашанцавала, што ў мяне есць кліенты, якія дазваляюць мне працаваць такім чынам, як я жадаю. Але гэта не пытанне поспеху. Замест гэтага яно выразна тлумачыць праблемы з людзьмі пры падаванні ім магчымасцей. Калі мой досвед чагосьці варты, людзі гатовыя прыняць гэтыя прыродныя адрозненні паміж браўзарамі, а для вас будзе вельмі карысным рабіць дызайн так, як я вам сказаў, каб найлепш выкарыстоўваць свой час і свае інвестыцыі.
