Master CSS: 7+ Quick Tips for Better Styling
In this tutorial, we’ll explore several powerful and often overlooked CSS properties that can significantly enhance your web designs. You’ll learn how to control scroll behavior within elements, customize input caret appearance, style form elements with accent colors, leverage the `color-scheme` property for automatic dark mode adaptation, and simplify centering techniques with `place-content` and `place-items`. We’ll also touch upon some bonus tips for advanced styling and browser compatibility.
1. Control Scroll Behavior with `overscroll-behavior`
The `overscroll-behavior` CSS property allows you to control what happens when you reach the top or bottom of an element’s scrollport. By default, if you scroll to the end of a scrollable element and keep scrolling, the browser will continue to scroll the parent page. This can sometimes lead to an undesirable user experience, especially on mobile devices or with horizontally scrolling content.
To prevent this, you can set `overscroll-behavior: contain;` on the scrollable element. This confines the scrolling behavior to that specific element, stopping the scroll from propagating to the rest of the page.
Example:
.scrollable-element {
overscroll-behavior: contain;
}Warning: While useful, be cautious when using `overscroll-behavior: contain;` on tall elements. If users scroll to the very bottom of the element and there’s no visual indicator that they’ve reached the end, they might not realize they can’t scroll further, which can be frustrating. Always test this on various devices to ensure a good user experience.
2. Customize Input Caret with `caret-color` and `caret-shape`
You can easily change the color of the text cursor (caret) in input fields using the `caret-color` property. This is a great way to match your site’s branding.
Example:
input {
caret-color: orange red;
}Bonus Tip: `caret-shape`
For an even more customized look, Chrome currently supports `caret-shape`. You can change the caret from the default bar to `block` or `underscore`.
Example:
input {
caret-color: orange red;
caret-shape: block; /* or underscore */
}Note: `caret-shape` has limited browser support at the moment, primarily in Chrome. Use it as a progressive enhancement.
3. Style Form Elements with `accent-color`
The `accent-color` property provides a simple way to change the color of default form element controls like checkboxes, radio buttons, and range sliders. It’s an inherited property, so you can declare it high up in your CSS, like on the `body` or `html` element.
Example:
body {
accent-color: dark green;
}Key Features:
- Automatic Contrast: `accent-color` intelligently chooses the best contrast for the checkmark or indicator (e.g., white on dark backgrounds, black on light backgrounds).
- Good Support: This property has good browser support and works across various form elements.
This is an excellent property to include in your CSS resets for easy theming.
4. Implement Dark Mode with `color-scheme`
The `color-scheme` property is a powerful tool for automatically adapting your site to the user’s system preferences for light or dark mode. It can automatically adjust background colors, text colors, and even UI elements like scrollbars.
Example:
:root {
color-scheme: light dark;
}This declaration tells the browser that your site supports both light and dark color schemes. The browser will then apply its user-agent styles accordingly. If you don’t explicitly style certain elements (like text color or input backgrounds), they will automatically adapt.
Warning: While `color-scheme` is a great starting point, it’s often necessary to provide a manual toggle for users to switch themes, as system preferences don’t always align with user preferences for a specific website. You’ll likely need additional CSS and JavaScript to build a robust theme switcher.
Bonus Tip: `light-dark()` function
A newer, but less supported, alternative is the `light-dark()` CSS function. It allows you to specify two colors, one for light mode and one for dark mode. This offers more granular control but has lower browser support (around 85% as of recent checks, excluding older Safari versions).
Example:
.element {
color: light-dark(red, light blue);
}Tip: Emulating Color Schemes in DevTools
You can emulate different color schemes in your browser’s developer tools. Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on Mac) to open the command palette, then type and select “Emulate CSS media feature `prefers-colors-scheme`” and choose “light” or “dark” to test your implementations.
5. Center Content with `place-content` and `place-items`
Centering content in CSS has become significantly easier with Grid and Flexbox. `place-content` and `place-items` are shorthand properties that simplify this process.
- `place-items: center;`: Centers items both horizontally and vertically within their grid area. This is ideal when you have a single item in a grid container.
- `place-content: center;`: Centers the entire grid of content within the container. This is useful when you have multiple items and want to center the grid block itself.
Example (Grid):
.grid-container {
display: grid;
place-items: center; /* or place-content: center; */
/* height: 100vh; */ /* Example to show centering */
}Bonus Tip: `place-self` for Positioned Elements
When working with absolutely positioned elements, you can use `place-self` in conjunction with `position: relative` on the parent and `inset: 0;` on the absolutely positioned child to center it. `place-self: center;` is a shorthand for `align-self: center;` and `justify-self: center;`.
Example (Absolute Positioning):
.parent {
position: relative;
}
.child {
position: absolute;
inset: 0;
place-self: center;
}Note on Flexbox vs. Grid Alignment: Be aware that the axis for `align-content` and `justify-content` (and their shorthand `place-content`) can sometimes feel reversed compared to Flexbox when applied in a block context within Grid. This is a common point of confusion but is logical when considering the item vs. content alignment concepts.
Conclusion
These quick CSS tips, from managing scroll behavior to advanced centering techniques, can significantly improve your workflow and the quality of your web designs. Experiment with these properties to see how they can benefit your projects.
Source: More CSS quick tips (YouTube)
