Computer Keyboard - Głównie JavaScript

Głównie JavaScript

rss feed icon

by

Zmiana styli CSS gdy JavaScript jest włączony lub nie w samym CSS

Włącznik Światła z ikonką żarówki
Autor @joffi źródło pixabay.com licencja CC0

Gdy mamy layout i chcemy, aby pojawił się baner informujący, że aplikacja wymaga JavaScript’u, najczęstszym rozwiązaniem jest dodanie klasy do taga html np. no-js i usunięcie jej w JavaScripcie.

Jest jednak sposób, aby to zrobić, w samym CSS.

Oto bardzo sprytne rozwiązanie, którego autorem jest Stas Lashmanov:

<style>
  .js-only {
    display: var(--no-js-hide, block);
  }
</style>

<noscript>
  <style>
    :root {
      --no-js-hide: none;
    }
  </style>
</noscript>

Rozwiązanie nie zadziała jednak w przeglądarce Internet Explorer, która nie wspiera zmiennych CSS.

źródło strony (aby zobaczyć kod na githubie musisz kliknąć przycisk raw)
Komentarze

Hasło, które podasz umożliwi ponowne zalogowanie się i np. usunięcie komentarza, jest dobrowolne. Email jest szyfrowany i używany do wysyłania powiadomień o odpowiedziach do komentarzy oraz do pobierania awatara dzięki usłudze Gravatar.com.