Moduł VI – Testowanie i Modernizr (2 godz.)
Kurs HTML5, CSS3 i JavaScript – Zespół Szkół w Sokołowie Małopolskim

Moduł 6 — Testowanie i Modernizr (2 godz.)

Moduł skupia się na testowaniu stron w różnych przeglądarkach oraz sprawdzaniu, które funkcje HTML5 i CSS3 są obsługiwane. Pozwala to tworzyć strony kompatybilne i nowoczesne.

1. Testowanie w różnych przeglądarkach

Kiedy tworzymy stronę, musimy upewnić się, że działa poprawnie w różnych przeglądarkach, np. Chrome, Firefox czy Edge. Oznacza to sprawdzenie układu strony, formularzy, przycisków, animacji i innych elementów interaktywnych. Najprościej jest użyć wbudowanej konsoli i testować działanie skryptów.

/* Sprawdzanie działania JavaScript w różnych przeglądarkach */
console.log("Test działania skryptu w Chrome i Firefox");

/* Możesz też wyświetlić alert */
alert("Jeżeli widzisz ten komunikat, skrypt działa poprawnie!");

Dzięki temu uczysz się, czy Twoje funkcje działają tak samo w każdej przeglądarce. Możesz też zobaczyć ewentualne błędy w konsoli i poprawić je zanim opublikujesz stronę.

2. Sprawdzanie obsługiwanych funkcji

Nie wszystkie przeglądarki obsługują nowe właściwości CSS3 lub elementy HTML5. Dlatego warto sprawdzać, czy dana funkcja działa, zanim jej użyjemy na stronie. Najprościej jest użyć JavaScript, żeby wykryć obsługę np. Flexbox, Grid czy nowych typów inputów.

if ('flex' in document.body.style) {
  console.log("Flexbox jest wspierany");
} else {
  console.log("Flexbox nie jest wspierany");
}

💡 Jak to działa: kod sprawdza, czy przeglądarka rozumie właściwość flex. Jeżeli tak, w konsoli pojawi się komunikat „Flexbox jest wspierany”, w przeciwnym razie „Flexbox nie jest wspierany”. Podobnie można sprawdzać inne funkcje CSS3 lub HTML5, zanim użyjemy ich w projekcie.

// Sprawdzenie Grid (CSS3)
if ('grid' in document.body.style) {
  console.log("Grid jest wspierany");
} else {
  console.log("Grid nie jest wspierany");
}

// Sprawdzenie Canvas (HTML5)
if ('getContext' in document.createElement('canvas')) {
  console.log("Canvas jest wspierany");
} else {
  console.log("Canvas nie jest wspierany");
}

// Sprawdzenie LocalStorage (HTML5)
if ('localStorage' in window) {
  console.log("LocalStorage jest wspierany");
} else {
  console.log("LocalStorage nie jest wspierany");
}

// Sprawdzenie audio
if ('canPlayType' in document.createElement('audio')) {
  console.log("Audio jest wspierany");
} else {
  console.log("Audio nie jest wspierany");
}

// Sprawdzenie input type=date
if (document.createElement('input').type === 'date') {
  console.log("Input typu date jest wspierany");
} else {
  console.log("Input typu date nie jest wspierany");
}

3. Biblioteka Modernizr

Modernizr to mała biblioteka JavaScript, która pomaga sprawdzać, które funkcje HTML5 i CSS3 są obsługiwane w przeglądarce. Dzięki temu możesz tworzyć strony, które działają poprawnie nawet w starszych przeglądarkach, stosując alternatywne style lub skrypty.

<!-- Dołączenie Modernizr z CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/3.11.7/modernizr.min.js"></script>

<script>
// Sprawdzenie obsługi Flexbox
if (Modernizr.flexbox) {
  console.log("Flexbox wspierany — zastosuj style nowoczesne");
} else {
  console.log("Flexbox nie wspierany — użyj fallback (alternatywnych stylów)");
}

// Możesz też sprawdzać inne funkcje
if (Modernizr.canvas) {
  console.log("Canvas wspierany");
} else {
  console.log("Canvas nie wspierany");
}
</script>

💡 Jak to działa w prostych słowach: 1. Do strony dodajemy Modernizr za pomocą linku `