CSS, short for Cascading Style Sheets, is the styling language used to define the visual presentation of HTML documents. With a deep understanding of CSS units and functions, developers can create incredibly flexible and responsive web interfaces that work on a wide range of devices. At the heart of these possibilities are CSS measurement units and a series of functions, including math and stepping functions, that offer detailed control over stylization.
Units in CSS: Types and Uses
Types of Measurement Units in CSS
- Absolute Units: They are fixed and do not change depending on other factors such as the size of the viewport or the parent font. Examples include
px(pixels),pt(points),in(inches),cm(centimeters), andmm(millimeters). - Relative Units: They vary depending on the condition of their environment. Some of the best known are
em,rem,VW(viewport width),vh(viewport height),vmin,vmax, and percentages%.
Practical Use of Units
em: Adjusts the size based on the font size of the parent element.rem: Relates the size to the font of the root element<html>.VWyvh: Percentages of the viewport visible, useful for responsive designs.%: Percentage based on the size of the containing element.
Units and Responsive Design
Relative units like em, rem, VW, vh, vmin, and vmax They are essential for adaptive design. They allow styles to change fluidly based on the size of the screen, the text of the parent element, or the document root.
Features in CSS: Improving Style Precision
CSS not only allows you to define static styles but also supports functions that make styles more dynamic and adaptive. Functions are used within property values and can take values as parameters to calculate a result.
Mathematical Functions in CSS
CSS supports a variety of mathematical functions that can manipulate values and adapt styles on the fly.
calc()
The function calc() perhaps it is the best known, since it allows calculations to be carried out to determine CSS values. It can be used to add, subtract, multiply or divide values, using combinations of different units. This is useful when you need to mix relative and absolute units.
.container { width: calc(100% - 50px); }New functions: min(), max(), and clamp()
min(): Returns the smallest value passed as arguments.max(): Choose the largest value from a set of values.clamp(): Sets a value within a range between a minimum and a maximum.
p { font-size: clamp(1rem, 2.5vw, 2rem); }Other Useful Features
rgb()yrgba(): Define colors using the red, green and blue components.hsl()yhsla(): Colors defined through hue, saturation and luminosity, with the option to add alpha for opacity.var(): Uses previously defined CSS variables.
Step Functions in CSS
Features step-start() y stepend()
Used primarily within animations or transitions, these functions control how these changes are executed, step by step, rather than continuously.
div { transition-timing-function: step-start; }General Function steps()
With steps(), you can define the number of jumps and the behavior between each jump, obtaining transitions with a "stop-motion" effect or approaching traditional style animations.
div { animation: slidein 3s steps(5, end); }Applying Units and Functions in Practice
Responsive Design with CSS Units and Functions
Combining relative units and functions like calc(), min(), max(), and clamp(), it is possible to create layouts that adapt optimally to different screen resolutions.
Practical Example: Adapting the Font Size
body { font-size: clamp(0.8rem, 2vw, 1.2rem); }Creative Animations with Step Functions
Step functions can bring an extra level of control to your animations, helping you create eye-catching visual effects without the need for javascript.
Example of Use of steps() in Animations
@keyframes frame-animation { from { background-position: 0 0; } to { background-position: 100% 0; } } .sprite { animation: frame-animation 1s steps(10) infinite; }Good Practices in Using CSS Units and Functions
- Consistency: It is essential to use units consistently throughout the project.
- Preference for Relative Units: Generally favor relative units for better responsive design.
- Simplify when possible: Take advantage of CSS functions to simplify calculations and value adjustments.
- Evidence: Always check how your CSS looks and works on various browsers and devices.
Conclusion: The Versatility of CSS in Web Design
CSS units and functions are tremendously powerful tools that allow developers to create adaptive and dynamic interfaces. By learning to master these features, you can ensure that your web projects will be accessible and attractive in a multitude of contexts. Remember that the key to success in modern web design lies in adaptability and the ability to provide a cohesive and consistent user experience. By mastering the units and functions of CSS, you'll be one step ahead in creating websites that not only look good, but perform exceptionally well in any environment.
English 
Spanish