CSS features you should know

Today I want to talk to you about five cool CSS features that will probably change the way you write styles. If you're learning CSS, these features are going to make your life easier. Let's look at them one by one, with examples that show how we would do things "by hand" and how we can simplify them with these tools.

1. calc(): Perform calculations directly in your CSS?

Have you found yourself manually adding or subtracting values ​​to adjust the size of an element? With calc(), you can do it directly in your style sheet, without the need for prior calculations.

Example without calc():

.container {
  width: 70%;
  margin: 20px;
}

Example with calc():

.container {
  width: calc(70% - 20px);
  margin: 20px;
}

With calc(), you can combine different units of measurement, such as percentages and pixels, to achieve more flexible and adaptable designs.

---

2. repeat(): Simplifies the creation of grids?

If you use Grid Layout, you've probably found yourself writing repetitive columns or rows. With repeat(), you can avoid redundant code and improve readability.

Example without repeat():

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
}

Example with repeat():

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Lo mismo, pero más limpio */
}

repeat() is ideal for complex grids or grids with a defined pattern

---

3. min(): Controls the maximum dynamic size?

min() allows you to specify the smallest size among several values, perfect for responsive designs.

Example without min():

.box {
  width: 50vw; /* Podría ser demasiado grande en pantallas grandes */
}

@media (min-width: 600px) {
  .box {
    width: 300px; /* Tamaño fijo en pantallas más grandes */
  }
}

Example with min():

.box {
  width: min(50vw, 300px); /* Escoge automáticamente el valor más pequeño */
}

With min(), you reduce media query rules and achieve a more fluid design.

---

4. clamp(): Full size control in responsive layouts

clamp() allows you to define a range of minimum and maximum sizes, ideal for fonts and elements that need to scale according to the size of the screen.

Example without clamp():

.text {
  font-size: 16px; /* Tamaño fijo */
}

@media (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  .text {
    font-size: 24px;
  }
}

Example with clamp():

.text {
  font-size: clamp(16px, 2vw, 24px); /* Escala entre 16px y 24px */
}

With clamp(), you eliminate several media query rules and get a much more flexible layout.

---

5. fit-content(): Fit the width to the content

fit-content() allows you to fit the width of an element to the size of its content, but without it expanding beyond a maximum value that you define. This is very useful for creating buttons or elements that dynamically adjust to the text they contain, but do not become excessively large on wide screens.

Example without fit-content():

.button {
  width: auto; /* Se expande según el contenido */
  padding: 10px 20px;
  border: 1px solid black;
}

(In this case, if the button text is very long, the button will be stretched too long.)

Example with fit-content():

.container {
  width: 70%;
  margin: 20px;
}

With fit-content(), the button will fit the size of the text, but will never exceed 200px in width. If the text is shorter, the button will be smaller.

The above is the detailed content of CSS features you should know. For more information, please follow other related articles on the PHP Chinese website!