Рубрики
Без рубрики

Как Создать Совместимый С Браузером Индикатор Выполнения HTML?

Мы узнаем, как создавать, стилизовать и анимировать индикатор выполнения HTML с помощью CSS и jQuery соответственно. Кроме того, проблемы с кросс-браузерной совместимостью и исправления для элемента прогресса HTMl5. Помеченный javascript, node, java.

Одним из ключевых элементов любого современного веб-сайта, с которым вы могли бы столкнуться в Интернете, является индикатор выполнения HTML. Элементы прогресса HTML5 стали фундаментальной частью веб-дизайна, которая используется для широкого спектра задач, будь то отображение статуса загрузки/выгрузки файлов, передача файлов, регистрация, установка или любая задача, которая должна быть завершена. Однако кодирование индикатора выполнения HTML, который обеспечивает кроссбраузерную совместимость , с незапамятных времен представляло собой сложную задачу для разработчиков. Вместо использования тегов div для создания индикатора выполнения, HTML5 предоставляет чрезвычайно оригинальный способ с помощью тега HTML5 <прогресс>. В этой статье мы обсудим, что такое элемент прогресса HTML5, как его стилизовать с помощью CSS, как анимировать его с помощью JavaScript/jQuery, решения для кросс-браузерной совместимости для создания индикатора выполнения HTML и, наконец, резервные варианты для неподдерживаемых браузеров. Без дальнейших церемоний, поехали!

Элемент HTML5 <прогресс>

Семантический элемент HTML5 <прогресс> используется в качестве индикатора для отображения состояния выполнения или прогресса задачи, т. е. объема работы, которую еще предстоит выполнить. Элемент HTML5 <прогресс> действует как наглядная демонстрация обратной связи для пользователя, позволяющая следить за ходом выполнения данной выполняемой задачи. Обычно он отображается в виде индикатора выполнения, отмеченного цифрами или процентными значениями.

Примечание: Если вы хотите отобразить индикатор (дисковое пространство или хранилище), элемент прогресса HTML5 не будет правильным выбором. Вы должны использовать тег HTML <метр> вместо этого.

Синтаксис Для Создания Индикатора Выполнения HTML

<прогресс>

Тег <прогресс> имеет 2 ключевых атрибута – значение и максимум. Эти 2 атрибута определяют, какая часть (значение) общей задачи (максимум) была выполнена в настоящее время.

  • Значение: атрибут value указывает объем выполненной задачи, который является текущим значением. Это может быть любое число от 0 до максимального атрибута. В случае отсутствия атрибута max значение может варьироваться от 0 до 1. В случае, если атрибут value отсутствует, индикатор выполнения HTML будет неопределенным. Он больше не будет указывать на текущее состояние завершения.
  • Max: атрибут max представляет общий объем работы, необходимый для выполнения задачи. Значение max не может быть меньше 0 и по умолчанию равно 1.

Вот простая демонстрация индикатора выполнения HTML с использованием элемента прогресса HTML5 –




 
   Progress Bar
 
 
   Progress:

Неопределенные и Определенные Состояния Элемента Прогресса HTML5

Как мы обсуждали выше, элемент прогресса может иметь 2 состояния – Неопределенное или Определенное. Все зависит от того, упоминается ли атрибут value внутри тега <прогресс> или нет. В случае, если атрибут value не указан, результатом будет неопределенный индикатор выполнения HTML, который не отображает текущее состояние выполнения. Обратное верно в случае определенного индикатора выполнения HTML.

Вот пример для обоих случаев –




 
   Progress Bar
 
 
   Indeterminate Progress Bar:
   
   


   Determinate Progress Bar:

Элемент прогресса HTML5 – Кроссбраузерная совместимость

Как вы можете видеть выше, элемент прогресса HTML5 совместим с несколькими браузерами во всех основных браузерах для настольных компьютеров и мобильных устройств, охватывающих 97,45 % базы пользователей Интернета по состоянию на март 2019 года. Единственным серьезным исключением являются версии IE9 и ниже. Позже в этой статье мы рассмотрим различные способы кодирования необходимых резервных возможностей для повышения совместимости нашего индикатора выполнения HTML с браузером с помощью полифайла для добавления поддержки IE8-9.

Стилизация Индикатора Выполнения HTML

Стилизация элемента прогресса HTML – чрезвычайно сложная задача. Проблема здесь возникает в первую очередь потому, что каждый браузер интерпретирует тег <прогресс> по-разному. Каждый из них использует свои собственные псевдоклассы для оформления индикатора выполнения HTML. На рисунке ниже вы можете видеть, как различные браузеры по-разному отображают базовый индикатор выполнения HTML. Вам необходимо добавить правила стиля отдельно для каждого из трех браузеров с разными механизмами рендеринга –

  • Браузеры Blink/Webkit – Google Chrome, Opera и Safari
  • Браузер Moz – Mozilla Firefox
  • Обозреватель Интернета

Если вы хотите узнать больше о том, как работает современный браузер и почему браузеры Отображают контент непоследовательно, вы можете ознакомиться с моей предыдущей статьей о Обнаружение функций для кроссбраузерной совместимости .

Прежде чем перейти к конкретным правилам браузера, давайте сначала рассмотрим базовый селектор элементов прогресса HTML5. Мы можем использовать селектор прогресса (или селектор прогресса[значение]), чтобы изменить цвет фона, высоту и радиус границы индикатора выполнения.

progress{
            color: red; /*Works only with edge. Not applied to webkit and mozilla*/
            background-color: #6e6e6e; /*not applied to webkit. Works with firefox and Edge*/
            border: 0;
            width: 100px;
            height: 20px; /*works with all browsers*/
            border-radius: 9px; /*Not appied to value part in firefox. Works with Edge*/
        }

Однако цвет фона и радиус границы не будут работать с Google Chrome и другими браузерами WebKit/Blink, как показано ниже. Фактически, они удалят собственный стиль по умолчанию и заменят его зеленым индикатором выполнения и темно-серым фоном. В Firefox правила цвета фона и радиуса границы применяются к внешнему индикатору выполнения, но не к значению. Microsoft Edge соблюдает все правила, как и предполагалось.

Теперь, чтобы создать кросс-браузерный совместимый индикатор выполнения HTML с одинаковым внешним видом во всех браузерах, нам нужно настроить таргетинг на псевдоклассы как для браузеров Webkit (Chrome, Opera и Safari), так и для Firefox.

  1. Браузеры Webkit используют 2 псевдокласса для нацеливания на элемент прогресса HTML5: -webkit-индикатор выполнения и -webkit-прогресс-значение .

    • – webkit-индикатор выполнения: Используется для оформления внешнего индикатора выполнения (контейнера). С помощью этого псевдокласса вы можете изменить цвет фона, а также свойства радиуса границы и тени рамки индикатора выполнения.
    • -webkit-прогресс-значение: используется для оформления внутренней панели значений. Вы можете использовать этот псевдокласс для изменения цвета части значения индикатора выполнения.
  2. Mozilla Firefox использует один псевдокласс: -moz-индикатор выполнения для оформления элемента значения индикатора выполнения HTML.
  3. Microsoft Edge и IE используют: -ms-fill псевдокласс, чтобы добавить стиль, подобный градиентному фону, к значению части индикатора выполнения.

Подводя итог, теперь у нас есть следующие селекторы CSS для добавления правил стиля в наш индикатор выполнения HTML–

 /* NON BROWSER SPECIFIC*/
       progress {
       }
       /* FOR WEBKIT BROWSERS*/
       progress::-webkit-progress-bar {
       }
       progress::-webkit-progress-value {
       }
       /* FOR FIREFOX */
       progress::-moz-progress-bar {
       }
       /* FOR MICROSOFT EDGE AND IE */
       custom-progress::-ms-fill {
       }

Не забудьте сбросить стили браузера по умолчанию. Для этого вам нужно будет установить для свойств внешнего вида и границ значение нет, как показано ниже –

progress {
            /* RESETS */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: none;
        }

Базовый индикатор выполнения HTML

Теперь, используя эти псевдоклассы WebKit и Mozilla firefox, мы можем, наконец, создать наш базовый индикатор выполнения со светло-серым фоном (#777), светло-голубой частью прогресса значения (rgb(20, 240, 221)) , и закругленные углы (радиус границы: 20 пикселей) .






    Progress Bar
    



   
HTML PROGRESS BAR 

   Progress:
   
    40%

Индикатор Выполнения HTML С Полосатым Градиентным Фоном

Мы можем сделать наш стиль еще на шаг дальше, чтобы создать индикатор выполнения HTML с полосами и градиентным фоном. Просто добавьте -webkit-линейный-градиент и -moz-линейный-градиент правила стиля для ::-webkit-прогресс-значение и ::-индикатор выполнения псевдоклассы.

/* WEBKIT BROWSERS - CHROME, OPERA AND SAFARI */
       progress::-webkit-progress-bar {
           background-color: #777;
           border-radius: 20px;
       }

       progress::-webkit-progress-value {
           background-image:
               -webkit-linear-gradient(45deg, transparent 40%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .1) 70%, transparent 70%),
               -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
               -webkit-linear-gradient(left, #1abc9c, #3498db);
           border-radius: 20px;
       }

       /* MOZILLA FIREFOX */
       progress::-moz-progress-bar {
           background-image:
               -moz-linear-gradient(45deg, transparent 33%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 70%, transparent 70%),
               -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
               -moz-linear-gradient(left, #1abc9c, #3498db);
           border-radius: 20px;
       }

       /* MICROSOFT EDGE & IE */
       .custom-progress::-ms-fill {
           border-radius: 18px;
           background: repeating-linear-gradient(45deg, #1abc9c, #1abc9c 10px,#3498db 10px, #3498db 20px);
       }

Анимированный индикатор выполнения HTML

Теперь, когда вы узнали, как создавать и стилизовать индикаторы выполнения с помощью HTMLprogresselement, последним шагом является добавление анимации. В большинстве случаев индикаторы выполнения HTML используются одновременно с JavaScript или jQuery. Мы будем использовать JavaScript для добавления анимации расширения вправо от значения 0 до максимального значения, увеличиваясь в заранее определенных шагах. Мы будем использовать тот же полосатый градиентный индикатор выполнения, который мы сделали ранее, и добавим к нему анимацию – сначала мы создадим переменную под названием “прогресс”. Сохраните значение элемента прогресса идентификатора “пользовательская панель” внутри него. Установите для атрибутов “значение” и “макс” элемента прогресса HTML значения 0 и 100 соответственно. Пока значение переменной “прогресс” меньше максимального значения атрибута, переменная “прогресс” продолжает увеличиваться на 10 через каждые 1 секунду. Таким образом, за 10 секунд индикатор выполнения заполнится от 0 до максимального значения, равного 100.






  
  HTML5 Progress Bar
  
  



  

      
Animating HTML Progress Bar Using JavaScript

      0%

Индикатор Выполнения HTML С Элементами Управления Увеличением/Уменьшением

Вы можете продолжать играть с JavaScript/jQuery, чтобы создать забавный вариант индикатора выполнения HTML, добавив элементы управления триггерами ручного увеличения/уменьшения для увеличения или уменьшения значения прогресса. Это будет очень похоже на ползунок диапазона. Каждое нажатие кнопки увеличит или уменьшит текущее значение индикатора выполнения на 5.





    Progress Bar
    



    
HTML5 Progress Bar with Javascript Controls

Резервные варианты Для элемента Прогресса HTML5, совместимого с Кросс-Браузером, В IE9 и Ниже

Элемент прогресса HTML5 поддерживается всеми основными браузерами, кроме IE9 и ниже. Чтобы добавить функциональность в эти браузеры, один из способов - создать резервный код с использованием тегов div. Однако это приводит к дополнительному дублированию кода и дополнительным усилиям со стороны разработчиков. Интуитивно понятной альтернативой является использование одного из самых популярных и широко используемых полифиллов прогресса, созданных Леа Веру .

Чтобы обеспечить кроссбраузерную совместимость HTML5 элемента прогресса для IE9 и 8 , просто добавьте progress-polyfill.js и прогресс-заполнение.css файлов в ваш проект. Ниже приведен пример кода, выполняемого в IE8 с использованием лямбда-теста в режиме реального времени.







    
    HTML5 <progress> polyfill by Lea Verou</progress>
    
    




    
HTML5  polyfill


    
Demos

    
    
        
  • 
            
        
    • 
        
  • 
            
            
        
    • 
        
  • 
            
            
        
    • 
        
  • 
            
            
        
    • 
        
  • 
            
        
    •

Элемент Прогресса HTML Теперь Поддерживается В IE9 И IE8 – LambdaTest В Реальном Времени Кроссбраузерное тестирование

Выше упоминался скриншот для демонстрации процесса заполнения HTML5 для IE9. Я использовал Лямбда-тест, который представляет собой облачный инструмент кроссбраузерного тестирования, предлагающий более 2000+ реальных браузеров и версий браузеров, работающих на разных мобильных и настольных устройствах. Выполняя кроссбраузерное тестирование на лямбда-тесте, вы можете обеспечить бесперебойную работу вашего веб-сайта или веб-приложения в разных браузерах. С помощью встроенных инструментов разработчика для каждого браузера вы можете легко отлаживать и тестировать свой код на совместимость с другими браузерами .

С учетом сказанного, если вам интересно узнать больше о дополнительных ресурсах, посетите веб-сайт Леа Веру или страница заполнения .

заключение

Для многих разработчиков создание настраиваемых и современных индикаторов выполнения HTML без использования каких-либо плагинов или библиотек jQuery просто с помощью простого HTML и CSS стало бы большим открытием. Несмотря на то, что элемент прогресса HTML5 пользуется отличной поддержкой браузеров, разработчикам все же необходимо учитывать колоссальные различия в браузерах, возникающие в результате использования разных движков рендеринга, и обеспечивать надлежащую согласованность стиля. Продолжайте изучать сложные градиентные узоры, креативный стиль CSS в сочетании с анимацией на основе прокрутки JavaScript, которая может помочь раздвинуть границы ваших индикаторов выполнения HTML до зенита.

Первоначально опубликовано: Лямбда-тест

Связанный пост :

Топ-11 Фреймворков JavaScript На 2019 Год

Сейчас 2019 год! Давайте Закончим Дискуссию О Шрифтах Значков и Значках SVG

Оригинал: "https://dev.to/nikhiltyagi04/how-to-create-a-cross-browser-compatible-html-progress-bar-5ai4"