We used Primer Prism to design several new color palettes, accelerating the creation of dark high contrast, light high contrast, and colorblind themes for GitHub. It allows us to: Create or import color scales; Adjust colors in a perceptually uniform color space; Check contrast of color pairs; Edit lightness curves across multiple color scales at once; Export color palettes to production-ready JSON.
Chrome joins Firefox and Safari in supporting individual properties for CSS transforms. The properties are scale, rotate, and translate, which you can use to individually define those parts of a transformation.
Container queries and :has() are a match made in responsive heaven. Luckily, both of these features are landing together in Chromium 105. This is a huge release with two highly-requested features for responsive interfaces!
There’s a well-established ‘best practice’ that CSS authors (as well as linters and minifiers) should remove units from any 0 value. It’s a fine rule in most cases, but there are a few common situations where it will break your code.
There are a few methods available to set a border on an element: border, outline, and box-shadow. Each approach comes with its own advantages and disadvantages–especially when it comes to animating the borders. The main reason to not use a proper CSS border is for animation purposes.
Not everyone will be able to use devices with a mouse, touch screen, or trackpad so it’s crucial all websites and apps can be navigated with a keyboard. Meaning that users can access and move between links, buttons, forms and other controls using the Tab key and other keystrokes.