10 полезных резервных методов для CSS и Javascript
Резервные коды - это идеальное решение для компромисса с многочисленными уникальными посетителями. Не все в Интернете используют одну и ту же операционную систему, веб-браузер или даже физическое оборудование. Все это влияет на то, как ваша веб-страница будет отображаться на экране. При работе с новыми трюками CSS или JavaScript вы часто сталкиваетесь с такими техническими ошибками.
Но не позволяйте этим подводным камням обескураживать вас! В этом руководстве я собрал некоторые из наиболее распространенные методы восстановления для веб-дизайнеров, специализирующихся на CSS и JavaScript / jQuery. Когда все остальное терпит неудачу, вы хотите предоставить пользователям хотя бы основные функциональные возможности страницы. Простота царит в области дизайна пользовательского опыта.
Ознакомьтесь с нашим руководством ниже и дайте нам знать ваши мысли и вопросы в разделе комментариев.
1. Закругленные углы с изображениями
Техники CSS3 взлетели в мейнстрим веб-дизайна. Одним из наиболее заметных свойств является граница радиуса что позволяет на лету закругленные углы. Они прекрасно смотрятся практически на любой кнопке, элементе div или текстовом поле. Единственная проблема - ограниченная поддержка между веб-браузерами..
Многие старые браузеры, включая Internet Explorer 7, не поддерживают это свойство. Таким образом, чтобы закругленные углы работали для всех стандартных браузеров, вам нужно создать запасной вариант с изображениями..
Стандартный код использует обычные свойства CSS3 в главном элементе div, в то же время приспосабливая изображения к каждому из углов. Скорее всего, вам потребуется настроить некоторые дополнительные элементы div в основном контейнере, которые используются для отображения угловых изображений в фоновом режиме..
#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox \ Gecko Engine * / -o-border-radius: 5px; / * Opera * / border-radius: 5px; #mainbox .topc background: url ('corner-tl.png') без повтора вверху слева; #mainbox .topc span background: url ('corner-tr.png') без повтора вверху справа; #mainbox .btmc background: url ('corner-bl.png') без повтора внизу слева; #mainbox .btmc span background: 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..
/ * Класс current будет добавлен через 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
Я уверен, что мы все знаем о проблемах рендеринга, появившихся в Microsoft Internet Explorer. Я могу отдать должное их последней IE8 и будущим перспективам с IE9. Тем не менее, все еще есть небольшая аудитория, работающая с IE6 / IE7, и вы действительно не можете игнорировать их пока.
(Источник изображения: github)
Условные комментарии, упомянутые в последнем разделе, могут быть полезны для переформатирования областей страницы. Например, если у вас есть раскрывающееся меню с суб-навигацией в IE6, которое будет отображаться только с использованием JavaScript, вам не повезет, попробовав CSS как запасной метод. Вместо этого лучшим решением является отображение каждого подсписка в виде блока навигации..
Добавив приведенный выше код в заголовок документа, вы можете указать тип отображения для каждой суб-навигации. Лучшая часть этого отката заключается в том, что вы можете перезаписать CSS и по-прежнему динамически отображать / скрывать меню, когда включен JavaScript. В противном случае вы просто отобразите открытый список ссылок. Вы можете использовать подобный код, как я добавил ниже.
#nav li позиция: относительная; ширина: 150 пикселей; / * должен установить конечную ширину для IE * / #nav li ul / * коды sub-nav * / display: block; положение: абсолютное; ширина: авто; / * определить собственную ширину или установить в элементе li * / #nav li ul li width: 100%;
4. Legacy IE Непрозрачность / Прозрачность
Одна из многих досадных ошибок в Internet Explorer - это непрозрачность. Настройки альфа-прозрачности в CSS3 можно изменить с помощью свойства opacity. Пока что на пути Microsoft только Internet Explorer 9 в настоящее время поддерживает эту функцию.
Лучшее решение для таргетинга IE6 + - через фильтр, запатентованная настройка, распознаваемая только IE. Посмотрите краткий пример кода ниже:
.mydiv непрозрачность: 0,55; / * CSS3 * / filter: alpha (непрозрачность = 55); / * IE6 + * /
Все, что вам нужно сделать, это включить строку выше в любой элемент, требующий прозрачности. Обратите внимание, что, подобно свойству CSS3, все дочерние элементы также наследуют это изменение непрозрачности. Если вы ищете более новый метод, специально предназначенный для IE8, ознакомьтесь с приведенным ниже кодом. Это ведет себя так же, как наше свойство фильтра распознается только анализатором Microsoft IE8.
-ms-фильтр: "progid: DXImageTransform.Microsoft.Alpha (opacity = 55)"; / * IE8 * /
5. Создание CSS3 кнопок с резервными изображениями
Кнопки являются фантастическим веб-элементом для всех видов интерфейсов. Они могут вести себя как входные данные формы, элементы навигации или даже прямые ссылки на страницы. С помощью CSS3 теперь можно форматировать кнопки с помощью множества уникальных стилей, таких как фоновые градиенты, тени от ячеек, закругленные углы и т. Д..
Однако вы не можете полагать, что все ваши посетители смогут отобразить эти новые свойства. При создании запасного дизайна для кнопок (или даже похожих элементов пользовательского интерфейса) есть два разных варианта. Первый - включить фоновое изображение, разработанное в точности так, как будет выглядеть CSS. Это можно легко сделать в Photoshop. Однако, если вы не являетесь экспертом в программном обеспечении, это может быть хлопотно.
Альтернативой является возврат к простому цвету фона и более простым стилям CSS. Я использую некоторые примеры кода из отличного поста CSS-Tricks по градиентам CSS3. Все основные браузеры, включая Safari, Firefox, Chrome и даже Opera, поддерживают эти свойства. Область, в которой вы столкнетесь с проблемами, - это поддержка устаревших браузеров: старые движки Mozilla, IE6 / 7, возможно, даже Mobile Safari..
.градиент-bg background-color: # 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-linear-Gradient (вверху, # 2F2727, # 1a82f7); background-image: -moz-linear-Gradient (вверху, # 2F2727, # 1a82f7); background-image: -ms-linear-Gradient (вверху, # 2F2727, # 1a82f7); фоновое изображение: -o-линейный градиент (вверху, # 2F2727, # 1a82f7); Источник
Единственная небольшая проблема с использованием изображений в качестве запасного метода заключается в том, что у вас не будет активного изменения состояния, когда пользователь нажимает кнопку. Вы могли бы построить два разных изображения для этих обычных и активных состояний, хотя это потребовало бы дополнительной работы. Одна только эта причина может подтолкнуть вас к использованию сплошного цвета фона вместо запасных изображений. Попробуйте несколько различных решений, чтобы увидеть, что лучше всего выглядит в вашем макете.
6. Проверка мобильного контента
Еще одна огромная тенденция 2012 года - популярность мобильного интернета. Смартфоны есть везде, и данные через 3G / Wi-Fi становятся все более доступными. Таким образом, многие дизайнеры будут искать альтернативный вариант для мобильных пользователей..
Несколько популярных мобильных веб-браузеров будут отображать страницы, похожие на среду рабочего стола. Mobile Safari и Opera наиболее известны благодаря этому, даже поддерживая многие распространенные сценарии jQuery. Но эти страницы не всегда удобны для мобильных устройств, и есть возможность расширить UX.
Существует два способа обнаружения мобильных браузеров и отображения альтернативного макета или таблицы стилей. Первый - через JavaScript, который прекрасно работает как инструмент веб-интерфейса. Сценарий, который я добавил ниже, очень прост и проверяет только пользователей iPhone / iPod Touch. Detect Mobile Browsers - это фантастический сайт, который предлагает более подробный скрипт, который вы можете запустить вместо.
// Перенаправление iPhone / iPod Touch function isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1)); if (isiPhone ()) window.location = "m.yourdomain.com"; Теперь другой альтернативой является проверка через бэкэнд-язык, такой как PHP. Вы можете проверить переменную, известную как HTTP_USER_AGENT. Десятки сайтов появятся, если вы воспользуетесь этими условиями. Однако я все еще рекомендую ссылку «Обнаружить мобильные браузеры», которую я добавил в предыдущем абзаце..
На сайте есть бесплатные загружаемые скрипты для разбора не только на PHP, но и множество других популярных бэкэнд-языков. К ним относятся ASP.NET, ColdFusion, Rails, Perl, Python и даже серверный код, такой как IIS и Apache..
7. Slicebox Slider с изящным отступлением
Моей любимой бесплатной CSS3 с 2011 года, вероятно, должен быть Slicebox 3D Image Slider, выпущенный Codrops. Он использует красивые переходы CSS-анимации в браузерах, которые их поддерживают, в настоящее время в Google Chrome и в последних версиях Safari. Странно, что даже самые последние версии Firefox или IE9 по-прежнему не могут использовать эти переходы.
Самое приятное в этом коде - это то, что он по-прежнему будет использоваться для обеспечения базовых эффектов перехода между изображениями. Конечно, большая часть анимации выполняется с помощью jQuery, но стандартная опция отката CSS все еще очень надежна, учитывая, сколько браузеров не может поддерживать броские анимации CSS3.
В качестве альтернативы Codrops также недавно выпустил еще одну скользящую панель изображений, которая использует еще более креативные методы CSS3. Этот слайдер изображений создан с использованием фоновых изображений в CSS, поэтому даже без эффектов перехода он ведет себя очень плавно.
8. JQuery Script CDN отказоустойчивый метод
Библиотека 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, которое вы можете использовать в качестве конвертера VLC. Google Chrome и Safari ищут файлы .MOV в кодировке .MP4 или H.264. Из-за этих различий вы обычно должны включать три различные форматы видео - два из перечисленных выше, а также запасной вариант .FLV.
К счастью, некоторые действительно умные ребята собрали библиотеку VideoJS. Это чрезвычайно маленькая сборка JavaScript, которая позволяет реализовать одну реализацию Flash и HTML5-видео в одном теге. Это бесплатно для скачивания и с открытым исходным кодом, поэтому разработчики также могут внести свой вклад. Видеоплееры Flash и HTML5 настроены так, чтобы они были одинаковыми, поэтому у всех пользователей будет одинаковый опыт. Посмотрите их пример кода встраивания видео HTML5:
Источник
Следуя аналогичному маршруту, проект html5media предлагает метод для объединения всех потоковых медиаданных в один тип файла. К сожалению, даже VideoJS не идеален с каждым браузером. Проект html5media пытался решить проблему несовместимости браузеров для поддержки любого типа видеофайлов на всех платформах. И это на самом деле работает довольно хорошо!
Заключение
Я надеюсь, что это руководство по полезным запасным методам пригодится веб-разработчикам по всему миру. Создание веб-сайтов может быть сложным для адаптации к широкому спектру спецификаций программного обеспечения. Это особенно верно, когда вы работаете со многими различными языками, такими как CSS и JavaScript.
Но тенденции указывают на то, что мы приближаемся к более благоприятной эре в веб-дизайне. Никогда ранее не согласовывалось больше браузеров и веб-стандартов, особенно в CSS3 и HTML5. Эти методы - лишь некоторые из многих, которые следует учитывать при создании веб-страниц, соответствующих стандартам. Как веб-разработчик, вы всегда будете стремиться следовать последним тенденциям дизайна и адаптироваться к вашим аудиториям..
