A rather geeky/technical weblog, est. 2001, by Bramus
Lea Verou shows a method to implement dark mode, not by swapping entire colors, but by simply changing their lightness The basic idea is to use custom properties for the lightness of colors instead of the entire color. Then, in dark mode, you override these variables with 100% – lightness. This generally produces light colors …
Continue reading “Dark mode in 5 minutes, with inverted lightness variables”
Over at CSS { In Real Life }, author Michelle Barker has detailed a clever way to style pseudo-elements (such as ::before and ::after) through JavaScript. In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. […] Luckily, CSS custom properties can help. 👉 If you set a custom …
Continue reading “Style Pseudo-elements with Javascript Using Custom Properties”
z-index stacking with the “CSS Stacking Context Inspector” DevTools extension
The Stacking Contexts Inspector is a DevTools extension for Google Chrome that allows you to analyse the stacking contexts available on a webpage. This extension will add a new panel to the DevTools and a new sidebar on the elements panel. Handy for when you’re having stacking issues. CSS Stacking Context Inspector →Stacking Contexts Inspector …
Linked below is yet another article urging one to use CSS Logical Properties. What caught my eye in this one is the fact that author Daniel Yuschick reworked his personal website to use them, as shown in this video below. Impressive! CSS Logical Properties Are the Future of the Web & I18N → In case …
Continue reading “CSS Logical Properties Are the Future of the Web & i18n”
Massive round-up over at Smashing Magazine listing a bunch of accessible front-end components: from tabs and tables to toggles and tooltips. A Complete Guide To Accessible Front-End Components →
In Table of Contents with IntersectionObserver on CSS-Tricks, Chris Coyier talks about sticky table of contents on long pages whose active state updates as you scroll. When talking about those, you can not not mention the wonderful Progress Nav by Hakim El Hattab. Final version of the progress nav! Switched to SVG and made it …
In this episode of GUI Challenges, Adam Argyle builds a Settings Component with sliders and checkboxes. In this post I want to share thinking on building a Settings component for the web that is responsive, supports multiple device inputs, and works across browsers. Tons of CSS-knowledge in there: CSS Nesting CSS Grid Custom Properties for …
:is()
Continue reading “Three important things you should know about CSS :is()“
Over at the Cloud Four blog, Paul Hebert digs into HSL colors Colors on the web are confusing — but they don’t have to be! The HSL format makes it easy for humans and computers to work with color. Included are some nice CodePen-hosted Color Pickers, such as this one: See the Pen HSLA Color …