CSS-Regeln nur bei deaktiviertem JavaScript anwenden

Manchmal gibt es CSS-Eigenschaften, die nur bei deaktiviertem JavaScript greifen sollen. Bei dem Lazy-Loading-Plugin Lazy Loader zum Beispiel sollen die Bilder mit der lazyload-Klasse versteckt werden, wenn JS nicht aktiv ist.

Bisher habe ich das über eine Klasse gelöst, die via JS dem html- oder body-Element hinzugefügt wird – ohne Klasse werden die Bilder versteckt, wenn die Klasse da ist werden sie angezeigt.

Jetzt hat mich der User wprox im W.org-Support-Forum auf eine alternative Lösung aufmerksam gemacht, die er im Blogartikel »Nice and easy lazy loading with lazysizes.js« von Steve McKinney gefunden hat: Die Styles für deaktiviertes JavaScript einfach in ein noscript-Element schreiben.

Statt also über JavaScript einem Element eine Klasse hinzuzufügen und dann in CSS diese Klasse zu nutzen, um Styles für deaktiviertes JavaScript zu überschreiben, sieht es in meinem Plugin jetzt so aus:

<noscript>
	<style>
		.lazyload {
			display: none;
		}
	</style>
</noscript>Code-Sprache: HTML, XML (xml)

Eigentlich ist diese Lösung ja recht naheliegend, mir ist sie vorher aber nie in den Sinn gekommen.