cash; Clever Counting CSS Queries; Crazy CSS Cursors
Programming note: I’m both headed out west to hang with #1 for a week, and am fairly devastated with what just happened to the U.S. and what’s left of the world order. Drops will likely be intermittent until I get back a week from this Thursday, and I’ll also very likely be taking an extended social media hiatus (save for the auto-posts of the Drop to Mastodon, my necessary promotion of the Storm⚡️Watch podcast episodes, and major cyber situations). If the week ends looking like it did at 03:30 ET, today, we’ll be featuring scads of resources on tech for security, safety, privacy, and community.
Hang in there, folks. Hang in there.
Also: no section header images today.
TL;DR
(This is an AI-generated summary of today’s Drop using Ollama + llama 3.2 and a custom Modelfile.)
Cash is a lightweight JavaScript library that simplifies DOM manipulation and provides jQuery-like functionality, weighing in at just 5.2KB when minified and gzipped (https://github.com/fabiospampinato/cash?tab=readme-ov-file).
The CSS :has() selector enables powerful quantity queries to style containers differently based on their number of child elements, facilitating more aesthetically pleasing layouts (https://css-tip.com/quantity-queries/).
Custom CSS cursors can be used to display a website’s favicon when hovering over external links, but this approach faces usability issues, security concerns, and performance implications that make it problematic for production use (https://shkspr.mobi/blog/2024/10/using-a-css-cursor-to-show-the-external-links-favicon/).
cash
While you 100% do not need jQuery, one has to admit the diminuitive $ syntax was both novel and helpful during that heyday period of the web. And, there are some things you could do succinctly in jQuery that are still a bit verbose/clunky in modern JS.
Cash is a lightweight JavaScript library designed to simplify DOM manipulation and provide jQuery-like functionality with a smaller footprint. It offers a concise API that closely mirrors jQuery’s syntax, making it an attractive option for folks who are familiar with jQuery but want a more streamlined alternative.
The library is particularly useful for projects that require basic DOM manipulation and don’t need the full feature set of jQuery. Cash weighs in at just 5.2KB when minified and gzipped, which is significantly smaller than jQuery’s 30KB. This size difference can lead to faster load times and improved performance, especially on mobile devices or in situations with limited bandwidth.
Cash supports modern browsers, including Chrome, Firefox, Safari, and Edge, as well as IE11 with a polyfill. It implements a subset of jQuery’s most commonly used methods, focusing on core functionality like element selection, traversal, manipulation, and event handling. This approach allows developers to leverage familiar jQuery patterns without the overhead of unused features.
It provides methods for adding, removing, and modifying elements in the DOM. Developers can easily create, insert, and delete elements, as well as modify their attributes and content. It also includes support for attaching and removing event listeners, as well as triggering events programmatically. This functionality is crucial for creating interactive web applications.
While not as extensive as jQuery’s AJAX implementation, Cash offers basic AJAX functionality for making HTTP requests and handling responses. It does maintain jQuery’s chainable syntax, allowing developers to perform multiple operations on selected elements in a single statement. This leads to more concise and readable code.
Integrating Cash into a project is pretty easy. Just include it via a CDN or install it using npm. The library exposes a global $ function, which serves as the main entry point for selecting elements and invoking Cash methods.
Clever Counting CSS Queries
Feel empowered to skip my summary blathering and just head to here and here for expanded expository on this clever use of element counting to facilitate more aesthetically pleasing layouts.
The CSS :has() selector enables powerful quantity queries that let you style containers differently based on their number of child elements. This capability is particularly useful when building content-aware components that need to adapt their layout based on the quantity of items they contain.
The basic pattern for quantity queries uses a combination of :has() and nth-child selectors:
.container:has(> :nth-last-child(3):nth-child(-n + 8)) { /* styles applied when container has between 3-8 children */}
Two particularly useful patterns handle even/odd numbers of children:
/* Even number of children */.container:has(> :last-child:nth-child(even)) { grid-template-columns: repeat(2, 1fr);}/* Odd number of children */.container:has(> :last-child:nth-child(odd)) { grid-template-columns: repeat(3, 1fr);}
These queries are super helpful when building responsive grid layouts that need to adjust based on content quantity. For example, you might want a different column arrangement when there are fewer than 3 items versus more than 6 items.
The real power comes from combining quantity queries with CSS Grid or Flexbox, allowing for truly adaptive layouts that respond not just to viewport size but to the actual content quantity. This creates more resilient components that maintain visual harmony regardless of their content amount.
Crazy CSS Cursors
Terence Eden has a fun post describing an intriguing CSS technique that uses custom cursors to display a website’s favicon when hovering over external links. The implementation leverages CSS’s cursor property to load a favicon URL from DuckDuckGo’s icon service, displaying it as the mouse cursor when hovering over links.
The approach combines two key components: CSS cursor styles and favicon services. The CSS cursor property accepts custom image URLs along with a fallback cursor value. DuckDuckGo’s icon service provides favicons by domain, making implementation straightforward with inline CSS like:
<a href="https://google.com/" style='cursor:url("https://icons.duckduckgo.com/ip9/google.com.ico"), auto;'> Visit this website</a>
While clever, this technique faces several significant challenges that make it problematic for production use. Custom cursors can create usability issues and frustrate users by making click targets less obvious. The approach doesn’t work on mobile devices, and not all users will recognize website favicons, potentially reducing rather than enhancing the user experience.
Loading remote images as cursors also introduces security considerations — if a referenced site is compromised, malicious images could be served. And, there are performance implications, as each cursor change triggers an additional HTTP request. Browser compatibility adds complexity, with different maximum supported cursor image sizes and inconsistent behavior across platforms.
For indicating external links, traditional approaches like appending “(Wikipedia)” or using subtle icons next to links remain more accessible and reliable. These conventional patterns benefit from widespread user familiarity and don’t suffer from the technical limitations and potential security issues of cursor-based solutions.
Still, it’s kind of fun to see it in action while marveling at yet one more clever thing you can do with just CSS.
FIN
Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️
https://dailydrop.hrbrmstr.dev/2024/11/06/drop-551-2024-11-06-web-slinging-wednesday/