
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!