Co to jest progresywne ulepszanie?
Progresywne ulepszanie to technika, która pomaga zapewnić solidność i dostępność oprogramowania. Przestrzegając go, możesz mieć pewność, że jak najwięcej osób będzie mogło korzystać z Twojej witryny lub aplikacji.
Zacznij od minimalnie opłacalnej wersji swojego projektu internetowego i upewnij się, że działa zgodnie z potrzebami. Następnie dodaj dodatkową funkcjonalność i styl, aby bardziej wydajne przeglądarki mogły skorzystać.
Jak działa Progressive Enhancement?
Ze względu na swoją niezwykle rozproszoną naturę sieć zawsze musiała obsługiwać ogromną gamę urządzeń. Od podstawowych komputerów z lat 70. po wydajne nowoczesne komputery stacjonarne, tablety i telewizory — strony internetowe przeszły długą drogę.
Sercem wszystkiego jest HTML. Ponieważ jest to język „wybaczający”, przeglądarki będą wyświetlać HTML tak dobrze, jak go rozumieją. Zazwyczaj ignorują wszystko, czego nie obsługują.
Może to być przydatne z punktu widzenia programisty, ale może powodować problemy dla czytelników. Jeśli Twoja witryna wyświetla pustą stronę, gdy JavaScript nie może działać, użytkownicy nie mają innego wyjścia, jak tylko ją porzucić. Stopniowe ulepszanie zachęca do dostarczania podstawowych treści każdemu, kto ma do nich dostęp, a następnie ulepszania tych treści za pomocą odpowiednich technologii, takich jak CSS i JavaScript.
Progresywne podejście do stylizacji
CSS to internetowy język arkuszy stylów, którego można używać do dostosowywania kolorów, czcionek, układów i wielu innych aspektów wizualnych stron. Możesz go użyć do ulepszenia domyślnego wyglądu treści, ale to nie znaczy, że nie powinieneś przede wszystkim odpowiednio uporządkować treści.
Weźmy na przykład pasek menu; możesz to ustrukturyzować w ten sposób:
<nav>
<a href="/register">register</a>
<a href="/login">log in</a>
<a href="/about">about us</a>
<a href="/contact">contact</a>
</nav>
Aby wyświetlić menu poziome, z każdym linkiem wyglądającym trochę jak przycisk, możesz nadać mu styl za pomocą tego CSS:
nav a {
text-decoration: none;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid;
border-radius: 8px;
margin-right: 1em;
}
Gdy przeglądarka w pełni to zrenderuje, powinno to wyglądać następująco:
Jeśli jednak CSS jest niedostępny, menu wyświetli się w następujący sposób:
Zauważ, że to nie wygląda jak menu i nie jest łatwe w użyciu, ponieważ linki łączą się w jedno.
Możesz użyć alternatywnej struktury, aby uczynić projekt bardziej niezawodnym:
<nav>
<ul>
<li><a href="/register">register</a></li>
<li><a href="/login">log in</a></li>
<li><a href="/about">about us</a></li>
<li><a href="/contact">contact</a></li>
</ul>
</nav>
Ponieważ ten znacznik wykorzystuje nieuporządkowany element listy, jest o wiele bardziej użyteczny w przypadku braku CSS:
Zwróć uwagę, o ile łatwiej jest szybko przeskanować i zrozumieć te linki, nawet przy domyślnym stylu przeglądarki. To podejście będzie wymagało dodania nieco więcej CSS, aby zastąpić domyślne style list:
nav li { display: inline; }
Mimo że ostateczna struktura i stylizacja są bardziej skomplikowane, a większość użytkowników będzie miała włączony CSS, to podejście jest bardziej niezawodne. Będzie bardziej przyjazny dla użytkowników czytników ekranu i przeglądarek terminalowych.
Stopniowe wprowadzanie funkcjonalności
Progresywne ulepszanie jest najważniejsze, jeśli chodzi o funkcjonowanie strony lub aplikacji. Zasada mówi, że bez względu na wszystko, Twoja strona internetowa powinna działać jak najlepiej.
W praktyce dotyczy to zwykle języka JavaScript. Jeśli wprowadzisz zachowanie po stronie klienta, powinno ono nakładać funkcjonalność na stronę lub aplikację, która już działa bez tego.
Bardzo częstym przypadkiem jest obsługa zdarzeń. Wyobraź sobie stronę, która ładuje dodatkowe treści na żądanie. Może to być ręczne nieskończone przewijanie, osadzenie komentarza lub podobne.
<body>
<!--. .. -->
<button onclick="load_more();">
Load More
</button>
<!--. .. -->
</body>
Atrybut onclick przycisku zawiera kod JavaScript, który zostanie uruchomiony, gdy ktoś kliknie przycisk. Jeśli jednak JavaScript jest niedostępny, ten przycisk nic nie zrobi. Użytkownik po kliknięciu tego przycisku nie otrzyma żadnej informacji zwrotnej ani pojęcia, co się dzieje. O wiele lepsze podejście wykorzystuje stopniowe ulepszanie:
<body>
<!--. .. -->
<a id="p2" href="/page/2">Page 2</a>
<script>
function load_more() { console.log("!"); }
/* Replace link with button */
var link = document.getElementById("p2");
var button = document.createElement("button");
button.innerText = "Load More";
button.addEventListener("click", load_more);
document.body.insertBefore(button, link);
link.parentNode.removeChild(link);
</script>
</body>
Ten kod przekształca podstawowe łącze w przycisk z obsługą zdarzeń. Wprowadzając zależność od JavaScript za pomocą samego JavaScript, możesz być pewien, że zadziała. Istnieje funkcjonalne domyślne zachowanie, które działa, w postaci standardowego łącza do /page/2 .
Czy progresywne ulepszanie jest naprawdę konieczne?
Wszyscy używają przeglądarek z CSS i JavaScript, więc po co zawracać sobie głowę obsługą sytuacji, która się nie pojawia? Cóż, istnieje kilka powodów, dla których warto przyjąć dobrą praktykę progresywnego ulepszania.
- Po pierwsze, nie każdy, kto odwiedza Twoją witrynę, korzysta z przeglądarki. Niektórzy odwiedzający będą botami, takimi jak indeksator wyszukiwarki, i mogą w ogóle nie rozumieć CSS lub JavaScript.
- Po drugie, nie każda osoba, która odwiedzi Twoją stronę, będzie korzystała z przeglądarki z CSS i JavaScriptem. Niektórzy odwiedzający mogą korzystać z przeglądarki opartej na terminalu, która wyświetla zwykły tekst z minimalnym formatowaniem. Inni mogą korzystać z czytnika ekranu.
- Po trzecie, nawet jeśli przeglądarka obsługuje CSS i JavaScript, coś idzie nie tak. Uszkodzony link lub złe połączenie sieciowe może spowodować brak. css lub. plik js. Błąd w JavaScript może spowodować, że inny kod w ogóle się nie uruchomi.
- Wreszcie, niektórzy odwiedzający mogą aktywnie zdecydować o wyłączeniu CSS lub JavaScript. Mogą to zrobić ze względu na obawy dotyczące prywatności lub dlatego, że korzystają z wolnego połączenia lub połączenia typu pay-by-use.
Postępowy sposób myślenia czyni cuda
Przede wszystkim stopniowe ulepszanie zachęca do przyjęcia podejścia skoncentrowanego na treści. Treść jest najważniejsza, więc Twój tekst i obrazy powinny być zawsze dostępne dla wszystkich, niezależnie od tego, jak uzyskują dostęp do Twojej witryny.
Zapewniając wszystkim czytelnikom najlepsze możliwe wrażenia, a następnie czyniąc je jeszcze lepszymi dla tych, którzy mogą z nich skorzystać, możesz mieć to, co najlepsze ze wszystkich światów. Stopniowe ulepszanie to tylko jeden z kluczowych elementów dobrych praktyk w zakresie dostępności i użyteczności.
Dodaj komentarz