Откријте све прегледаче корисника

У свету веба важно је знати радити са различитим условима када су у питању веб апликације, а често се ти услови одређују употребом одређеног прегледача.

Коришћење једног или другог начина може условити одређене функционалности у нашој апликацији, па нам његово исправно откривање може уштедети непријатности и лоше корисничко искуство у нашој апликацији.

Хајде да видимо како помоћу ове апликације можемо открити прегледач корисника.

ХТМЛ код

Наш ХТМЛ Неће укључивати већу сложеност, имаће основну структуру и ту ћемо укључити нашу ЦСС у заглавља и за оптимизацију оптерећења ћемо укључити јКуери са вашег ЦДН -а и ЈаваСцрипт на крају нашег тела.

 Откријте све прегледаче

Направићемо контејнер за укључивање икона прегледача и унутар ових неколико див са различитим класама ради боље примене функционалности.

Табела стилова

Са нашим ЦСС Имаћемо више посла, тамо ћемо дати стилове у наш контејнер, применићемо стилове на наше слике како бисмо омогућили функцију укључивања и искључивања према прегледачу у којем се извршава наш код. Поред овога, укључићемо и слике са спољних веза ради оптимизације ресурса нашег кода.

 *, *: пре, *: после, *: фокус, *: активно, *: фокус: активно {бок-сизинг: бордер-бок; обрис: нема; } хтмл {фонт-сизе: 10пк; } .контејнер {лево: 50вв; положај: апсолутан; врх: 50вх; -вебкит-трансформ: транслатеКс (-50%) транслатеИ (-50%); -мс-трансформ: транслатеКс (-50%) транслатеИ (-50%); трансформирати: транслатеКс (-50%) транслатеИ (-50%); } .цонтаинер .ицон {дисплаи: инлине-блоцк; -вебкит-филтер: у сивим тоновима (100%); филтер: у сивим тоновима (100%); висина: 8рем; положај: релативан; -вебкит-транзиција: све .3с олакшање; прелаз: све .3с олакшање; ширина: 8рем; } .цонтаинер .ицон: афтер {бордер-радиус: 50%; дно: 2рем; бок-схадов: 0 3.3рем 1рем 0 ргба (34, 34, 34, 0.4); садржај: ""; висина: .5рем; лево: 20%; положај: апсолутан; ширина: 60%; } .цонтаинер .ицон.ацтиве {-вебкит-аниматион-наме: ховер; име анимације: ховер; -вебкит-филтер: у сивим тоновима (0%); филтер: у сивим тоновима (0%); } .цонтаинер .ицон.ацтиве: афтер {-вебкит-аниматион-наме: ховерСхадов; име анимације: ховерСхадов; } .цонтаинер .ицон.ацтиве, .цонтаинер .ицон.ацтиве: афтер {-вебкит-аниматион-дуратион: .8с; анимација-трајање: .8с; -вебкит-аниматион-тиминг-фунцтион: еаси-оут; анимација-тајминг-функција: олакшање-оут; -вебкит-аниматион-итератион-цоунт: бесконачно; анимација-итерација-број: бесконачно; -вебкит-аниматион-дирецтион: алтернате; смер анимације: наизменично; } .цонтаинер .ицон.цхроме {бацкгроунд-имаге: урл ("хттпс://цдн0.ицонфиндер.цом/дата/ицонс/флат-роунд-систем/512/цхроме-128.пнг"); бацкгроунд-репеат: но-репеат; величина позадине: 8рем 8рем; } .цонтаинер .ицон.сафари {бацкгроунд-имаге: урл ("хттпс://цдн0.ицонфиндер.цом/дата/ицонс/флат-роунд-систем/512/сафари-128.пнг"); бацкгроунд-репеат: но-репеат; величина позадине: 8рем 8рем; } .цонтаинер .ицон.фирефок {бацкгроунд-имаге: урл ("хттпс://цдн0.ицонфиндер.цом/дата/ицонс/флат-роунд-систем/512/фирефок-128.пнг"); бацкгроунд-репеат: но-репеат; величина позадине: 8рем 8рем; } .цонтаинер .ицон.мсие {бацкгроунд-имаге: урл ("хттпс://цдн0.ицонфиндер.цом/дата/ицонс/флат-роунд-систем/512/интернет_екплорер-128.пнг"); бацкгроунд-репеат: но-репеат; величина позадине: 8рем 8рем; } @ -вебкит -кеифрамес лебди {од {топ: 0; -вебкит-трансформ: сцалеКс (1) сцалеИ (1); трансформисати: сцалеКс (1) сцалеИ (1); } на {врх: -1,6рем; -вебкит-трансформација: сцалеКс (0.9) сцалеИ (1.05); трансформација: сцалеКс (0,9) сцалеИ (1,05); }} @кеифрамес ховер {фром {топ: 0; -вебкит-трансформ: сцалеКс (1) сцалеИ (1); трансформисати: сцалеКс (1) сцалеИ (1); } на {врх: -1,6рем; -вебкит-трансформација: сцалеКс (0.9) сцалеИ (1.05); трансформација: сцалеКс (0,9) сцалеИ (1,05); }} @ -вебкит -кеифрамес ховерСхадов {фром {боттом: 2рем; бок-схадов: 0 3.3рем 1рем 0 ргба (34, 34, 34, 0.4); лево: 20%; ширина: 60%; } на {дно: .6рем; бок-схадов: 0 3.2рем 1рем 0 ргба (34, 34, 34, 0.2); лево: 25%; ширина: 50%; }} @кеифрамес ховерСхадов {фром {боттом: 2рем; бок-схадов: 0 3.3рем 1рем 0 ргба (34, 34, 34, 0.4); лево: 20%; ширина: 60%; } на {дно: .6рем; бок-схадов: 0 3.2рем 1рем 0 ргба (34, 34, 34, 0.2); лево: 25%; ширина: 50%; }}

Поред тога, користимо својство ЦСС3 да анимирамо иконе ако је то одговарајући претраживач за ово ћемо користити -вебкит-анимација-трајање И @кеифрамес да применимо неке функционалности на иконе и за њих успостављамо унапред одређена мерења.

Јавасцрипт код

Последњи у нашем коду ЈаваСцрипт имаћемо функционалност која ће нам омогућити да откријемо тип прегледача, са којим ћемо користити кориснички агент Да бисмо то урадили, укључићемо два услова, један за конвенционалне прегледаче и као Виндовс 10 већ прави прилично буке, укључићемо услов за откривање Мицрософт Едге.

 $ (доцумент) .реади (фунцтион () {вар уа = навигатор.усерАгент.матцх ( / (опера | цхроме | сафари | фирефок) \ /? \ с * (\.? \ д + (\. \ д +) *)/ и), прегледач; иф (навигатор.усерАгент.матцх (/ Едге/ и) || навигатор.усерАгент.матцх (/Тридент.*рв [:] *11 \ ./ и)) {бровсер = "мсие ";} елсе {бровсер = уа [1] .тоЛоверЦасе ();} $ ('див.ицон.' + претраживач) .аддЦласс (" активно ");});

За крај користимо неке од јКуери да примењују класу имовине према услову са којим се баца аддЦласс () и тиме бисмо нашу апликацију завршили и можемо видети како изгледа када је отворимо Фирефок.

Већ имамо начин да откријемо прегледач који корисник користи и све то из једне апликације, дајући нам могућност да знамо одакле улазе и које радње можемо предузети према овој радњи.

Испробајте, заиста ми се свиђа приступ који се користи, због његове чистоће и брзог графичког квалитета.

Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен