Various 4
Random CSS and related stuff, mostly from Kevin Powell’s Youtube channel.
1. Finding elements that overflow
Dev tools tells us which elements are overflowing but it can be hard to see. Here is a way to make them visible. If you’re already using the *, all selector just had a border to every element. Comment it out apart from when you want to see it.
*, *::before, *::after {
box-sizing: border-box;
border: solid 2px lime;
}
Or instead of a border add a low opacity background colour.
background: hsl(0 100% 50% / 0.1);
2. Adding media queries to the link element
This is a way to let the browser choose which favicon to use depending on whether the user is using dark mode or not.
<link rel="icon" href="white-logo.png" media="(prefers-color-scheme: dark)" />
<link rel="icon" href="black-logo.png" media="(prefers-color-scheme: light)" />
3. Using input type=“text” for numbers
Rather than use the <input type="number">, which has annoying often irrelevant arrow icons on the right side, we can use <input type="text"> with inputmode="numeric" and pattern="[0-9]+" attributes.
4. min() function
This is a good way to set the width of a flexible container:
.wrapper {
width: min(926px, 100% - 4rem);
}
And you don’t need the calc() function inside of min() and other math related CSS functions.
5. scrollbar-gutter
A new property is scrollbar-gutter. When set to stable this maintains the space taken up by the scrollbar, even when the scrollbar disappears.
It can stop the annoying page reformatting each time a change happens requiring a scrollbar.
body {
scrollbar-gutter: stable;
}
6. overflow: clip;
The clip value for the overflow property is similar to overflow: hidden except unlike hidden no scrollbars are added.
7. overscroll-behaviour
This is good when there are multiple elements inside one another with scroll bars and you’re scrolling with a mouse wheel. The default value is auto which means if you scroll down to the bottom on an inner element the outer element will then start scrolling. This can be annoying, probably in most situations. However if set to overscroll-behaviour: contain scrolling will only occur on the element.
It can also be set to none which prevents scrolling.
This will disable the native browser naviation including ‘pull to refresh’ gesture and horizontal swipe naviation. - MDN
When the container has an orange outline the scrolling of the outer element will be locked when using a mouse wheel to scroll through the inner box.
Although only set on this container it also prevent the page scrolling too.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla tempore iure voluptatem aliquid earum delectus dolorum, et dolor, saepe dolores amet architecto ut repellat, harum accusamus temporibus hic fuga consequatur.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, ad perspiciatis facilis, debitis cumque, consequuntur dolor ea dolore quas exercitationem molestias fugit veritatis perferendis odio incidunt obcaecati pariatur est eligendi?
Eos error pariatur aliquam tempore voluptas id soluta recusandae perspiciatis tenetur nesciunt incidunt, aut sint? Fugit nemo inventore officiis eligendi, ad dolores obcaecati aperiam accusamus consectetur. Saepe nulla sed nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, eum sequi atque at dicta et. Deleniti, ea beatae eum placeat est cumque quod possimus tempore non sit, omnis odio laborum.
overscroll-behavior: auto
text-align-last
This simple property aligns the last line only in a block of text. If there is only one line of text then that line will be aligned accordingly. The text-align-last can take the same values as text-align. That is the standard left, right, center and justify as well as the more modern start and end (same as left and right). Here it’s set to center which might be useful for a block of justified text like this one.