Stosuje reguły testowania, walidacji i optymalizacji stron internetowych

Dlaczego tak

Safari korzysta z silnika WebKit, a Chrome z silnika Blink, więc różnice w renderowaniu CSS da się wiarygodnie sprawdzić tylko w tej samej przeglądarce — na urządzeniu, w symulatorze lub w usłudze udostępniającej rzeczywiste przeglądarki. Zmiana identyfikatora user agent w Chrome zmienia jedynie to, za kogo przeglądarka się podaje, ale strona nadal jest renderowana silnikiem Blink. Poprawny kod HTML nie gwarantuje identycznego wyglądu w każdym silniku.

Dlaczego tak

Bez znacznika meta viewport przeglądarki mobilne renderują stronę na wirtualnym ekranie o szerokości ok. 980 px i pomniejszają wynik, więc warunek max-width: 600px nigdy nie jest spełniony. Ustawienie width=device-width sprawia, że szerokość widoku odpowiada szerokości urządzenia, a zapytania o media zaczynają działać. Kodowanie znaków, ikona i opis strony nie wpływają na szerokość widoku.

Dlaczego tak

Walidacja polega na porównaniu kodu dokumentu ze specyfikacją języka: walidator zgłasza niedozwolone elementy i atrybuty, błędne zagnieżdżenie, brakujące wymagane atrybuty czy zduplikowane identyfikatory. Szybkość ładowania mierzą narzędzia do audytu wydajności, np. Lighthouse, a pozycję w wynikach — narzędzia SEO. Walidator nie ocenia ortografii ani sensu treści.

Dlaczego tak

Usługa CSS Validation Service konsorcjum W3C sprawdza arkusze stylów: wykrywa błędy składni, nieznane właściwości i niepoprawne wartości. Nu Html Checker jest walidatorem dokumentów HTML, więc nie zgłosi np. literówki w nazwie właściwości w osobnym pliku .css — stąd częsta pomyłka. WAVE ocenia dostępność, a PageSpeed Insights — wydajność ładowania strony.

Dlaczego tak

Dziećmi elementu ul mogą być tylko elementy li (oraz elementy skryptowe), więc akapit p bezpośrednio w liście jest błędem — odnośnik „Kontakt” powinien trafić do kolejnego li. Element img musi mieć atrybut alt (pusty dla grafik dekoracyjnych), inaczej walidator zgłasza błąd. Odnośniki w li i w p są dozwolone, img jest elementem pustym bez znacznika zamykającego, a ścieżka względna w src jest poprawna.

Dlaczego tak

Atrybut defer sprawia, że przeglądarka pobiera skrypt równolegle z analizą HTML, nie wstrzymując renderowania, i wykonuje go dopiero po przetworzeniu całego dokumentu — wtedy elementy strony już istnieją. Typ text/plain powoduje, że skrypt w ogóle się nie wykona. Znacznik link z rel="stylesheet" wczytuje arkusze CSS, a nie JavaScript, a charset nie zmienia momentu wykonania.