Home > Web Front-end > CSS Tutorial > CSS features you should know

CSS features you should know

DDD
Release: 2024-12-28 08:19:09
Original
606 people have browsed it

unciones de CSS que deberías conocer

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;
}
Copy after login
Copy after login

Example with calc():

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

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 */
}
Copy after login

Example with repeat():

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

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 */
  }
}
Copy after login

Example with min():

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

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;
  }
}
Copy after login

Example with clamp():

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

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;
}
Copy after login

(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;
}
Copy after login
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template