Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 20, 2023 05:00 pm GMT

My 5 favorite tips to improve your CSS

Hey folks!

CSS is magic for a lot of people. So I'm here to help. I wrote this article with my favorite tips. If you like it you'll read more tips in my newsletter.

border helps users with photosensitivity to find element boundaries

The wrong code. padding 10px, background-color red. The correct code. padding 8px, background-color red, border 1px solid transparent

background doesn't display with operating system contrast settings enabled. As a result, users won't element boundaries. The solution is to use border: 1px solid transparent

The power of CSS inheritance when defining line-height

The wrong code. line-height 1.5. It's applied to p, ul. The correct code. line-height 1.5. It's applied to body

Folks, I messed up. I forgot I can use CSS inheritance and add line-height to <body> instead of adding it to <p>, <h*>, <ul>, et al. separately

Don't forget to stop page scrolling when creating a custom scrollbar

The wrong code. height 100vh, overflow auto. The correct code. height 100vh, overflow auto and overscroll-behavior contain

Do you make the widget with custom scrolling? overscroll-behavior will care about your users by stopping page scrolling after scrolling your widget

We don't need to use 0 anymore to define margins and paddings

The wrong code. padding: 10px 0 15px, margin 0 10px 0 15px. The correct code. padding-block: 10px 15px, margin-inline: 15px 10px

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, padding-inline help us to make the same without 0

Its time to use a new way for centering elements with position: absolute

The wrong code. The parent has position relative. The child element has position absolute, top 50%, left 50%, transform translate(-50%, -50%). The correct code. The parent has display: grid, place-items: center. The child element has position absolute

Do you still use the old snippet to the center element with position: absolute using transform(-50%, -50%)? Its time to use a new alternative! Meet place-items: center

P.S. Don't forget to see more tips


Original Link: https://dev.to/melnik909/5-my-favorite-tops-to-improve-your-css-1p4p

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To