Introduction: Elevating Your CSS Game
Hey there, fellow UI developers! Are you ready to take your CSS skills to the next level? Whether ...
For further actions, you may consider blocking this person and/or reporting abuse
Why are common things called tricks and hacks?
For the clicks... obvi.
hahaha, I also have same doubt
Its Depends upon experience, for beginners its Tricks, for experienced its common things.
Good article. I recognize that you're probably constrained by what you can show on a page on Dev.to, but maybe next time screenshots of the applied styles accompanying each would be great or even a link to an interactive page deployed to GitHub or one of the online sandbox sites would give it even more pizzaz.
Thanks ! I am glad you like it.
Yes, Better to provide a link for demo of the snippets
Sure
Hey @nnnirajn!
A lot of pure CSS solutions have huge problems. For example, pure CSS tooltips from your article.
The :hover pseudo-class matches when user hover on an interactive element. But it stops matches immediately when users make the cursor away.
Users with tremor will see infinite flashing. It's why the good solutions is to add a few seconds delay with JS.
Thanks for the suggestion !!
This is a neat article, but I wish there was a bit more detail, especially at the beginning (things like Flexbox don't have a ton of documentation in the article). Overall, though, these are good tips, and I would love to use the tooltips especially someday.
I am glad you like it !!
No need for the input trick for accordion anymore. We have details and summary tags with name attribute to manage open state across multiple elements. It is also possible to do native css animations on height and display properties
Dude, why most of things in the article its common "tricks" from similar articles as "How to learn CSS in 2024 for beginners" ? And why you aren’t talking about media queries or custom select input with cross-browsing ? If we are talking about "super advanced tricks hacks" 😂
I will try to write an detailed article on media queries and custom select input with cross-browsing.
This article isn't really tricks. These are all common CSS.
Its Depends upon experience, for beginners its Tricks, for experienced its common things.
"Wow, this is an incredibly well-structured and insightful post! Thank you for sharing such practical CSS tricks – I especially loved the sections on CSS variables and Flexbox. They’re such game-changers for simplifying and maintaining stylesheets.
The example with the pseudo-elements for a quote block is so creative – I've been meaning to experiment with them more. The CSS-only accordion idea is also brilliant! It's amazing how much can be achieved without JavaScript these days.
Do you have any favorite resources or tools for experimenting with CSS shapes or creating cross-browser custom scrollbars? Those are areas I’d love to dive deeper into.
Thanks again for this amazing breakdown. Looking forward to seeing more from you!"
Thank you so much for your comment !!
Thank you!
For accordion you can use summary and detail tags which also make for better semantics and accessibility.
Yup we can use detail tags also
I agree, there is no need to "hack" with css. See the spec
Its Depends upon experience, for beginners its Tricks, for experienced its common things.
I am glad you like it
A great cheat sheet !
Thank you !!
Wow CSS
Thank you !
Hi Niraj Narkhede,
Top 5, very nice and helpful !
Thanks for sharing.
I am glad you like it.
Thank you !!
Very helpful 👍
Thank you !!
great article, although it'd be great if you also provided a visual illustration to each example.
Thank you !!
Awesome,Great article.
Thank you !!
Great article and nice tips. Thank you
Thanks you !!
Great tips. Thanks
Thank you !!
Thank you. Very very useful demo. 👍🏼
Totally useless unless you're a complete newbie.
It means it totally useful for newbie.