Scribd
Upload
38 views9 pages

?CSS Tricks That Save Time!

This document provides CSS tips to enhance workflow and simplify styling tasks. Key tricks include using the aspect-ratio property for responsive images, one-line centering with grid, scrollbar styling, text truncation, and creating responsive grids without media queries. It also introduces the :has() selector for smarter element selection based on child presence.

Uploaded by

m.wakiullah 1212
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 views9 pages

?CSS Tricks That Save Time!

This document provides CSS tips to enhance workflow and simplify styling tasks. Key tricks include using the aspect-ratio property for responsive images, one-line centering with grid, scrollbar styling, text truncation, and creating responsive grids without media queries. It also introduces the :has() selector for smarter element selection based on child presence.

Uploaded by

m.wakiullah 1212
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Frontend Tips M.

Ahmed Sajid

CSS Tricks
That Save
Time 🚀
Write cleaner, faster, and
smarter CSS!

Let’s Swipe Right


Frontend Tips M. Ahmed Sajid

Introduction
CSS is powerful, but
sometimes we
overcomplicate things.
Here are some tricks that
will save time and
improve your workflow.
Let's dive in! 💻✨
Let’s Swipe Right
Frontend Tips M. Ahmed Sajid

Aspect Ratio
Trick
Tired of using padding hacks
to maintain aspect ratios? Use
this simple property!
img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
🎯 Keeps elements responsive
without extra CSS!

Let’s Swipe Right


Frontend Tips M. Ahmed Sajid

One-Line
Centering
No more flexbox struggles!
Center anything easily:
.parent {
display: grid;
place-items: center;
height: 100vh;
}
🔥 Works for both horizontal &
vertical centering!

Let’s Swipe Right


Frontend Tips M. Ahmed Sajid

Scrollbar
Styling
Make your scrollbars match your design!
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background: #3498db;
border-radius: 5px;
}
✨ A small touch that enhances UI
aesthetics!

Let’s Swipe Right


Frontend Tips M. Ahmed Sajid

Text
Truncation
Prevent long text from breaking
layouts with ellipsis:
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
📌 Great for showing previews
without wrapping issues!

Let’s Swipe Right


Frontend Tips M. Ahmed Sajid

Responsive
Grid
Responsive Grid Without Media
Queries. Let grid handle
responsiveness for you!
.container {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(200px,
1fr));
gap: 20px;
}
🎯 No need for media queries—
grids adapt automatically!
Let’s Swipe Right
Frontend Tips M. Ahmed Sajid

Using :has()
Select elements based on child
presence without JavaScript!
.card:has(img) {
border: 2px solid #333;
}
⚡ Requires modern browsers but
makes styling smarter!

Let’s Swipe Right


Frontend Tips M. Ahmed Sajid

Find this
useful?
Like and share this post with
your friends. Click the "save"
button to keep it.

Let’s Connected

You might also like