This content originally appeared on Level Up Coding - Medium and was authored by Arnold Gunter
The ultimate enhanced and upgraded version
Since the last article on CSS-oneliner (read it here) had to undergo some criticism, I thought I’d take the tips to heart and write a new one.
Today I’m giving you are the ultimate top 10 one-liners that really make a difference and stand up to quality control.
I have spent days researching and testing. It is worth reading. Believe me, if you haven’t, something is missing in your life.
So without any further ado let’s get started!
1. Aspect Ratio
The first one-liner defines the aspect ratio of an element. This makes it easy to automatically adjust the height responsively to a defined width (or vice versa).
.box {
width: 90%;
aspect-ratio: 16/9;
}2. Logical Properties
Tired of using margin-left, margin-right, margin-top, and margin-bottom?
Try this instead!
.box {
margin-block: 5px 10px; /* 5px top margin, 10px bottom margin */
margin-inline: 20px 30px; /* 20px left margin, 30px right margin */
}The same method works for padding as well.
.box {
padding-block: 10px 20px; /* 10px top/bottom padding, 20px bottom padding */
padding-inline: 15px 25px; /* 15px left padding, 25px right padding */
}These properties adjust automatically based on the text direction (e.g., left-to-right or right-to-left), making your code more readable, shorter, flexible and international-friendly.
3. Universal box sizing
Probably one of the most forgotten properties to set. It simply defines how a box reacts to the border and padding of the elements within it.
By default, the box-sizing property is set to content-box, which means that the width and height of an element only include its padding and border. This can cause unexpected layout problems.
To fix this, you can simply add the following one-liner to your CSS:
*, *::before, *::after {
box-sizing: border-box;
}4. Smooth Scroll
One of my favourite features in all of CSS.
It enables smooth scrolling for the whole page, improving the user experience when navigating to anchor links.
Just check this out:
html {
scroll-behavior: smooth;
}5. Vertical Writing Mode
This property rotates text to run vertically from right to left, extremely useful for special design elements or languages that read vertically.
.vertical-text {
writing-mode: vertical-rl;
}6. Truncating Text with Ellipsis
Prevents long text from overflowing its container, replaces excess text with an ellipsis (…) for a clean look.
Especially useful for text/link previews or other overflowing text.
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}7. Place-items
place-items is a shorthand to set both align-items and justify-items at once. By setting it to center, both align-items and justify-items are set to center.
.box {
display: grid;
place-items: center;
}8. Limit the width of text within the content
This allows the width of a line of text to be specified in characters, making it clearer and easier to read.
p {
max-width: 100ch;
}9. Styling Placeholder Text
Styles the placeholder text in input fields.
::placeholder {
color: #999;
font-style: italic;
}10. Accent color
This CSS rule applies the accent color uniformly across the entire webpage for interactive elements like links and buttons.
This means you don’t have to style each element individually every time you want to use this color, ensuring consistency throughout your site.
body {
accent-color: green;
}These one-liners encapsulate the essence of practical CSS, offering solutions to common layout and styling challenges with minimal code. By integrating these snippets into your daily workflow, you can enhance the aesthetics and functionality of your web projects efficiently and effectively.
Happy coding!
Top 10 CSS one-liners I love to use was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Arnold Gunter
Arnold Gunter | Sciencx (2024-07-18T14:34:04+00:00) Top 10 CSS one-liners I love to use. Retrieved from https://www.scien.cx/2024/07/18/top-10-css-one-liners-i-love-to-use/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.