Each pseudo element plays a distinct role in how the view transition animates. The browser does most of the heavy lifting though, which makes it a little hard to see what’s actually happening under the hood.
OK it’s HTML time! I love HTML time. We’re laying down a foundation that makes everything feel very real. Is HTML jumping the gun? Nah. The reason that we can jump to HTML right away is that it is common to any other future choice we make. As I mentioned, we might just stay in […]
The page scrollbar in web browsers serves a useful function: The vertical position of the scrollbar thumb tells the user where they are in the page (their scroll position), while the size (height) of the scrollbar thumb tells them roughly how long the page is. Because scrollbars are useful, they should be clearly visible. On […]
I find it fascinating how websites come to be. Especially websites with user interactivity and functionality, there are so many things to plan, build, and maintain, that it’s no wonder it easily makes for a whole career. Perhaps one of the most cliché introductory things to build on the web (or otherwise), is a to-do […]
I happen to have bookmarked a few new-to-me SVG tools that all seemed to fit together in interesting ways, so I thought I would have a play and share. Raster to SVG One type of these tools is Raster-to-SVG. That is, taking something like a photo and “vectorizing” it. I happen to have my multivitamin […]
Here’s what made the list this year: A little while back I measured the “popular vote” on features based on positive GitHub emoji reactions on the threads. So! How well did what was actually chosen stack up to the popular vote? Let’s see. Interesting results I’d say! It’s kind of all over the map. By […]
The <dialog> element in HTML is tremendous. We’ve got support across the board now, so using it is a smart plan. Just with basic usage, you get a centered modal dialog experience that comes up when you call it, a dimmed background, focus trapped within it, closes with the ESC key, and focus returning where […]
I feel like I haven’t seen a really nice web design inspiration gallery in a while so Design Spells is really doing it for me.
Design details that feel like magic.
I think it’s the focus on websites. 😍
Google has this little widget called Baseline. Here’s a screenshot example:
The idea is for it to accompany a web platform feature so you can have a sense of what browsers support it. Web developers are rightfully skeptical of new web tech, wanting to know when they can actually use a feature, so this is helpful.
But there is crucial information missing here. Developers don’t decide to use a feature only based on browser support, but also:
Dave posts about this common web component learning blunder. The blunder is… not using a framework. I’m very guilty of this myself. I was just commenting about how the lifespan of web components could be wonderfully long if we keep them dependency free, which theoretically we can because they are a native part of the platform. But…
If you take anything from this post, please understand this: web components (most likely) weren’t designed for you. Not to dissuade you from using them, but they were purposefully designed to be a low-level bare metal primitive for library authors to build on; they were designed to be used with a library, a thin layer of abstraction butter on top.
You’re supposed to use them with a framework on top. As Dave lays out, they buy a lot and cost little.
Some things you just can’t undo in CSS.
<div style="display: none;">
<div style="display: block;">
Still hidden.
</div>
</div>Code language: HTML, XML (xml)But, perhaps unintuitively, that does work with visibility.
<div style="visibility: hidden;">
<div style="visibility: visible;">
Visible
</div>
</div>Code language: HTML, XML (xml)Ben Nadel makes the point that pointer-events is another one of those properties that allows you to “undo” what a parent has set. It’s like pointer-events just cascades down to descendent elements and you override it, but some properties you just can’t come back from, like display above or opacity.
Developer news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.