10 Корисні резервні методи для CSS і Javascript

Недоліки коду - ідеальне рішення для компромісу з багатьма унікальними відвідувачами. Не всі в Інтернеті використовують ту ж операційну систему, веб-браузер або навіть фізичне обладнання. Всі ці фактори впливають на те, як веб-сторінка відображатиметься на екрані. Під час роботи з новими хитрощами CSS або JavaScript ви часто стикаєтеся з такими технічними помилками.

Але не дозволяйте цим пасткам перешкодити вам! У цьому посібнику я зібрав деякі з Найбільш поширені запасні методи для веб-дизайнерів, орієнтованих на CSS і JavaScript / jQuery. Коли все інше не вдасться, потрібно надати користувачам принаймні базову функціональність сторінки. Простота панує в області дизайну користувача.

Ознайомтеся з нашим керівництвом нижче і дайте нам знати ваші думки та питання в розділі коментарів.

1. Закруглені кути з зображеннями

Методи CSS3 зросли до основного веб-дизайну. Одним з найбільш помітних властивостей є кордон-радіус що дозволяє заокруглені кути на льоту. Вони виглядають красиво на практично будь-якій кнопці, div або текстовому полі. Єдина проблема полягає в обмеженій підтримці між веб-браузерами.

Багато старих браузерів, включаючи Internet Explorer 7, не підтримують цю властивість. Тому для того, щоб зберегти округлі кути, які працюють для всіх стандартних браузерів, потрібно створити резервні зображення.

Стандартний код використовує звичайні властивості CSS3 на головному div, розміщуючи зображення на кожному з кутів. Ймовірно, вам доведеться налаштувати деякі додаткові розділи в основному контейнері, які використовуються для відображення кутових зображень у фоновому режимі.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox Гекко Двигун * / -о-кордон-радіус: 5px; / * Опера * / кордон-радіус: 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.

/ * Клас струму буде додано через 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 / * піднавірених кодів * / дисплей: блок; позиція: абсолютна; width: auto; / * визначають власну ширину або встановлюють у елементі li * / #nav li ul li ширина: 100%;

4. Спадщина IE Opacity / Transparency

Одним з багатьох дратівливих помилок з Internet Explorer є угода з непрозорістю. Параметри альфа-прозорості в CSS3 можуть бути змінені за допомогою властивості непрозорості. І все ж на шляху Microsoft тільки Internet Explorer 9 в даний час підтримує цю функцію.

Найкраще рішення для націлювання на IE6 + - це фільтр, власні налаштування, визнані тільки IE. Перегляньте короткий приклад коду нижче:

.mydiv непрозорість: 0,55; / * CSS3 * / фільтр: альфа (непрозорість = 55); / * IE6 + * /

Все, що потрібно зробити, це включити рядок вище в будь-який елемент, що вимагає прозорості. Зверніть увагу, що подібно до властивості CSS3 всі дочірні елементи також успадкують це зміна прозорості. Якщо ви шукаєте новий метод, який спеціально націлений на IE8, ознайомтеся з наведеним нижче кодом. Він веде себе так само, як і властивість нашого фільтра, що розпізнається лише синтаксичним аналізатором Microsoft IE8.

-ms-filter: "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 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-лінійний градієнт (зверху, # 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. Десятки веб-сайтів з'являться, якщо ви переглянете ці умови. Однак я все ще рекомендую посилання "Виявити мобільні браузери", яке я додав у попередньому абзаці.

На сайті є безкоштовні завантажувані скрипти для розбору не тільки на PHP, але й на інші популярні мови. До них відносяться ASP.NET, ColdFusion, Rails, Perl, Python і навіть серверний код, такий як IIS і Apache.

7. Слайдер Slicebox з витонченим резервним

Мій улюблений CSS3 халява з 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-style для ваших прапорців, які граціозно деградують у старих браузерах. Код використовує фонові зображення для заміни стилів вмикання / вимикання між взаємодіями користувачів.

Початкові елементи вихідного входу приховані за замовчуванням, а їхнє значення визначається за допомогою викликів JavaScript. Це означає, що ви можете динамічно витягувати значення в будь-якій точці через jQuery, але воно також буде передано у форму після натискання кнопки “подати” кнопки.

Припускаючи, що JavaScript вимкнено або не підтримується у старих браузерах, сценарій за замовчуванням буде використовуватися для звичайних HTML-входів. Це також вимкне CSS для нових стилів прапорців, щоб він виглядав так, ніби нічого не змінилося. Сценарій поводиться більше як естетичний фронт-бігун з чистим запасом, ніж будь-що інше. Але ці повзунки виглядають фантастично, і ті ж методи можна застосувати до інших полів введення форми, таких як вибрані меню та перемикачі.

10. Підтримуване відео HTML5

Нові специфікації HTML5 були дуже прогресивними в багатьох областях. Як відео, так і аудіо елементи мають розширену підтримку для великої кількості мультимедійних файлів. Однак виходить, що між браузерами, що підтримуються HTML5, вони не всі погоджуються з типами файлів.

Mozilla Firefox в цілому підтримує .OGG відео, яке можна використовувати як конвертер. Google Chrome & Safari шукає файли .M4 або .M4, закодовані .MP4 або H.264. Через ці відмінності ви звичайно повинні включити три різні формати відео - два з перелічених вище разом з резервним файлом .FLV.

На щастя, деякі дійсно розумні хлопці зібрали бібліотеку VideoJS. Це надзвичайно невелика версія JavaScript, яка дозволяє одноразову реалізацію Flash і HTML5 відео в одному тезі. Це безкоштовне завантаження та відкрите джерело, тому розробники також можуть зробити свій внесок. Ігрові відеопрогравачі Flash і HTML5 налаштовані на ідентичність, тому всі користувачі матимуть такий же досвід. Ознайомтеся з прикладом коду вставки відео в HTML5:

Джерело

Після подібного маршруту проект html5media пропонує метод консолідації всіх потокових медіа в один тип файлів. На жаль, навіть VideoJS не ідеально підходить для кожного браузера. Те, що проект html5media намагався зробити, це обхід невідповідності браузера для підтримки будь-якого типу відеофайлів серед усіх платформ. І це насправді працює досить добре!

Висновок

Сподіваюся, що цей посібник з корисних запасних методів буде корисним для веб-розробників у всьому світі. Це може бути жорстке створення веб-сайтів для адаптації до широкого спектру специфікацій програмного забезпечення. Це особливо вірно, коли ви працюєте з багатьма різними мовами, такими як CSS і JavaScript.

Але тенденції свідчать, що ми наближаємося до більш сприятливої ери у веб-дизайні. Ніколи раніше не було узгоджено більше браузерів і веб-стандартів, особливо в CSS3 і HTML5. Ці методи є лише деякими з багатьох, які слід враховувати при побудові веб-сторінок, які відповідають стандартам. Як веб-розробник, ви постійно бажаєте стежити за останніми тенденціями дизайну та адаптуватися до найкращої вашої аудиторії.