CSS isn't magic
Subscribe
Sign in
Home
Archive
About
Latest
Top
Discussions
We don't need to use 0 anymore to define margins and paddings
I had to make a not logical thing, i.e. use 0 to define margins, paddings with opposite sides 😒 Now margin-block, margin-inline, padding-block…
Apr 24
•
Stas Melnikov
Share this post
We don't need to use 0 anymore to define margins and paddings
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
CSS without order dependencies
A problem with rule order with the same specificity is noticeable when we have one component with a few modifications. Folks, it can be avoided. CSS…
Apr 17
•
Stas Melnikov
1
Share this post
CSS without order dependencies
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
position: absolute frees us from using display: block
Are you used to defining display: block for ::before or ::after? Folks, there is no need to make it if you define position: absolute. Browsers make it…
Apr 10
•
Stas Melnikov
Share this post
position: absolute frees us from using display: block
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
Let's reduce the combination of the width and max-width properties to one
The min() function allows us to define values, and browsers will choose the smallest value from them. How can it be used? Define the width and max-width…
Apr 3
•
Stas Melnikov
Share this post
Let's reduce the combination of the width and max-width properties to one
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
March 2024
Reduce top: 0; right: 0; bottom: 0; left: 0 to one line!
Did you use the top, right, bottom and left properties to stretch elements over the full width and height of the parent? 🤔 Reduce it to one line with…
Mar 27
•
Stas Melnikov
Share this post
Reduce top: 0; right: 0; bottom: 0; left: 0 to one line!
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
The gap property smashes margins!
Stop, stop, stop defining margins to set the gap between a few elements. gap helps to make it in one rule 😎 ❤ Thank you so much, my sponsors: Tatiana…
Mar 20
•
Stas Melnikov
Share this post
The gap property smashes margins!
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
Сustom checkboxes are on steroids with :has()
The next-sibling combinator has one disadvantage. It's broken if the order of elements is changed. :has smashes this issue 💪 ❤ Thank you so much, my…
Mar 13
•
Stas Melnikov
1
Share this post
Сustom checkboxes are on steroids with :has()
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
focus-within removes fragility of the next-sibling combinator
The next-sibling combinator has one disadvantage. It's broken if the order of elements is changed. The reliable alternative is focus-within 🔥 ❤ Thank…
Mar 6
•
Stas Melnikov
1
Share this post
focus-within removes fragility of the next-sibling combinator
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
February 2024
box-shadow isn't the replacement for outline
box-shadow might be hard visible or even hidden for users in a lot of cases. For example, it won't be hidden in the high contrast mode. So outline is…
Feb 28
•
Stas Melnikov
Share this post
box-shadow isn't the replacement for outline
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
px doesn't respect browser font size settings
There is a dispute between px fans vs rem fans. If you wanna allow font size increase with browser settings your choice is rem 💡 ❤ Thank you so much…
Feb 21
•
Stas Melnikov
Share this post
px doesn't respect browser font size settings
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
When is using display: block for ::before or ::after unnecessary?
Folks, did you define display: flex or display: inline-flex to the parent? Yeap? Stop defining display: block for ::before or ::after. Browsers make it…
Feb 14
•
Stas Melnikov
2
Share this post
When is using display: block for ::before or ::after unnecessary?
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
Focus styles aren't equivalent to hover styles
Focus styles can't be equal to hover styles because in this case users have to understand a focus state for every element. It's why outline is the most…
Feb 7
•
Stas Melnikov
Share this post
Focus styles aren't equivalent to hover styles
cssisntmagic.substack.com
Copy link
Facebook
Email
Note
Other
Share
Copy link
Facebook
Email
Note
Other
This site requires JavaScript to run correctly. Please
turn on JavaScript
or unblock scripts