Category Archives: Original Content

Identify and Extract Pseudo-Element Selectors from built-in HTML Elements using DevTools

 Recently Stefan Judis shared how to style the browse button of a file selector using the ::file-selector-button pseudo-element TIL – you can style the file input "browse" button using `::file-selector-button`.😲Supported in Firefox, Chromiums starting with 89 & Safari Tech preview.🔗 MDN: https://t.co/56jACY9qK1🔗 Compat data pr: https://t.co/vrFNS4LdISVideo alt: Example of a styled browse button. pic.twitter.com/3YQ0njkX0J— Stefan …

Continue reading “Identify and Extract Pseudo-Element Selectors from built-in HTML Elements using DevTools”

Read Post →

Three important things you should know about CSS :is()

 Back in 2019 I shared how the CSS :is() selector will simplify things when writing CSS. What I didn’t know back then, and only have learnt quite recently, are these three important facts about CSS :is(): The selector list of :is() is forgiving The specificity of :is() is that of its most specific argument :is() …

Continue reading “Three important things you should know about CSS :is()“

Read Post →

Control the behavior of JavaScript imports with Import Maps

Shipping in Chrome 89 are Import Maps, which allows control over what URLs get fetched when importing modules. Let’s take a look at this very welcome addition. When importing ES Modules (on the web), you need to refer to them using their full filenames or URLs: import moment from “/js/moment/moment.js”; import { partition } from …

Continue reading “Control the behavior of JavaScript imports with Import Maps”

Read Post →

The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 1)

 The “Scroll-linked Animations Specification” is an upcoming addition to CSS that defines a way for creating animations that are linked to a scroll offset of a scroll container. Let’s take a look at how it works and what results we can achieve with it.

Read Post →

Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements

Part of the CSS Pseudo-Elements Level 4 Specification are ways to style spelling and grammar errors. By default spelling errors — words you have mistyped — get a red dotted underline, thanks to the ::spelling-error pseudo-class selector you can tweak that. Grammar errors — such as a missing capital letter at the beginning of a …

Continue reading “Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements”

Read Post →