Episode Sponsor - Magic Mind & Wix Studio
Magic Mind returns as an episode sponsor this week and we thank them for their support!
50% off! Black Friday Magic Mind Deal!!!
Valid until December 6, 2024!
Get 50% off with our link - https://magicmind.com/htmlpodbf
Limited time Magic Mind deal for our listeners!
https://magicmind.com/HTMLPOD20 - 20% off for one-time purchases and subscriptions (Use the link and code!)
Code: HTMLPOD20
Wix Studio: The Web Platform for Agencies and Enterprises
Wix Studio is the new web platform tailored to designers, developers and marketers who build websites for others or for large organizations. The magic of Wix Studio is its advanced design capabilities which makes website creation efficient and intuitive.
Check out Wix Studio today.
How to support the show
Patreon
Prices subject to change and are listed in USD
- Support the show from as little as ~$1/month
- Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
- Help support the HTML All The Things Podcast: Click Here
Show Notes
Introduction
In the standard stack of HTML, CSS, and JavaScript - CSS and JS fight for the crown on which one makes web pages look and act the best. In general JS makes the web interactive in simple and complex ways, while CSS makes the web look pretty in a largely static way.
Minimalist web designers have always struggled with calling on JS on their web pages because of the hit to performance - instead preferring to offload as much as they can to the more performance-friendly CSS.
CSS does have a lot of non-static properties and methods, most notably transitions and animations. But over the years, we’ve seen the rise of additional ways to make web pages interactive using just CSS.
This episode isn’t going to be a comprehensive timeline of which CSS features were released when, but instead will focus on what I’ve been using and/or researching lately in the world of interactive CSS.
JavaScript makes the web interactive
- JavaScript is the go-to for interactivity on the web
- Examples:
- If there a blog post is published on December 25, change the background color to red and green for some holiday flair
- Based on screen size, change the animations/transitions that are in-use on the page so that it continues to look good and is performant
CSS makes the web look good
- CSS styles take the basic skeletal structure that HTML provides and makes it look good
- CSS adds alignments, enables responsive design (complimented by JS in complex scenarios), sets colors, adjusts fonts, etc.
Common Methods of CSS Interactivity
- :hover, :focus, and other pseudo-classes.
- Example: Commonly used to change the shadows and colors applied to buttons when the user hovers their cursor over them
- CSS animations and transitions.
- Example: Commonly used to smooth over simple transitions alongside :hover such as smoothing over a change to a drop shadow when hovering your cursor over a button
- Media queries and responsive design.
- Media queries really unlock the power of responsive design without using JavaScript to detect screen sizes, viewport widths, and more
- Example: Show and hide a desktop-style navbar and replace it with a mobile version when the screen size shrinks to a particular breakpoint
New (to me) CSS Interactivity
Reminder: Some of these are relatively new (ie :has()) while others I’ve known about for years, but have been leveraging a lot recently, or reading up on.
:has() Selector:
- CSS now supports parent-child relationships.
- Example: Style a parent container based on the state of its child (e.g., highlight a card when an input inside it is focused).
CSS Variables (--variables):
- Dynamically update styles using JavaScript and CSS variables for interactive effects.
- Example: A slider that changes the color theme or size of elements.
Container Queries:
- Adapt components based on the size of their container, not just the viewport.
- You can name containers so that you can address multiple different ones in different ways
- There are also container units for container specific sizing - the sizing is relative to the dimensions of the containing element
- Example: You have content boxes that show each blog post in a list on your site. You may have very specific font sizes required based on the size of the content boxes (assuming they grow-shrink as the screen size changes)
- Personal Caveat: A couple years ago I first heard about container queries and I personally struggled and still struggle with the use-case for containers. I find that most of the time I need to tie everything to the size of the screen anyways, so I just end up using @media queries. But lately I’ve been researching container queries more and wondering whether I can use them on more complex or pixel-perfect design layouts.
Scroll-linked Animations (e.g., @scroll-timeline):
- Smooth animations triggered by scroll position
- Example: Fading an element in as you scroll down the page
- This at-rule is on my radar, but is currently not implemented in Safari desktop or Safari iOS, and is behind a flag in Firefox - so it cannot be used reliably in production
Attribute Selectors
- Select and style elements based on the presence, value, or partial value of an attribute.
- Examples:
- [disabled] — Style buttons or inputs that are disabled.
- [data-active="true"] — Apply styles only when an element has a specific data-* attribute.
- [href*="example.com"] — Target links containing a specific URL substring.
- Real-World Use Cases:
- Highlighting form fields with validation errors: [aria-invalid="true"].
- Styling navigation links dynamically based on state: [data-current="page"].
- Adjusting components based on data attributes for conditional rendering.
Interactivity Showdown: CSS vs JavaScript
CSS Attribute Selectors vs. JavaScript:
How attribute selectors can remove the need for adding and removing classes dynamically.
Combining attribute selectors with :hover or :focus for even more interactivity.
CSS vs. JavaScript: Who Wins the Interactivity Battle?
Where CSS shines:
- Simplicity for small tasks (e.g., hover effects, basic animations).
- Better performance for visual changes
- The GPU can be utilized depending on browser settings (hardware acceleration) and what the CSS is using (ie 3D transforms, filters, and more can invoke the use of the GPU)
- Accessibility improvements
- Examples:
- :focus-visible for keyboard users
- relative font-size units
- control contrast between colors (Note: CSS doesn’t regulate this, the user does, but it is easily settable in CSS)
Where JavaScript still reigns:
- Complex logic, event handling, and data-driven interactions.
- Scenarios requiring API calls or DOM manipulation (ie adding new elements to pages, and filling those elements with complex info)
- Real-World Examples
- Building a responsive, interactive card component with only CSS.
- Creating a dynamic accordion or tabs using the :checked pseudo-class and :has().
- Scroll-triggered animations using native CSS.
- Using attribute selectors to style elements dynamically based on attributes (e.g., form field states or data-driven elements).
Debate: Should Developers Be Concerned?
- What does this mean for JavaScript-heavy frameworks?
- Matt’s Opinion: I think there are enough use-cases where even though JS could be used, or CSS could be used - the developer may choose to go one way or the other (or even a hybrid between the two). I do not think that JS-heavy frameworks will be hurt by CSS becoming more powerful and interactive
- Will CSS become too complex for its own good?
- Matt’s Opinion: As the web’s use-cases continually grow, frameworks will need to focus on new features and capabilities that browsers become capable of and users demand out of their web apps. As these complexities grow, offloading some work from JS to CSS will allow for JS to tackle the cutting-edge, while CSS keeps the page performant. Also CSS is a skill of many web designers, so web developers can focus on technical features, while the designer may be able to get more interactivity done on their side.
