css

Today I learned that browsers now support an accent-color property on some form inputs for customizing their color. This is especially nice for checkboxes and radio buttons because now I no longer need any workarounds I’ve used in the past to make a decent-looking checkbox. It will also ensure that it’s accessible by automatically adjusting the color of the check to an appropriate contrast: <input type="checkbox" class="yellow" checked /> <input type="checkbox" class="purple" checked /> <style> input { display: block; width: 30px; height: 30px; } input....

In CSS, the stacking context can impact which elements display on top of each in addition to the z-index. So if you end up in a situation where cranking up the z-index doesn’t seem to work, the stacking context is likely the issue. I technically learned this a while ago but completely forgot about it until I was just reminded about it by a coworker dealing with this issue. Josh Comeau explains it well in his post on stacking contexts....