10 полезни резервни методи за CSS и Javascript
Кодовите грешки са идеалното решение за компромис с много уникални посетители. Не всички в мрежата използват една и съща операционна система, уеб браузър или дори физически хардуер. Всички тези фактори влияят на това как уеб страницата ви действително ще се визуализира на екрана. Когато работите с нови CSS или JavaScript трикове, често ще срещнете такива технически грешки.
Но не позволявайте тези клопки да ви обезкуражат! В това ръководство съм събрал някои от най-често използваните аварийни техники за уеб дизайнери с фокус върху CSS и JavaScript / jQuery. Когато всичко останало се провали, искате да предоставите на потребителите най-малко основната функционалност на страницата. Простотата царува върховно в областта на дизайна на потребителския опит.
Разгледайте нашето ръководство по-долу и ни уведомете вашите мисли и въпроси в раздела за коментари.
1. Заоблени ъгли с изображения
Технологиите на CSS3 скочиха в основния уеб дизайн. Едно от най-забележителните свойства е граничен радиус което дава възможност за заоблени ъгли на полета. Те изглеждат красиво на практически всеки бутон, div или текстово поле. Единственият проблем е ограничената подкрепа между уеб браузърите.
Много по-стари браузъри, включително Internet Explorer 7, не поддържат това свойство. Така че, за да запазите заоблени ъгли, работещи за всички стандартни браузъри, трябва да създадете резервно копие с изображения.
Стандартният код използва редовни CSS3 свойства на главния div, като по този начин приспособява изображенията на всеки от ъглите. Вероятно ще трябва да настроите някои допълнителни divs в основния контейнер, които се използват за показване на изображения в ъгъла във фонов режим.
#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox Двигател * / -о-граничен радиус: 5px; / * Opera * / радиус на рамката: 5px; #mainbox .topc background: url ('corner-tl.png') не се повтаря горе вляво; #mainbox .topc span фон: url ('corner-tr.png') не се повтаря горе вдясно; #mainbox .btmc background: url ('corner-bl.png') не се повтаря долу вляво; #mainbox .btmc span фон: url ('corner-br.png'), не се повтаря долу вдясно; За да се спасите от стреса, аз силно препоръчвам да използвате приложение като RoundedCornr. Това е уеб-приложение в браузъра, което генерира закръглени CSS ъгли, използвайки CSS3 и изображения. Това ще бъде особено полезно за дизайнери, които нямат достъп до графичен софтуер като Photoshop или GIMP.
2. Система за падащо меню jQuery
Падащите системи от менюта са идеални за днешната мрежа. Най-големият проблем обаче е достъпът на посетителите до уебсайта Ви, без да е активиран JavaScript В този случай нито едно от вашите менюта няма да работи! Най-доброто решение е използването на CSS за показване / скриване на всеки от под-менюто div блокове и показването им на мишката.
Единственият проблем с това решение е, че Internet Explorer 6 не поддържа тези CSS селектори. Въпреки това IE7 + работи чудесно; и разбира се всички браузъри ще работят добре, ако на първо място е активиран JavaScript. Кодът от този урок за CSS Plus е един от най-добрите ресурси, които открих. Той предоставя не само решение с jQuery, но и CSS, необходим за IE проблеми.
/ * Клас на ток ще бъде добавен чрез jQuery * / #nav li.current> a background: # f7f7f7; / * CSS резервно копие * / #nav li: hover> ul.child display: block; #nav li: hover> ul.grandchild display: block;
източник
Друго алтернативно решение, което можете да опитате, е просто да показвате всяко от менютата в IE6. Можете да използвате условните коментари на Internet Explorer, за да приложите таблици за стилове на базата на версията на браузъра. Разбира се, това няма да бъде най-хубавото решение, но просто ще работи.
Ако не смятате, че Internet Explorer 6 е много притеснително, не се притеснявайте дори с тази алтернативна алтернатива. Урокът и последвалият код по-горе трябва да са достатъчни, за да се зарежда менюто на JavaScript, дори със строг CSS във всички основни браузъри.
3. Насочени стилове на Internet Explorer
Сигурен съм, че всички знаем за проблемите при рендеринга, излизащи от Internet Explorer на Microsoft. Мога да дам малко заслуга за тяхната последна IE8 и бъдещите перспективи с IE9. Въпреки това все още има малка аудитория, която работи с IE6 / IE7 и все още не можете да ги игнорирате.
(Източник на изображението: github)
Условните коментари, споменати в последния раздел, могат да бъдат полезни за преформатиране на областите на страницата. Например, ако имате падащо меню с под-навигация в IE6, което ще показва само използването на JavaScript, няма да имате късмет да изпробвате CSS като резервен метод. Вместо това най-доброто решение е да се покаже всеки под-списък като навигационен блок.
Добавяйки горния код към заглавието на документа, можете да зададете вида на дисплея за всяка под-навигация. Най-добрата част за това е, че можете да презапишете CSS и да покажете динамично менютата, когато JavaScript е активиран. В противен случай просто ще покажете отворен списък с връзки. Можете да използвате подобен код като това, което съм добавил по-долу.
#nav li position: relative; ширина: 150px; / * трябва да зададе крайна ширина за IE * / #nav li ul / * поднавигационни кодове * / дисплей: блок; позиция: абсолютна; ширина: автоматично; / * дефинирате вашата собствена ширина или задайте в ли елемента * / #nav li ul li ширина: 100%;
4. Остатъчна непрозрачност / прозрачност на IE
Един от многото досадни грешки с Internet Explorer е сделката с непрозрачност. Настройките за алфа-прозрачност в CSS3 могат да бъдат променяни чрез свойството за непрозрачност. Но в начина на Microsoft само Internet Explorer 9 в момента поддържа тази функция.
Най-доброто решение за насочване към IE6 + е чрез филтър, собствена настройка, призната само от IE. Вижте краткия пример за код по-долу:
.mydiv непрозрачност: 0.55; / * CSS3 * / филтър: алфа (непрозрачност = 55); / * IE6 + * /
Всичко, което трябва да направите, е да включите горния ред във всеки елемент, изискващ прозрачност. Забележете, че подобно на CSS3 собствеността, всички дъщерни елементи също ще наследят тази непрозрачност. Ако търсите по-нов метод, който е насочен конкретно към IE8, проверете кода по-долу. Той се държи по същия начин, както нашето свойство на филтъра се разпознава само от анализатора на Microsoft IE8.
-ms-филтър: "progid: DXImageTransform.Microsoft.Alpha (непрозрачност = 55)"; / * IE8 * /
5. Създаване на CSS3 бутони с резервни изображения
Бутоните са фантастичен уеб елемент за всички видове интерфейси. Те могат да се държат като входящи форми, навигационни елементи или дори директни връзки към страници. С CSS3 вече е възможно да форматирате бутони с много уникални стилове, като например градиенти на фона, сенки за кутии, заоблени ъгли и т.н..
Въпреки това не можете да вярвате, че всичките ви посетители ще могат да визуализират тези по-нови свойства. Когато създавате резервен дизайн за бутони (или дори подобни елементи на потребителския интерфейс), има два различни варианта. Първият е да се включи фоново изображение, проектирано точно както CSS ще изглежда. Това може лесно да се осъществи във Photoshop. Въпреки това, ако не сте експерт в софтуера, то това може да бъде неприятно.
Алтернативата е да се върнете към обикновен фонов цвят и по-прости CSS стилове. Аз използвам някои от примерите на кода от CSS-Tricks голям пост на CSS3 градиенти. Всички основни браузъри, включително Safari, Firefox, Chrome и дори Opera, поддържат тези свойства. Областта, в която ще се сблъскате с проблеми, е в подкрепа на старите браузъри: по-старите двигатели на Mozilla, IE6 / 7, вероятно дори Mobile Safari.
.gradient-bg фон-цвят: # 1a82f7; / * използва най-лошия цвят * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); background-image: -webkit-градиент (линеен, 0% 0%, 0% 100%, от (# 2F2727), до (# 1a82f7)); background-image: -webkit-линеен градиент (отгоре, # 2F2727, # 1a82f7); background-image: -moz-линеен градиент (отгоре, # 2F2727, # 1a82f7); background-image: -ms-линеен градиент (отгоре, # 2F2727, # 1a82f7); background-image: -о-линеен градиент (отгоре, # 2F2727, # 1a82f7); източник
Единственият малък проблем с използването само на изображения като резервен метод е, че няма да имате активна промяна на състоянието, когато потребителят кликне върху един бутон. Можете да създадете две различни изображения за тези редовни и активни състояния, въпреки че ще са необходими допълнителни усилия. Само тази причина може да ви накара да използвате солиден фонов цвят вместо резервни изображения. Опитайте няколко различни решения, за да видите кой изглежда най-добре в оформлението ви.
6. Проверка за мобилно съдържание
Друга огромна тенденция през 2012 г. е популярността на мобилния интернет браузър. Смартфоните са навсякъде, а данните през 3G / Wi-Fi стават все по-достъпни. Така много дизайнери ще се стремят да предоставят резервно оформление за мобилните потребители.
Няколко популярни мобилни уеб браузъра ще визуализират страници, подобни на десктоп среда. Mobile Safari и Opera са най-известни с това, дори поддържат много общи jQuery скриптове. Но тези страници не винаги са лесни за мобилност и има място за разширяване на UX.
Има два начина за откриване на мобилни браузъри и показване на алтернативно оформление или стилова таблица. Първият е чрез JavaScript, който работи отлично като инструмент на интерфейса. Скриптът, който добавих по-долу, е много прост и само проверява за потребители на iPhone / iPod Touch. Откриване на мобилни браузъри е фантастичен уебсайт, който предлага по-подробен скрипт, който можете да изпълните.
// Пренасочваме iPhone / iPod Touch функцията isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1)); if (isiPhone ()) window.location = "m.yourdomain.com"; Сега другата алтернатива е проверка чрез бекенд език като PHP. Можете да проверите за променлива, известна като HTTP_USER_AGENT. Десетки уебсайтове ще се появят, ако използвате Google тези термини. Въпреки това все още препоръчвам връзката „Открий мобилните браузъри“, която добавих в предишния параграф.
Сайтът разполага с безплатни скриптове, които могат да се свалят за разбор не само в PHP, но и в други популярни езици. Те включват ASP.NET, ColdFusion, Rails, Perl, Python и дори базиран на сървъра код като IIS и Apache.
7. Slicebox Slider с грациозен резервен
Моят любим CSS3 freebie от 2011 вероятно трябва да бъде Slicebox 3D Image Slider, издаден от Codrops. Той използва красиви CSS анимационни преходи в браузъри, които ги поддържат, в момента в Google Chrome и най-новото в Safari. Странно е, че дори най-новата версия на Firefox или IE9 все още не могат да използват тези преходи.
Най-добрата част за този код е, че той все още ще се върне обратно, за да осигури основни ефекти на прехода между изображенията. Предоставената голяма част от анимацията се извършва чрез jQuery, но стандартната опция за запазване на CSS все още е много надеждна, като се има предвид колко браузъри не могат да поддържат анимации в CSS3..
Освен това Codrops също наскоро пусна още един панел за плъзгащи се изображения, който използва още по-творчески CSS3 техники. Този слайдър е създаден с фонови изображения в CSS, така че дори и без ефектите на прехода се държи много гладко.
8. jQuery Script CDN Failsafe метод
Библиотеката jQuery е почти необходима за разработването на JavaScript в мрежата. Много алтернативни доставчици на CDN създадоха статични URL адреси, където са хоствали всички версии на jQuery. Google, Microsoft и дори jQuery сами са създали CDN портал за разработчици, сред няколко други по-малко известни уебсайтове.
Вероятно стотици хиляди разработчици разчитат на тези доставчици. Какво ще се случи, ако някоя от връзките е била прекъсната по някаква причина или сървърите са били изключени? Би било добра идея да хоствате локално копие и да го прилагате само ако ви е необходимо. Ами този голям резервен кодов фрагмент от CSS-Tricks ви позволява да направите точно това!
източник
9. Уникални HTML5 квадратчета
HTML5 отвори вратата за някои свежи страхотни стилове за създаване на уебсайтове. Част от това усъвършенствано уеб изживяване е чрез форми и входни елементи. Флажовете с отметки са само един пример, който може да бъде персонализиран според нуждите ви.
Аз се сблъсках с този чудесен CSS / jQuery урок, публикуван още в началото на пролетта на 2011 година. Той предлага прост метод за създаване на превключватели в стила на Apple за вашите отметки, които грациозно намаляват в по-старите браузъри. Кодът използва фонови изображения, за да замени стиловете за включване / изключване между потребителските взаимодействия.
Елементите на квадратчето за въвеждане на оригинално въвеждане са скрити по подразбиране и тяхната стойност се определя чрез JavaScript повиквания. Това означава, че можете да извличате динамично стойността в която и да е точка през jQuery, но тя също ще бъде прехвърлена във формуляра, когато натиснете бутона “Изпращане” бутон.
Ако приемем, че JavaScript е изключен или неподдържан в по-стари браузъри, скриптът по подразбиране ще използва обикновени HTML входове. Това също ще деактивира CSS за по-новите стилове на квадратчетата за отметки, така че да изглежда така, сякаш нищо не се е променило. Сценарият се държи по-скоро като естетичен фронт-бегач с чист резерв от всичко друго. Но тези плъзгачи изглеждат фантастично и същите техники могат да бъдат приложени към други полета за въвеждане на формуляри, като например избрани менюта и радио бутони.
10. Поддържано видео в HTML5
Новите спецификации на HTML5 са много прогресивни в много области. Както видео, така и аудио елементи имат подобрена вградена поддръжка за голям брой медийни файлове. Оказва се обаче, че между браузърите, поддържани от HTML5, не всички са съгласни с типовете файлове.
Mozilla Firefox обикновено поддържа .OGG видео, което можете да използвате като конвертор. Google Chrome & Safari търсят .MP4 или H.264 кодирани .MOV файлове. Поради тези разлики обикновено трябва да включите три различни видео формати - двете, изброени по-горе, заедно с резервно .FLV.
За щастие някои наистина умни момчета събраха библиотека, наречена VideoJS. Това е изключително малка JavaScript конструкция, която позволява еднократна реализация на Flash и HTML5 видео в един маркер. Това е безплатно за изтегляне и с отворен код, така че разработчиците също са добре дошли. Както Flash, така и HTML5 видео плейърите са персонализирани, за да бъдат идентични, така че всички потребители да имат същото изживяване. Вижте примерния код за вграждане на видеоклипове в HTML5:
източник
След подобен маршрут проектът html5media предлага метод за консолидиране на всички поточни медии в един тип. За съжаление дори VideoJS не е идеален за всеки браузър. Това, което проектът html5media се е опитал да направи, е да се справи с несъвместимостта на браузъра, за да поддържа всеки вид видеофайлове сред всички платформи. И всъщност работи доста добре!
заключение
Надявам се, че това ръководство за полезни резервни методи ще бъде полезно за уеб разработчиците по целия свят. Тя може да бъде трудно изграждане на уеб сайтове, за да се адаптират към широк спектър от софтуерни спецификации. Това е особено вярно, когато работите с много различни езици като CSS и JavaScript.
Но тенденциите показват, че се приближаваме към по-благоприятна ера в уеб дизайна. Никога досега не са били съгласувани повече браузъри и уеб стандарти, особено в CSS3 & HTML5. Тези техники са само част от многото, които трябва да се вземат предвид при изграждането на уеб-страници, отговарящи на стандартите. Като уеб разработчик, вие непрекъснато ще искате да следите най-новите тенденции в дизайна и да се адаптирате към най-подходящия за вашата аудитория.
