Scroll-margin and :target Selector
Have you ever clicked an anchor link only to have the targeted element end up hidden behind a fixed header? It's a common frustration, but there's a CSS property designed to address this issue – scroll-margin. By applying scroll-margin-top to an element, you can adjust its scroll position to keep it in view when navigated to with an anchor link. For instance, using the CSS rule
:target {
scroll-margin-top: var(--header-height);
}
With this snippet, any element that becomes the target of a navigation action (clicking an anchor link) will have a scroll margin applied equal to the height of the header. This ensures the element doesn't get obscured by a fixed header at the top of the page.
Moreover, the :target pseudo-class can be used along with the :is pseudo-class to apply a custom scroll-margin to different headings such as h2, h3, and h4. Here's an example:
:is(h2, h3, h4):target {
scroll-margin-top: var(--header-height);
}
And if you want to add some extra space, calculated based on the line height, you can use the calc() function:
:target {
scroll-margin-top: calc(var(--header-height) + 1lh);
}
The 1lh represents one line-height, ensuring that the scroll-margin is slightly larger than the header itself.
Color-scheme and User Preferences
In the world of web design, seamless integration with user preferences can significantly enhance the browsing experience. One such aspect is the theme of a website, which can be controlled using the CSS color-scheme property. The color-scheme property allows you to indicate which color schemes, dark or light, your website supports:
:root {
color-scheme: dark light;
}
Additionally, developers can utilize a meta tag to inform the browser of supported color schemes before even loading the CSS:
<meta name="color-scheme" content="light dark">
This preemptive declaration can lead to a smoother experience because the browser can prepare proper color schemes even before the rest of the site loads.
Still, one must be mindful that applying color-scheme to the root element or through a meta tag affects the entire document. However, with media queries, you can further tailor the appearance based on user preferences. For instance, applying a dark color scheme to a form if the user prefers dark mode:
@media (prefers-color-scheme: dark) {
form {
color-scheme: dark;
}
}
Another method to implement color scheme preferences is by using the :has() pseudo-class, which allows conditions within the styling rules. Here’s how you could apply a dark theme if the body contains a class of .dark:
:root:has(body.dark) {
color-scheme: dark;
}
Text-wrap for Aesthetic Text Alignment
Titles or headings with uneven line lengths can be visually unappealing and difficult to read. The CSS text-wrap property with the value balance aims to make text lines more evenly distributed, enhancing the readability and aesthetics of the text content:
h2 {
text-wrap: balance;
}
When the balance keyword is used, the browser attempts to create line lengths that are as similar as possible, ideally preventing awkward line breaks. This cosmetic feature is not only about style – our visual processing finds balanced line lengths more comfortable to read.
Moreover, text-wrap: balance is a progressive enhancement, meaning it will work in modern browsers and degrade gracefully in older ones without disrupting the user experience.
Consider signing up for the Bejamas newsletter to stay up to date with the latest tips and trends in modern web development. You'll get valuable insights on creating more user-friendly and aesthetically pleasing websites.
Tags: #webdesign, #CSS, #userexperience, #frontenddevelopment
https://bejamas.io/blog/modern-css-properties-your-website-must-have/