These CSS Efficiency Tips You Need to Know!

Original author: knaagar

Original link: https://dev.to/devsyedmohsin/css-tips-and-tricks-you-will-add-to-cart-163p

Translation: Desert's End Wolf

Since we've already covered HTML and JavaScript tips, now it's time for CSS tips and tricks 💖✨

1. Print Media Query

You can use the print media query to style the printable version of your website.

@media print {
  * {
    background-color: transparent;
    color: #000;
    box-shadow: none;
    text-shadow: none;
  }
}

2. Gradient Text

h1 {
  background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

3. Modify Media Defaults

When writing CSS resets, add these properties to improve media defaults.

img,
picture,
video,
svg {
  max-width: 100%;
  object-fit: contain; /* preserve a nice aspect-ratio */
}

4. Column Count

Use the column property to create beautiful column layouts for text elements.

p {
  column-count: 3;
  column-gap: 5rem;
  column-rule: 1px solid salmon; /* border between columns */
}

5. Center an Element Using Position

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

6. Comma-Separated List

li:not(:last-child)::after {
  content: ",";
}

7. Smooth Scrolling

html {
  scroll-behavior: smooth;
}

8. Hyphens

The hyphens property tells the browser whether to use hyphens when breaking words at line breaks. You can completely prevent hyphens, control when the browser uses them, or let the browser decide.

9. First Letter

Avoid unnecessary span tags and use pseudo-elements to style your content. Along with the first-letter pseudo-element, we also have the first-line pseudo-element.

h1::first-letter {
  color: #ff8a00;
}

10. accent-color

The accent-color property allows you to recolor the accent color of form controls provided by the browser's default styles using a custom color value.

11. Image Filled Text

h1 {
  background-image: url("illustration.webp");
  background-clip: text;
  color: transparent;
}

12. Placeholder Pseudo-element

Use the placeholder pseudo-element to change the placeholder style:

input::placeholder {
  font-size: 1.5em;
  letter-spacing: 2px;
  color: green;
  text-shadow: 1px 1px 1px black;
}

13. Color Animation

Use the color rotation filter to change the color of an element.

button {
  animation: colors 1s linear infinite;
}

@keyframes colors {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

14. Center Using Margin

.parent {
  display: flex; /* display: grid; also works */
}

.child {
  margin: auto;
}

15. clamp() Function

The clamp() function clamps a value between an upper and lower bound. When the value exceeds the range between the minimum and maximum, it selects a value between the minimum and maximum. It takes three parameters: minimum, preferred, and maximum.

h1 {
  font-size: clamp(5.25rem, 8vw, 8rem);
}

16. Selection Pseudo-class

Style elements when selected.

::selection {
  color: coral;
}

17. Decimal Leading Zero

Set the list style type to decimal-leading-zero.

li {
  list-style-type: decimal-leading-zero;
}

18. Center Using Flex

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

19. Custom Cursor

html {
  cursor: url("no.png"), auto;
}

20. caret-color

The caret-color property defines the color of the insertion caret — the blinking vertical line that indicates where the user's input will be inserted in an editable area of the page.

22. resize Property

Set the resize property to none to prevent resizing a textarea.

textarea {
  resize: none;
}

23. only-child

The CSS pseudo-class :only-child matches an element that has no siblings. Equivalent selectors are :first-child:last-child or :nth-child(1):nth-last-child(1), though the former has slightly lower specificity.

24. Center an Element Using Grid

.parent {
  display: grid;
  place-items: center;
}

25. text-indent

The text-indent property sets the indentation of the first line of text in a block element.

p {
  text-indent: 5.275rem;
}

26. list-style-type

The CSS property list-style-type sets the marker of a list item (such as a disc, symbol, or custom counter style).

li {
  list-style-type: "🟧";
}