A common need when writing vanilla JavaScript is to find a selection of elements in the DOM and loop over them. For example, finding instances of a button and attaching a click handler to them.
const buttons = document.querySelectorAll(".js-do-thing");
// There could be any number of these!
// I need to loop over them and attach a click handler.
There are SO MANY ways to go about it. Let’s go through them.
forEach
forEach is normally for arrays, and interestingly, …
The post A Bunch of Options for Looping Over querySelectorAll NodeLists appeared first on CSS-Tricks.
Say you have a stylesheet linked up like this:
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
But as the page loads, you’re on a desktop browser where the screen is 1753px wide. The browser should just skip loading that stylesheet entirely, right? It doesn’t. Thomas Steiner explains:
it turns out that the CSS spec writers and browser implementors are actually pretty darn smart about this:
The thing is, the user could always decide to resize their window (impacting width, height, …
The post Why Browsers Download Stylesheets with Non-Matching Media Queries appeared first on CSS-Tricks.
Explore what the world is searching. Enter a search term or a topic.
