Style CSS dla html5 progress bar w różnych przeglądarkach

javascript-html5-tutorial.pl

28 października, 2016

Mr. JavaScript

Dziś kilka słów o HTML5 progress bar, a konkretnie nadawanie mu CSS w taki sposób, aby wyglądał tak samo we wszystkich przeglądarkach. Może tego wymagać projekt, a programista może być zaskoczony, że określone style stosują się tylko w określonej przeglądarce, podczas gdy w innych przygotowany pasek postępu wygląda zupełnie inaczej.

Ten sam wygląd html5 progress bar w różnych przeglądarkach

Różne przeglądarki różnie wyświetlają pasek postępu html5, różne są także domyślne style. Jeśli chcemy, aby pasek zawsze wyglądał tak samo we wszystkich przeglądarkach, potrzebujemy małego triku CSS. Gotowe rozwiązanie poniżej.

Zakładamy że mamy dokument HTML z elementem progress:

<div class="progress-bar-wrap">
  <progress id="progressbar" value="33" max="100"></progress>
</div>

Do tego kolory naszego projektu, np.;

– tło: #cccccc

– front: #0066ff

Podstawowy CSS wyglądał by tak:

progress {
  width: 50%;
  background: #cccccc;
  color: #0066ff;
  padding: 0px;
  border: none;
  border-radius: 33px;
}

Potrzeba jednak także dodatkowych stylów dla webkit i mozilla. Proszę zwrócić uwagę na detale:

progress::-webkit-progress-bar {
  background: #cccccc;
  border-radius: 33px;
  -webkit-border-radius: 33px;
}

progress::-webkit-progress-value {
  background: #0066ff;
  border-radius: 33px;
  -webkit-border-radius: 33px;
}

progress::-moz-progress-bar {
  background: #0066ff;
  border-radius: 33px;
  -moz-border-radius: 33px;
}

Dzięki temu prostemu zabiegowi, style (tutaj kolory i zaokrąglenia) wyglądają tak samo we wszystkich przeglądarkach, bez dziwnych różnic. Testowane w: FF, Chrome, Opera, IE.

Proste demo dostępne tutaj.

Zobacz także:

Pasek postępu w CSS – progress bar w kilku linijkach kodu

CSS tips and tricks – porady CSS

oraz (EN):

ProBars – jQuery animated progress bars plugin

Animated circular progress bars with jQuery

Bootstrap and jQuery bar charts – jchart plugin

Podsumowanie

Gdy ktoś nie pracował zbyt wiele z html5 progress bar, może być zdziwiony, że ustalone kolory i inne style działają tylko w określonej przeglądarce. Aby uzyskać w każdej z nich dokładnie ten sam wygląd, potrzeba zdefiniować szczegóły w osobnych regułach. Na szczęście nie jest to nic skomplikowanego.

Miłej zabawy z html5 i CSS!