Are you ready to improve your CSS skills with some of the latest tips and tricks? CSS is always changing, and these new features will help you write cleaner, more efficient code while making your websites look great. Here are some useful CSS tips, complete with examples on CodePen that you can try right away!
1. 👇 Footer Stuck at the Bottom
Sometimes, content on your page is not enough to push the footer to the bottom of the viewport. You can use this simple CSS solution to make sure the footer stays at the bottom.
Check out the code on CodePen.
2. 🧐 Media Queries with Pointer Precision
Make the user experience better by changing your UI based on the type of pointing device. With the pointer media query, you can adjust styles depending on whether the user has a precise pointer (like a mouse) or a coarse one (like a touchscreen).
Example on CodePen.
3. 💡 The Power of inset
CSS inset is a shorthand for top, right, bottom, and left. This property is useful for positioning elements easily, making your layout more readable and reducing extra CSS.
See how inset works in this CodePen.
4. 💥 Using :empty for Placeholder Text
The :empty pseudo-class lets you style an element if it has no children. It’s useful for adding placeholder content, like when an image isn’t loaded.
Try it out on CodePen.
5. 🚀 Styling Elements with :where()
The :where() pseudo-class is great for applying styles to multiple elements without adding specificity. It’s perfect for resets or for general styling without affecting more specific styles.
See it in action on CodePen.
6. 🛠️ Consistent Numeric Width with font-variant-numeric
Do you need numbers to line up perfectly, like in tables or financial data? Use font-variant-numeric: tabular-nums; to make sure each number takes up the same space, making your data easier to read.
View the example CodePen.
7. 💡 Multiline Ellipsis for Overflowing Text
Preventing text overflow and making sure it looks good is important for UI design. You can use -webkit-line-clamp to limit text to a fixed number of lines and add ellipsis (...). It’s a simple way to handle multiline text overflow.
See how it’s done on CodePen.
8. 🔄 Independent Transform Properties
Instead of writing all transformations (rotate, scale, translate) together, you can now apply each one separately using new properties like scale, rotate, etc. This makes your code easier to read and change.
Check the example on CodePen.
9. 👁️ The :has() Selector as a Parent Selector
The :has() selector is like the parent selector we’ve always wanted. You can now style an element based on whether it contains a specific child. This makes dynamic and interactive styling much easier.
Explore the example on CodePen.
10. 🌱 Using System Colors in CSS
CSS system colors let you match your site’s appearance with the user’s operating system or browser theme. This is great for creating visually consistent and accessible websites.
Check out the example CodePen.
11. 🌄 Container Queries for Advanced Responsiveness
With Container Queries, you can style elements based on the size of their container instead of the viewport. This means truly component-driven styling, allowing more flexible and context-aware responsive designs.
See Container Queries in action on CodePen.
12. 💧 Set Your Form Styles with accent-color
The accent-color property lets you style native form elements like checkboxes and radio buttons easily to match your design. This helps make sure all form elements look consistent.
Check the example CodePen.
13. 📏 Responsive Font Size with clamp()
The clamp() function is perfect for creating responsive font sizes that adapt to different screen sizes. It lets you set a minimum value, a preferred value, and a maximum value all at once. This ensures the text remains readable on all devices.
Check out the example on CodePen.
🛠️ Feel free to experiment with the examples on CodePen and see how they can make your CSS more dynamic and elegant. If you have any other modern CSS tips or know about new CSS features, share them in the comments! 📈
Top comments (0)