Well, the latest news I remember right now is not about the CSS itself, rather than about image formats. The new exciting AVIF is supported by Firefox 93 as well as in Chrome a bunch of versions back. The main problem for me is lack of support of AVIF image format in Safari. It seems like the Safari is going to be a new IE when comes to rendering innovations.
Okay, back to the CSS code. A few tips a collected during this month:
aspect-ratio
Very simple way how to keep preferred aspect ratio of the box and extremely useful when using with elements like iframe. How to use it?
.box{ aspect-ratio: 16/9; }
.box iframe{ max-width: 100%; height: auto; display: block; }
Currently supported in everywhere except Internet Explorer. More information can be found in New aspect-ratio CSS property by Una Kravets.
Double border with outline
Do you need double borders for you button or other elements? Try this:
.button{ border: 1px solid #0066cc; outline: 1px solid #0066cc; outline-offset: 2px; }
Outline property should be supported in all major web browsers, including Safari.
Smooth scrolling
So you have links pointing to anchors or elements IDs and your page scroll immediately to them whenever someone click the links. But what about something smooth? Like slower scrolling to the target? Just use smooth scroll behavior for root html element.
html{ scroll-behavior: smooth; }
Ideal font-size?
Big font-size is good for large display but form smaller one you must set different breakpoints and set different font-size. I know it. Much better solution may be linear scaling of your font-size using clamp() function together with viewport width:
h1{ font-size: clamp(1rem, 5vw, 2rem); }
Checkboxes color
There is a popular technique how to style checkboxes using :before pseudo elements and images as background. In many cases you will be happy with changing color for checked elements. In this case is accent-color you friend:
input{ accent-color: green; }
Natural shadows? No problem
We all know everything in HTML is a rectangle. Most of the elements since we have SVG. It also means that settings a shadow for transparent image results in unnatural border around its rectangle. Much better results can be achieved using the filter:
img{ filter: drop-shadow(10px 10px 5px grey); }
When the placeholder is shown
You surely know :placeholder pseudo element for styling the default empty value or help text for form inputs. You can also use :placeholder-shown for styling the whole elements when the placeholder is currently visible and the user did not type anything yet.
input:placeholder-shown{ border: 2px solid red; }
