10 Корисни повратни методи за ЦСС и Јавасцрипт
Повратни кодови су савршено решење за компромисе са вашим бројним јединственим посетиоцима. Нису сви на интернету користили исти оперативни систем, веб прегледник или чак физички хардвер. Сви ови фактори утичу на то како ће се ваша веб страница заправо приказивати на екрану. Када радите са новим ЦСС или ЈаваСцрипт триковима често ћете наићи на такве техничке грешке.
Али не дозволите да те замке обесхрабре! У овом водичу сам саставио неке од њих најчешће технике замене за веб дизајнере фокусирајући се на ЦСС и ЈаваСцрипт / јКуери. Када све друго не успе, корисницима желите да обезбедите бар основну функционалност странице. Једноставност влада у области дизајна корисничког искуства.
Погледајте наш водич испод и јавите нам своје мисли и питања у одељку за коментаре.
1. Заобљени углови са сликама
ЦСС3 технике су скочиле у маинстреам веб дизајн. Једна од најзначајнијих особина је бордер-радиус што омогућава заокруживање углова на летећем делу. Они изгледају лепо на практично било ком дугмету, див или текстуалном пољу. Једини проблем је ограничена подршка између веб претраживача.
Многи старији претраживачи, укључујући Интернет Екплорер 7, не подржавају ову особину. Да бисте задржали заобљене углове који раде за све стандардне претраживаче, потребно је да направите резервне слике.
Стандардни код користи регуларна ЦСС3 својства на главном див-у, истовремено прилагођавајући слике на сваком од углова. Вероватно ћете морати да подесите неке додатне дивове унутар главног контејнера који ће се користити за приказ углова слике у позадини.
#маинбок -вебкит-бордер-радиус: 5пк; / * Сафари * / -моз-бордер-радиус: 5пк; / * Фирефок Гецко Енгине * / -о-бордер-радиус: 5пк; / * Опера * / бордер-радиус: 5пк; #маинбок .топц бацкгроунд: урл ('цорнер-тл.пнг') но-репеат топ лево; #маинбок .топц спан бацкгроунд: урл ('цорнер-тр.пнг') но-репеат горњи десни; #маинбок .бтмц бацкгроунд: урл ('цорнер-бл.пнг') но-репеат доле лево; #маинбок .бтмц спан бацкгроунд: урл ('цорнер-бр.пнг'), не понављам доле десно; Да бисте се спасили од стреса, предлажем вам да користите апликацију као што је РоундедЦорнр. То је веб-апликација у претраживачу која генерише заобљени кут ЦСС-а користећи и ЦСС3 и слике. Ово ће бити посебно корисно за дизајнере који немају приступ графичком софтверу као што је Пхотосхоп или ГИМП.
2. јКуери Систем падајућег менија
Системи падајућег менија су савршени за данашњи Веб. Међутим, највећи проблем су посетиоци који приступају вашој веб-локацији без омогућеног ЈаваСцрипт-а. У овом случају ниједан од ваших менија уопште не би радио! Најбоље решење је коришћење ЦСС-а за приказ / сакривање сваког од под-менија див блокова и њихово приказивање на лебдењу.
Једини проблем са овим решењем је што Интернет Екплорер 6 не подржава ове ЦСС ховер селекторе. Међутим, ИЕ7 + одлично ради; и наравно, сви претраживачи ће радити добро ако је ЈаваСцрипт омогућен. Код из овог водича о ЦСС Плус је један од најбољих ресурса које сам пронашао. Он пружа не само решење са јКуери, већ и ЦСС неопходан за ИЕ проблеме.
/ * Класа струје ће бити додата преко јКуери * / #нав ли.цуррент> а бацкгроунд: # ф7ф7ф7; / * ЦСС фаллбацк * / #нав ли: ховер> ул.цхилд дисплаи: блоцк; #нав ли: ховер> ул.грандцхилд дисплаи: блоцк;
Извор
Још једно алтернативно рјешење које можете испробати је отворено приказивање сваког изборника у ИЕ6. Можете користити условне коментаре у програму Интернет Екплорер да бисте применили стилске стилове на основу верзије претраживача. Наравно, ово неће бити најлепше решење, али ће једноставно функционисати.
Ако не сматрате да је Интернет Екплорер 6 много бриге, онда се немојте ни замарати са овом алтернативном резервом. Водич и накнадни код изнад би требали бити довољни за учитавање вашег ЈаваСцрипт изборника чак и са строгим ЦСС-ом у свим главним прегледницима.
3. Циљани стилови програма Интернет Екплорер
Сигуран сам да сви знамо о проблемима рендерирања који долазе из Мицрософт Интернет Екплорера. Могу да дам мало заслуга за њихов најновији ИЕ8 и будуће изгледе са ИЕ9. Ипак, и даље постоји мала публика која покреће ИЕ6 / ИЕ7 и заиста их не можете игнорисати.
(Извор слике: гитхуб)
Условни коментари као што је поменуто у последњем одељку могу бити корисни за поновно форматирање области на страници. На пример, ако имате падајући мени са под-навигацијом у ИЕ6 који ће се приказивати само помоћу ЈаваСцрипт-а, нећете имати среће да покушате да користите ЦСС као резервни метод. Уместо тога, најбоље решење је да се свака подлистка прикаже као навигациони блок.
Додавањем горе наведеног кода у заглавље документа можете одредити врсту приказа за сваку под-навигацију. Најбољи дио овог резервног дијела је да можете замијенити ЦСС и још увијек динамички приказивати / скривати изборнике када је ЈаваСцрипт омогућен. Иначе ћете само приказати отворену листу веза. Можете користити сличан код као што сам додао испод.
#нав ли поситион: релативе; видтх: 150пк; / * мора да постави коначну ширину за ИЕ * / #нав ли ул / * суб-нав кодове * / дисплаи: блоцк; позиција: апсолутна; видтх: ауто; / * дефинишите сопствену ширину или подесите у елементу ли * / #нав ли ул ли ширина: 100%;
4. Легаци ИЕ Опацити / Транспаренци
Једна од многих досадних грешака у програму Интернет Екплорер је посао са непрозирношћу. Поставке алфа-транспарентности у ЦСС3 могу бити измењене кроз својство непрозирности. Ипак, на путу корпорације Мицрософт само Интернет Екплорер 9 тренутно подржава ову функцију.
Најбоље рјешење за циљање ИЕ6 + је путем филтер, власничку поставку која је призната само од стране ИЕ. Погледајте следећи пример:
.мидив опацити: 0.55; / * ЦСС3 * / филтер: алпха (опацити = 55); / * ИЕ6 + * /
Све што треба да урадите је да укључите линију изнад било ког елемента који захтева транспарентност. Обратите пажњу на то да ће, слично својству ЦСС3, сви подређени елементи такође наследити ову промену непрозирности. Ако тражите новији метод који циља посебно ИЕ8, погледајте доњи код. Он се понаша на исти начин као што је наше својство филтера препознато само од стране Мицрософт ИЕ8 парсер.
-мс-филтер: "прогид: ДКСИмагеТрансформ.Мицрософт.Алпха (опацити = 55)"; / * ИЕ8 * /
5. Креирање ЦСС3 тастера са резервним сликама
Дугмад су фантастичан веб елемент за све врсте интерфејса. Могу се понашати као улазни елементи, навигацијске ставке или чак директне линковане странице. Са ЦСС3 је сада могуће форматирати дугмад са многим јединственим стиловима, као што су позадине, сенке кутија, заобљени углови, итд..
Међутим, не можете веровати да ће сви ваши посетиоци моћи да прикажу ове нове особине. Приликом израде резервног дизајна за дугмад (или чак сличне УИ елементе) постоје две различите опције. Први је да се укључи позадинска слика дизајнирана тачно онако како би ЦСС изгледао. Ово се лако може постићи у Пхотосхопу. Међутим, ако нисте стручњак за софтвер онда то може бити проблематично.
Алтернатива је да се повуче обична боја позадине и једноставнији ЦСС стилови. Користим неке од примера кода из ЦСС-Трицкса велики пост на ЦСС3 градијентима. Сви главни претраживачи, укључујући Сафари, Фирефок, Цхроме, па чак и Опера, подржавају ова својства. Подручје у којем ћете наићи на проблеме је подршка старијим претраживачима: старији Мозилла мотори, ИЕ6 / 7, можда чак и Мобиле Сафари.
.градиент-бг бацкгроунд-цолор: # 1а82ф7; / * користи солидну боју у најгорем * / бацкгроунд-имаге: урл ('хттпс://ассетс.хонгкиат.цом/уплоадс/цоде-фаллбацк-метходс/фаллбацк-градиент.пнг'); бацкгроунд-имаге: -вебкит-градиент (линеарно, 0% 0%, 0% 100%, од (# 2Ф2727), до (# 1а82ф7)); бацкгроунд-имаге: -вебкит-линеар-градиент (топ, # 2Ф2727, # 1а82ф7); бацкгроунд-имаге: -моз-линеар-градиент (топ, # 2Ф2727, # 1а82ф7); бацкгроунд-имаге: -мс-линеар-градиент (топ, # 2Ф2727, # 1а82ф7); бацкгроунд-имаге: -о-линеарни градијент (горе, # 2Ф2727, # 1а82ф7); Извор
Једини мали проблем са искључиво употребом слика као резервног метода је то што нећете имати промену активног стања када корисник кликне на дугме. Можете да направите две различите слике за ове регуларне и активне државе, мада би то захтевало додатни посао. Само због овог разлога можете да користите солидну позадинску боју уместо резервних слика. Испробајте неколико различитих решења да бисте видели која изгледа најбоље у вашем изгледу.
6. Провера мобилног садржаја
Још један велики тренд у 2012. години је популарност мобилног претраживања интернета. Паметни телефони су свуда и подаци преко 3Г / Ви-Фи-ја постају све приступачнији. Тако ће многи дизајнери тражити замјенски распоред за мобилне кориснике.
Неколико популарних мобилних веб претраживача ће приказивати странице сличне десктоп окружењу. Мобиле Сафари и Опера су најпознатији по томе, чак подржавајући многе уобичајене јКуери скрипте. Али ове странице нису увијек прилагођене мобилним уређајима и има простора за проширење на УКС.
Постоје два начина да откријете мобилне прегледнике и прикажете алтернативни изглед или стил. Први је кроз ЈаваСцрипт који одлично функционише као алат за фронтенд. Скрипта коју сам додао у наставку је врло једноставна и само провјерава кориснике иПхоне / иПод Тоуцх уређаја. Откриј Мобиле Бровсерс је фантастичан сајт који нуди детаљнију скрипту коју можете покренути.
// Редирецт иПхоне / иПод Тоуцх функција исиПхоне () ретурн ((навигатор.платформ.индекОф ("иПхоне")! = -1) || (навигатор.платформ.индекОф ("иПод")! = -1)); иф (исиПхоне ()) виндов.лоцатион = "м.иоурдомаин.цом"; Друга алтернатива је провјера кроз позадински језик као што је ПХП. Можете да проверите за променљиву познату као ХТТП_УСЕР_АГЕНТ. Десетине веб страница ће се појавити ако гоогле ове термине. Ипак, још увек препоручујем везу „Откриј мобилне претраживаче“ коју сам додао у претходном пасусу.
Сајт има бесплатне скрипте које се могу скинути за парсирање не само у ПХП-у, већ и на много других популарних позадинских језика. То су АСП.НЕТ, ЦолдФусион, Раилс, Перл, Питхон, па чак и серверски код као што су ИИС и Апацхе.
Слицебок Слидер витх Грацефул Фаллбацк
Моја омиљена ЦСС3 фреебие из 2011. вероватно мора бити Слицебок 3Д Имаге Слидер издат од Цодропс-а. Користи прелепе ЦСС анимације у претраживачима који их подржавају, тренутно у Гоогле Цхроме-у и најновије у Сафари-ју. Чудно је да чак и најновији Фирефок или ИЕ9 издање још увијек не могу користити ове пријелазе.
Најбољи дио ове шифре је у томе што ће још увијек бити резервна за пружање основних ефеката пријелаза између слика. Дозвољен је већи део анимације преко јКуери-а, али стандардна опција ЦСС-а је још увек веома поуздана с обзиром на то колико претраживача не може да подржи нејасне ЦСС3 анимације.
Алтернативно, Цодропс је недавно објавио још један панел са клизним сликама који користи још креативније ЦСС3 технике. Овај клизач слика је креиран помоћу позадинских слика у ЦСС-у, тако да се чак и без ефеката транзиције понаша врло глатко.
8. јКуери Сцрипт ЦДН Фаилсафе метод
ЈКуери библиотека је постала готово неопходна за развој ЈаваСцрипт-а на Вебу. Многи алтернативни добављачи ЦДН-а су креирали статичне УРЛ-ове у којима су смјештене све верзије јКуери-а. Гоогле, Мицрософт, па чак и јКуери сами су креирали ЦДН портал за програмере, међу неколико других мање познатих веб страница.
Можда постоје стотине хиљада програмера који се ослањају на ове провајдере. Шта би се десило ако би било који од линкова био сломљен из било ког разлога или када би се сервери искључили? Било би добро да хостујете локалну копију и имплементирате је само ако вам је потребна. Па овај велики повратни кодни исечак из ЦСС-Трицкс вам омогућава да то урадите управо то!
Извор
9. Уникуе ХТМЛ5 Цхецкбокес
ХТМЛ5 је отворио врата за неке нове свјеже стилове за израду веб-локација. Део овог побољшаног веб искуства је кроз форме и елементе уноса. Потврдни оквири су само један примјер који се може јако прилагодити вашим потребама.
Налетела сам на овај диван ЦСС / јКуери туториал објављен почетком пролећа 2011. Он нуди једноставан метод креирања Аппле-стилских прекидача за ваше потврдне оквире који се грациозно деградирају у старијим прегледачима. Код користи позадинске слике да замени стилове укључивања / искључивања између корисничких интеракција.
Елементи цхецкбок-а оригиналног уноса су подразумевано скривени и њихова вредност се одређује путем ЈаваСцрипт позива. То значи да можете динамички повући вредност у било којој тачки кроз јКуери, али ће такође бити прослеђени у форму када притиснете “прихвати” дугме.
Под претпоставком да је ЈаваСцрипт искључен или да није подржан у старијим прегледачима, скрипт ће подразумевано користити уобичајене ХТМЛ улазе. Ово ће такође онемогућити ЦСС за нове стилове оквира за потврду тако да ће се појавити као да се ништа није променило. Сценарио се понаша више као естетски фронт-руннер са чистом резервом него било шта друго. Међутим, ови клизачи изгледају фантастично, а исте технике се могу примијенити и на друга поља за унос облика, као што су изборници и радио гумби.
10. Подржани видео записи ХТМЛ5
Нове ХТМЛ5 спецификације су веома напредне у многим областима. И видео и аудио елементи имају побољшану подршку за велики број медијских датотека. Међутим, испоставило се да се између ХТМЛ5 подржаних претраживача не слажу сви о типовима датотека.
Мозилла Фирефок генерално подржава .ГГГ видео који можете користити као конвертер ВЛЦ. Гоогле Цхроме и Сафари траже .М4 или Х.264 кодиране .МОВ датотеке. Због ових разлика би иначе морали да укључите три различитих видео формата - два горе наведена заједно са функцијом.
Срећом, неки заиста паметни момци су саставили библиотеку под називом ВидеоЈС. То је изузетно мала ЈаваСцрипт конструкција која омогућава једну имплементацију Фласх и ХТМЛ5 видеа у једној ознаци. Бесплатно је за преузимање и отворени извор, тако да су и програмери добродошли. И Фласх и ХТМЛ5 видео плејери су прилагођени да буду идентични тако да ће сви корисници имати исто искуство. Погледајте пример ХТМЛ-а за уградњу видео записа:
Извор
Пролазећи сличном рутом, пројекат хтмл5медиа нуди метод за консолидацију свих медија у једном формату. Нажалост, чак ни ВидеоЈС није савршен за сваки претраживач. Оно што је хтмл5медиа пројекат покушао да уради је да заобиђе некомпатибилност претраживача да би подржао било који видео фајл међу свим платформама. И заправо ради прилично добро!
Закључак
Надам се да ће овај водич корисних резервних метода бити користан за веб програмере широм свијета. Може бити тешко изградити веб странице да се прилагоде широком распону спецификација софтвера. Ово је посебно тачно када радите са много различитих језика као што су ЦСС и ЈаваСцрипт.
Али трендови указују на то да се приближавамо ери подршке у веб дизајну. Никада раније није било договорено више прегледача и веб стандарда, посебно у оквиру ЦСС3 и ХТМЛ5. Ове технике су само неке од многих које треба узети у обзир приликом израде веб страница које су у складу са стандардима. Као веб девелопер, стално ћете желети да пратите најновије трендове у дизајну и прилагођавате се како бисте најбоље одговарали вашој публици.
