Кроссбраузерный <progress>-бар

Недавно по работе появилось одно интересное заданьице. Сделать прогресс-бар, который мало того, что будет стилизоваться так, как нужно, да ещё и к тому же должен быть кроссбраузерным, начиная с IE7.  

Для тех, кому не терпится посмотреть решение, выкладываю итоговый результат сразу.

Ранее, надо признать, мне не доводилось иметь дело с прогресс-барами, по ряду причин. Во-первых, прогресс-бары не часто попадались мне в заданиях, а во-вторых, как-то удавалось выкручиваться и решать эти задачи другими способами. Но, в этот раз мне не удалось уйти от ответственности, да и потом у меня появился спортивный интерес и мне безумно захотелось сделать какое нибудь своё, работающее и кроссбраузерное решение.

Первое, что пришло мне на ум (как наверное и многим из нас), это обратится к спецификации HTML5 и её новому элементу <progress>. Его плюс в том, что он является уже почти что готовым решением + семантически правильным в данной ситуациии. Но каково было моё разочарование, когда я понял, что этот элемент, мало того, что очень плохо стилизуется, так ещё и не поддерживается даже в одном из последних браузеров.

Что с поддержкой в браузерах?

На сегодняшний день (март 2012) поддержка в браузерах такова: Firefox 11, Opera 11.61, Chrome 17. И всё :(. Следовательно в Safari 5.1, Internet Explorer 9 (ну и естественно в IE6-8) нет возможности использовать этот элемент напрямую. Такой расклад меня конечно же огорчил, потому что весомая доля пользователей попросту не сможет насладиться новым элементом <progress>, что не входило в мои планы и задачу. Честно говоря, я рассчитывал на нечто большее, предполагая, что и Safari 5.1 и Internet Explorer 9 всё будет так же здорово.

Как действуем?

На данном этапе у меня родились две идеи. Первое — это постараться найти какие нибудь проприетарные свойства для тех браузеров, которые не поддерживают <progress> и попробовать с помощью каких нибудь браузерных фич заставить их это делать. А для оставшихся браузеров уже воспользоваться JavaScript. Последнее мне хотелось использовать только в крайнем случае.

В общем предлагаю начать по порядку…

Проприетарные свойства

Порывшись в интернете некоторое время, я натнулся на несколько интересных вещей:

::-webkit-progress-bar —  псевдоэлемент, благодаря которому можно достучаться до элемента <progress> и, например, застилизовать его так, как нам задумается (позже вы поймёте, что это нам даёт). Работает в браузерах на базе движка webkit.

::-webkit-progress-value —  псевдоэлемент, способный повлиять на саму индикатор прогресс-бара. Т.е, как я понял, первый псевдоэлемент может влиять на каркас прогресс-бара, а вот второй именно на индикатор. Соответственно псевдоэлемент принадлежит и работает так же в webkit браузерах.

::-moz-progress-bar —  псевдоэлемент, работающий в браузере Firefox, который объединяет в себе сразу оба псевдоэлемента webkit (::-webkit-progress-bar; и ::-webkit-progress-value). Честно говоря не понятно, зачем первым стоило делать два разных проприетарных свойств, если вполне можно было ограничиться одной. Кстати, а сам корпус в Firefox можно стилизовать через обычный селектор "progress {}"

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

А пока что предлагаю сделать небольшой тестовый пример, чтобы увидеть общую картину и узнать, что мы оставим для скрипта.

Промежуточный тест

Не смотря на то, что в некоторых браузерах есть поддержка элемента <progress>, его стилизация, даже там, оставляет желать лучшего. Например, Opera не хочет поддаваться стилизации и на любое неверное движение приводит полосу индикатора к ненужному нам цвету, а в Safari вообще не работает сам индикатор. Но, чтобы хорошенько разобраться в происходящем, я предлагаю начать с малого, с простого примера.

<progress max="100" value="30">
    Текст
</progress>​
progress {
	margin: 2em auto;
	display: block;
	border-radius : 8px;
	background: #fff;
	padding: 0;
	border: 0;
	text-align: center;
	height: 20px;
	box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5);
	overflow:hidden;
	background: -webkit-linear-gradient(#4c4, #8f8 50%, #4c4);
		background: -moz-linear-gradient(#4c4, #8f8 50%, #4c4);
			background: -o-linear-gradient(#4c4, #8f8 50%, #4c4);
				background: linear-gradient(#4c4, #8f8 50%, #4c4);
	border-radius: 8px;
}

И вот каков результат:

Мда… надо сказать, что результаты поражают своим разнообразием. Ни один прогресс-бар не похож на остальные. Видно, как Firefox раскрасил сам каркас и пытался применить стили для полоски, но получилась совсем ужасно + ширина его прогресс-бара не соответствует действительной (100px), Opera и Chrome так же ничем не выделились, оба испортили цвета индикатора, но в отличии от Firefox сохранили круглые углы. Safari смог обратится к элементу, но закрасил весь каркас, проигнорировав атрибуты прогресс-бара (max="80" value="30") и его индикатор. Ну оно и понятно, Safari ведь не поддерживает этот элемент. А вот IE9 узнал лишь о существовании элемента <progress> и закруглил у него углы, но на этом его путь и закончился. В IE6-8 я даже и не стал делать скриншоты, думаю всем уже понятно, что в них пустота.

На данный момент идея сделать из вышепоказанного кросс-браузерную вещь звучит, как "нереальность". Поэтому настало время испробовать полученные проприетарные свойства, возможно картина сможет поменяться в лучшую сторону.

Я дополнил код CSS некоторыми новыми правилами:

progress {
    margin: 2em auto;
    display: block;
	width: 100px;
    border-radius : 8px;
    background: #fff;
    padding: 0;
    border: 0;
    text-align: center;
    height: 20px;
    box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5);
    overflow:hidden;
    background: -o-linear-gradient(#4c4, #8f8 50%, #4c4);

}

progress::-moz-progress-bar {
    background: -moz-linear-gradient(#4c4, #8f8 50%, #4c4);
    border-radius: 8px;
}
progress::-webkit-progress-bar {
    background: #fff;
    box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5);

}
progress::-webkit-progress-value {
    background: -webkit-linear-gradient(#4c4, #8f8 50%, #4c4);
    border-radius: 8px;
}

И вот что у меня вышло:

Результаты немного стали лучше, но далеко не везде. В Firefox и Chrome мы смогли подчинить себе прогресс-бар полностью, включая каркас и сам индикатор. Случилось это благодаря проприетарным свойтсвам. Но, к сожалению в Safari такой номер не прошёл и даже фон исчез полностью. А ситуация в Opera и IE никак не изменилась вообще.

На данном этапе у меня закончились все способы и козыри в CSS. Всё что можно было придумать, я придумал. Остальную работу придётся перекладывать на срипты, но для начала давайте подитожим все расклады.

Однозначно можно сказать про две вещи. Основные скрипты не нужны для Firefox и Chrome, но полюбому нужны для IE6-9 и Safari. Остался вопрос про Opera, что делать с ней? Несомненно, она понимает все атрибуты элемента <progress> + стилизует прогресс-бар именно так, как нам нужно, исключая только лишь цвет самой полоски. Думаю, что можно оставить её прогресс-бар на её совести.

В общем всё вроде решено, так что переходим к подготовке.

Подготавлеваем почву

Для того, чтобы определиться из каких компонентов будет состоять скрипт, предворительно необходимо понять цель, задачу и что мы вообще хотим получить. Ну и конечно же подготовить нужную структуру HTML.

Задача

В нашу задачу входят следующие вещи:

  • По максимуму задействовать элемент <progress> там, где это возможно. Семантика здесь играет ключевую роль (если это не вредит качеству) и поэтому использовать семантические элементы для нас очень важно.
  • Прогресс-бар должен содержать отдельный текст, который будет отображать текущий процент заполнения индикатора.
  • Прогресс-бар должен быть легко настраиваемый и видоизменяющимся. В зависимости от класса он должен менять ширину, высоту, цвет и т.д.
  • Наш прогресс-бар должен работать по возможности одинаково во всех браузерах, начиная с IE7+

Исходя из задачи, я сделал вывод, что в нашем случае подошёл бы общий контейнер, в котором находились бы сам элемент <progress> и второй элемент для текста.

Следовательно разметка будет такой:

<div class="psyProgressBar">​
	<progress max="80" value="0" class="psyProgressBar__line">​</progress>​
	<i class="psyProgressBar__text">​0%</i>​
</div>​

Сразу настроим CSS для нашего блока:

.psyProgressBar {
	margin: 2em auto;
	display: block;
	width: 100px;
	border-radius : 8px;
	background: #fff;
	padding: 0;
	border: 0;
	text-align: center;
	height: 20px;
	box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5);
	overflow:hidden;
	background: -o-linear-gradient(#4c4, #8f8 50%, #4c4);
}
	.psyProgressBar__line {
		border: none;
		background: none;
		display: block;
		border-radius : 8px;
		box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5);
		background: -o-linear-gradient(#4c4, #8f8 50%, #4c4);
		width: 100%;
		height: 100%;
		overflow:hidden;
	}
	.psyProgressBar__text {
		width: 100%;
		position: absolute;
		left: 0;
		z-index: 1;
		top: 50%;
		text-align: center;
		overflow:hidden;
		border-radius: 8px 8px;
		margin-top: -10px;
		font: bold italic 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	}

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

Теперь у нас есть все данные и можно переходить к написанию скрипта.

Пишем скрипт

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

function psyProgressBar(){}

Вообще я старался написать скрипт наименьшего размера (не во вред качеству конечно же) и поэтому разделил его на три части.

1. Определение переменных, обход дерева документа в поисках нужных блоков (с прогресс-баром), собирание массива, состоящего из объектов со свойствами наших элементов.
2. Проверка собранного массива из первой части, сборка нужных параметров для отправки их заранее подготовленной функции (третяя часть).
3. Сама функция, определяющая поддержку элемента <progress> и в зависимости от результата запускала анимацию индикатора для нужного браузера.

Но, всё же, давайте по порядку.

Определение переменных и загатовка массива

Эта часть кода будет выглядеть так:

	var el = document.getElementsByTagName('*');
	var progressBarArr = [];
	var reProgressBar = /\bpsyProgressBar\b/g;
	var reProgressLine = /\bpsyProgressBar__line\b/g;
	var reProgressText = /\bpsyProgressBar__text\b/g;
	for(var i = 0; i < el.length; i++){
		if(reProgressBar.test(el[i].className)){
			var obj = {};
			var elProgress = el[i].getElementsByTagName('*');
			for(var j = 0; j < elProgress.length; j++){
				if(reProgressLine.test(elProgress[j].className)){
					obj['progress__line'] = elProgress[j];
				}
				if(reProgressText.test(elProgress[j].className)){
						obj['progress__text'] = elProgress[j];
				}
			}
			progressBarArr.push(obj);
		}
	}

Что здесь происхоидит. Получаем коллекцию элементов на странице (getElementsByTagName), подготавливаем массив (progressBarArr) и определяем следующие переменные:

	var reProgressBar = /\bpsyProgressBar\b/g;
	var reProgressLine = /\bpsyProgressBar__line\b/g;
	var reProgressText = /\bpsyProgressBar__text\b/g;

Это делается для того, чтобы найти чёткие классы, названия которых будут содержать именно те символы, которые нам нужны. Например, если нам нужен класс "psyProgressBar", то мы можем быть уверены, что найдя в дереве класс "psyProgressBarr" (с левым символом на конце) цикл пройдёт мимо.

Ну, а дальше всё просто, обходим циклом элементы, делаем проверку на нужные классы, сооружаем объект, состоящий из двух свойтв: obj[‘progress__line’] — самого прогресс-бара и obj[‘progress__text’] — и текстового элемента. Забрасываем объекты в ранее созданный массив и идём дальше.

Сборка параметров

Настало время собрать ягодки (параметры).

for(var i = 0; i < progressBarArr.length; i++){
	var value = 0;
	var valueMax = 100;
	var textTeg;
	var progress__line;
	if(progressBarArr[i].progress__line){
		value = parseInt(progressBarArr[i].progress__line.value) || 0;
		valueMax = parseInt(progressBarArr[i].progress__line.getAttribute('max')) || 100;

		progress__line = progressBarArr[i].progress__line;
	}else { continue;}
	if(progressBarArr[i].progress__line && progressBarArr[i].progress__text){
		textTeg = progressBarArr[i].progress__text;
	}else {
		var span = document.createElement('span');
		document.body.appendChild(span);
		span.style.display = 'none';
		textTeg = span;
	}	

	lineTime(textTeg,progress__line,valueMax)
}

Здесь мы уже проходимся по заготовленному массиву и определяем переменные, которые будут является параметрами для главной функции. Кстати, её мы и вызываем в конце каждой итерации.

Для этого мы осуществляем ряд необходимых проверок на наличие в контейнерах тех или иных элементов, а так же их атрибутов. Ведь это один из ключевых моментов в подготовке аргументов.

Для начала проверяем наличие главного элемента <progress> и, если он присутствует, то мы определяем "атрибутные" переменные ( value и valueMax ) или, если они отсутствуют, заменяем альтернативными значениями. И напоследок инициализируем переменную самого элемента ( progress__line ). Но, если этот элемент вообще отсутствует, то помечаем этот блок, как неполноценный и пропускаем эту итерацию цикла вообще ( else { continue;} ). Тут я думаю ясно, что элемент <progress> необходим. И елси без текстового элемента ещё можно обойтись, то без <progress> — нет!

Далее идёт проверка на текстовый элемент. Если он есть в наличии, значит всё в порядке и переменная определена, а если же его не оказывается в контейнере, то применять к этому элементу текст уже не имеет никакого смысла и чтобы функция не выдала ошибку, мы заранее заготавливаем левый элемент в DOM.

var span = document.createElement('span');
document.body.appendChild(span);
span.style.display = 'none';
textTeg = span;

Теперь наша переменная будет ссылаться на скрытый элемент в дереве, что избавит нас от проблем.

Запуск индикатора

А теперь переходим к главной части. Функция, принимающая на входе три параметра: ссылку на текстовый элемент, ссылку на индикатор и значения атрибута "max" у элемента <progress>. Последнее тоже очень важно, и мы разберём это чуть позже.

Первым делом нужно определить общие переменные. Общими я назвал их из-за того, что мы будет использовать два разных индикатора, для каждого случая. Первый случай — это индикаторы для натуральных элементов <progress>, и тех браузеров, которые их поддерживают (Firefox, Chrome, Opera). А второй — это уже все остальные (IE6-9, Safari). Последний случай отличается от первого тем, что в нём, вместо натурального элемента <progress> мы будет использовать свой, созданный  <div>.

Когда я дошёл до этого момента, передо мной встал вопрос: "Как же мне сделать так, чтобы браузеры сами могли определить, к какому случаю им относиться?". Использовать для этого дела скрипты, определяющие браузер и их версии, нельзя, по той причине, что в любой день элемент <progress> может заработать в том-же Safari и поэтому второй случай ему уже может попросту не понадобиться. В связи с чем я пошёл немного хитрым путём. Во-первых, я воспользовался инструкцией try {}catch(e){} , и засунул в try{} одну интересную проверку:

if( HTMLProgressElement ){}

Т.е. я решил проверять браузеры на поддержку реализации интерфейса HTMLProgressElement. Попытка может увенчаться успехом только в том случае, если браузер поддерживает интерфейс HTMLProgressElement и следовательно элемент <progress>. В противном случае браузеру будет подсунут <div>. Этот трюк поможет нам уберечь браузеры от ненужных скриптов, если поддержка элемента реализуется и лишние скрипты не понадобятся.

Если в браузере реализован HTMLProgressElement, то соответственно мы попадаем в if и сразу же определяем полезные переменные, первая из которых step, получающая значение атрибута "max" (элемента <progress>), делённое на 100. Чтобы понять, почему мы делаем именно так, изначально нужно понимать работу самого элемента <progress> и его атрибутов.

Атрибут max означает количество шагов, который должен совершить индикатор, чтобы полностью заполнить себя. Деля 100 на max мы загатавливаем почву для текстового элемента, чтобы его шаги (проценты) двигались с нужным нам интервалом и в конце составили бы 100%. Например, если количество шагов должно быть 50, то чтобы циферки шли правильно, каждый их шаг будет равен 2%, что в итоге составит как раз 100.

Дальше уже всё просто. Мы запускаем интервал и отсчитываем шаги ( nums ++ ), меняем содержимое в текстовом элементе и ждём остановки.

Осталось разобрать, что происходит в случае, если инструкция try{} выкинула ошибку. В этом случае мы попадаем в catch{} и сразу же создаём элемент <div>, кидаем его в контейнер и назначаем класс '.noSupportProgress'. Именно через него браузеры, не поддерживающие элемент <progress>, будут стилизовать индикатор.

Дальше происходит что-то похожее на предыдущие действия в try{}, а точнее определения значения шага для текстового элемента + ещё одна идея.

var procent = 100/valueMax;
var step = progress__line.parentNode.offsetWidth / valueMax;

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

Ну, а дальнейшие действия не представляют особых сложностей. Запускаем интервал, высчитываем шаги, записываем результаты и ждём 100%-й загрузки.

Завершающая стадия

В конце мы вешаем на событие (второго уровня) onload вызов нашей общей функции (psyProgressBar), чтобы последняя не запускалась, пока не загрузится весь документ. 

Результат

Тестовый пример подтвреждает, что наш прогресс-бар уже работает во всех браузерах, начиная с IE7. Как вы могли увидеть в коде, через класс ".noSupportProgress" мы настраивали стили отдельно для IE и Safari. Это к сожалению вынужденная мера, но главное эффективная. 

Теперь осталось проверить последнюю вещь. В условиях было сказано, что прогресс-бар должен стилизоваться так, как нам вздумается. С помощью разных классов должны меняться ширина, высота, фон, тени и всё, всё, всё. Поэтому я соорудил наглядный тестовый пример, где вы можете убедиться в том, что мы смогли добиться желаемого результата.

Итоговый результат

Скачать скрипт

P.S. Это тоже может быть интересно:

14 Комментарии

  1. Герман

    Спасибо огромное. Очень понравилось твое решение. Как всегда оригинально и практично. Так держать.

  2. ShumNo

    в FF 3.6 не работает :)

    1. psywalker (Автор записи)

      FF 3.6 в музей ;)

  3. exessqd

    Привет, из комментария на хабре:

    «Вы не поняли суть скрипта. Он задействует левый элемент только тогда, когда браузер не поддерживает элемент , а когда это произойдёт, то мы получим семантически работающий элемент. А вы же предлагаете какие-то div, которые совершенно не предназначены для прогресс-баров)))»

    Не хочу обижать, но ты не понимаешь сути семантики в html. (блин, я даже когда тебе уже это говорил http://forum.htmlbook.ru/index.php?showtopic=29625&view=findpost&p=225930)

    Во-первых: «Семантика только ради семантики — это не семантика».

    Во-вторых: «Семантические теги не нужны визуальным устройствам».

    На данный момент тег progress нужен только для альтернативных устройств просмотра а для них кроме семантических тегов существуют ARIA roles то есть твоя задача решается достаточно просто — добалением нескольких атрибутов в стилизованный div.

    Вот так:

    div role=»progressbar» aria-valuemin=»» aria-valuenow=»» aria-valuemax=»»

    Есть ещё другой вариант:

    Так как progress визуальным устройствам не нужен то заморачиваться с кроссбраузерностью незачем, и в таком случае можно просто добавить скрытый progress ниже div’а, эффект при этом будет тот же самый.

    И на последок, как я уже много раз повторял в том числе и тебе, после добавления тега progress и любой другой семантики в документ нужно обязательно тестировать как эта семантика работает.

    1. psywalker (Автор записи)

      Не хочу обижать, но ты не понимаешь сути семантики в html.

      Хааа, и это говорит мне человек, который никогда не использует семантические элементы по их назначения, болеет БЭМ-ом и делает 10 обёрток, ради поддержки никому не нужных ослов))))) Спасибо, поржал :)

      (блин, я даже когда тебе уже это говорил http://forum.htmlbook.ru/index.php?showtopic=29625&view=findpost&p=225930)

      Да, даа, я прекрасно помню эту тему, где все в итоге поняли, что ты настоящий фанат, идущий слепо вперёд и не замечая ничего у себя на пути.

      Во-первых: “Семантика только ради семантики – это не семантика”.

      Во-вторых: “Семантические теги не нужны визуальным устройствам”.

      На данный момент тег progress нужен только для альтернативных устройств просмотра а для них кроме семантических тегов существуют ARIA roles то есть твоя задача решается достаточно просто – добалением нескольких атрибутов в стилизованный div.

      Вот так:

      div role=”progressbar” aria-valuemin=”» aria-valuenow=”» aria-valuemax=”»

      Есть ещё другой вариант:

      Так как progress визуальным устройствам не нужен то заморачиваться с кроссбраузерностью незачем, и в таком случае можно просто добавить скрытый progress ниже div’а, эффект при этом будет тот же самый.

      Ага, точно, а в итоге я буду использовать натуральный элемент progress, а ты другие варианты :)

      И на последок, как я уже много раз повторял в том числе и тебе, после добавления тега progress и любой другой семантики в документ нужно обязательно тестировать как эта семантика работает.

      Для этого я изначально и проводил исследования progress , о чём и поделился в данной статье. Читай внимательнее!

  4. exessqd

    «Для этого я изначально и проводил исследования progress, о чём и поделился в данной статье. Читай внимательнее!»

    Для чего нужна семантика?

    «Хааа, и это говорит мне человек, который никогда не использует семантические элементы по их назначения, болеет БЭМ-ом и делает 10 обёрток, ради поддержки никому не нужных ослов)))))»

    Браузеру и пользователям абсолютно все равно сколько оберток ты добавляешь, другим разработчикам тоже все равно, до тех пор пока такая разметка будет для них понятна.
    Ты очень заботишься о чистоте кода, но гораздо важнее заботиться о том что этот код можно повторно использовать и он имеет смысл в разнообразных контекстах.

    1. Serlutin

      >Для чего нужна семантика?
      Семантика это смысл. Для чего нужен смысл?

      Есть тег — progress. Есть функция, которую он выполняет. Вот и вся семантика.
      С позиции разработчика, этим тегом управлять проще, так как он значение задаётся атрибутум, а не стилями.
      С позиции пользователя, то преймущества в том, что при отключении стилей, это будет всё-равно прогресс бар. Да, сейчас есть много условнотей. Там не работает, там глючит. Использовать полифилы или верстать всё на дивах, дело чисто разработчика. Нет ничего плохого в том, чтобы использовать этот тег.

      Кстати, кому кому, а вот речевым движкам (JAWS — единственное, что пользуется популярнустью) на семантику вообще всё-равно. Поддержка ARIA довольно скудна. Да и не поможет семантика в нынешнем виде речевым движкам. Не то это, не то.

      Вот и получается, что семантика нужна только ради семантики. В общем-то все новые html5 теги и нужны просто так, для красоты кода. Теоретически да, они нужны роботам, но роботы подчиняютя лишь чётким правилам, таким как микроформаты и микроданные.

      1. exessqd

        Сразу вспомнилась эта статья http://www.impressivewebs.com/avoid-nonsemantic-classes/

        1. Serlutin

          Про классы полностью согласен. Они не могут быть семантичными или несемантичными, это просто метка.
          Другое дело теги. Когда-то заголовки тоже делали на дивах, чтобы не сбрасывать css, сейчас же за это предадут анафеме Точно так же будет и с progress.

          1. exessqd

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

            В принципах HTML на счет этого написано очень четко: «Параграф 3.4. Separation of Concerns. …cемантическая разметка не обязательна если цель вашей разметки может быть достигнута по-другому».

            Я совсем не против семантики, даже очень за, когда это приносит пользу.
            В противном случае это не имеет смысла.
            Да, было бы очень хорошо если бы через какое-то время большинство верстальщиков начали бы использовать progress, главное чтобы слепо не добавляли семантические теги в документ а тестировали их в тех программах и устройствах для которых они были созданы.

  5. Int

    >Я дополнит код CSS некоторыми новыми правилами

  6. Макс

    По-моему, проще стилизовать обычный div, как вот тут например: Прогресс бары с помощью CSS.

  7. psywalker (Автор записи)

    Вы не поняли цель моего решения. Почитайте комменты выше.

  8. Станислав

    Спасибо большое! Все круто, но! В ie11 просто синий фон у прогресс-бара. Хотя если не применять проприетарные свойства то он отображает цвет как надо! Помогите пожалуйста с этим, излазил весь инет — ответа не нашел! Спасибо! :)

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.