After reading yet another blog post about JS classes being “just sugar for prototypal inheritance”, I’ve decided to write this post to help clarifying, one more time, why this statement is misleading; a post that hopefully explains what’s the difference and why it matters to understand it.
I also used to say this — echo’ing statements by others — but will refrain from doing so from now on 😅
To self-host Webfonts from Google Fonts — which you should — there’s google-webfonts-helper which you can use. They offer the entire Google Fonts catalog and provide a way to easily download the fonts and accompanying CSS snippets you need.
We all are only sometimes abled. Therefore accessible solutions benefit everybody. Treating accessibility not just as an afterthought to comply with regulations, but as an essential UX factor right from the start can lead to building better products and services.
This talk is about how to lay an accessible foundation within a design system to enable accessibility. It also covers what to start with, which aspects to take care of and the toolbox needed, using tangible examples (and cool graphics) to generate an instant understanding.
(I’ll show you further down this post how I know this 😉)
The ::file-selector-button selector Stefan mentioned targets only the <input type="button" …> you see there. Using it you can style the button, like he did.
🧐 If you’re paying close attention you might notice that the pseudo-element used is ::file-selector-button, whilst the pseudo attribute of the button reads -webkit-file-upload-button. More on that further down the post 😉
# How to use DevTools to peek inside <input type="file" />
In the Chromium DevTools we don’t get to see the two elements that make up <input type="file" />. That’s because this information as is hidden in the Shadow DOM.
Thankfully there is a way to have DevTools show them. To do so, open DevTools’ Settings, and under Elements check the option that reads “Show user agent Shadow DOM”.
🦊 Firefox or 🧭 Safari user? The DevTools in Firefox/Safari have this option enabled out of the box.
Once enabled you’ll see #shadow-root (user-agent) appear in the Elements Tree for all elements that are built that way (and there quite a few!).
While the ::-webkit-media-controls-play-button selector above works, there’s a catch though: it only works in Chromium based browsers, and this for several reasons:
Every browser engine has its own implementation for what makes up an <audio> element. Shown below is a comparison of the UI for the <audio> as seen in Firefox, Chromium, and Safari.
Whilst all implementation contain a play button, not all — for example — contain an element that indicates the current time. Styling that wouldn’t be possible.
Not all browser expose the same parts of the UI using pseudo-elements. When it comes to <audio> for example, only Chromium exposes parts of its UI. Firefox and Safari don’t expose any pseudo-element for <audio>
And even if they would, the wouldn’t use ::-webkit-media-controls-play-button for it.
Another aspect to take into account is that ::-webkit-media-controls-play-button is something that Chromium decided to use. This wasn’t discussed with any other browser vendor. As Thomas Steiner warns:
It’s like coding against a private API, though. The internals can change without prior notice. (In practice, things have been quite stable, but worth calling out.)
Stage-3 is the Candidate Stage where the feature is considered complete and only critical changes will happen based on implementation experience. If all goes well the proposal will advance to Stage 4 without any changes, after which it will to become part of the ECMAScript Specification.
Nathan Sebhastian has a good overview on how it compares to Date, along with some practical examples.
Creating and dealing only with immutable Temporal objects
Straightforward API for date and time computations
This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled on top to make Chromium happy 🤩
Get your 90s vibe on, as Pete LePage has took the version number 90 to the next level there … BRILLIANT! 🤩
Chrome 90 is rolling out now! There’s a new value for the CSS overflow property. The Feature Policy API has been renamed to Permission Policy. And there’s a new way to implement and use Shadow DOM directly in HTML. Plus there’s plenty more.
💁♂️ `overflow: clip` doesn't differ that much from `overflow: hidden`, except for the fact that `overflow: clip` does not create a scroll container.