Skip to main content

CSS Inbuilt functions

In CSS, functions are used to perform specific operations or computations, often to set dynamic values for properties.

Mathematical Functions​

  1. calc(): Allows you to perform calculations to determine CSS property values.

    width: calc(100% - 20px);

  2. min(): Returns the smallest value among a list of comma-separated expressions.

    width: min(100%, 400px);

  3. max(): Returns the largest value among a list of comma-separated expressions.

    width: max(50%, 200px);

  4. clamp(): Clamps a value between an upper and lower bound.

    font-size: clamp(16px, 4vw, 22px);

Grid and Flexbox Functions​

  1. repeat(): Used with grid layout to repeat columns or rows.

    grid-template-columns: repeat(3, 1fr);

  2. fit-content(): Makes the grid track take up the space necessary to fit its content.

    grid-template-columns: fit-content(20%);

Color Functions​

  1. rgb() and rgba(): Define colors using the Red-Green-Blue model.

    color: rgb(255, 0, 0);
    background-color: rgba(255, 0, 0, 0.3);

  2. hsl() and hsla(): Define colors using the Hue-Saturation-Lightness model.

    color: hsl(120, 100%, 50%);

  3. var(): Used to insert custom properties (CSS variables).

    --main-color: #06c;
    color: var(--main-color);

String and Attribute Functions​

  1. attr(): Returns the value of an attribute of the selected elements.

    content: attr(data-tooltip);

  2. counter(): Returns the value of a counter.

    content: counter(my-counter);

Transform Functions​

  1. rotate(): Rotates an element.

    transform: rotate(30deg);

  2. scale(): Scales an element.

    transform: scale(1.5);

  3. translate(): Moves an element.

    transform: translate(10px, 20px);

  4. skew(): Skews an element.

    transform: skew(30deg);

Filter Functions​

  1. blur(): Applies a blur effect.

    filter: blur(5px);

  2. brightness(): Adjusts the brightness.

    filter: brightness(0.5);

  3. contrast(): Adjusts the contrast.

    filter: contrast(200%);

  4. grayscale(): Converts to grayscale.

    filter: grayscale(100%);

  5. invert(): Inverts colors.

    filter: invert(100%);

  6. saturate(): Saturates the image.

    filter: saturate(7);

  7. sepia(): Applies a sepia filter.

    filter: sepia(100%);

Miscellaneous Functions​

  1. url(): Specifies a URL.

    background-image: url('image.jpg');

  2. linear-gradient(): Creates a linear gradient.

    background: linear-gradient(red, yellow);

  3. radial-gradient(): Creates a radial gradient.

    background: radial-gradient(red, yellow);

  4. conic-gradient(): Creates a conic gradient.

    background: conic-gradient(red, yellow);

  5. cubic-bezier(): Defines a cubic-bezier curve.

    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

  6. steps(): Defines steps for animations and transitions.

    animation-timing-function: steps(4, end);

  7. polygon(): Defines a polygon shape for clipping.

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

  8. circle(): Defines a circle shape for clipping.

    clip-path: circle(50% at 50% 50%);

  9. ellipse(): Defines an ellipse shape for clipping.

    clip-path: ellipse(50% 25% at 50% 50%);

  10. path(): Defines a custom path for clipping.

    clip-path: path('M0,0 L50,0 L50,50 Z');

These functions offer a wide range of possibilities for styling and manipulating elements in CSS. They can be particularly useful for creating complex layouts, animations, and effects.

Best Practices​

  1. Optimization: Use functions like calc() sparingly, as they can impact performance if overused.

  2. Readability: Always comment complex calculations or function uses for better maintainability.

  3. Cross-browser Compatibility: Some functions may not be supported in all browsers, so always check compatibility and consider fallbacks.

  4. Testing: Always test the layout in various scenarios when using dynamic functions like clamp() or fit-content().

Limitations and Considerations​

  • Not all functions are supported in all CSS properties.
  • Some functions are computationally expensive and can affect rendering performance.

Understanding CSS functions is crucial for creating dynamic and responsive layouts. They offer a way to set property values based on calculations, enabling more flexible and maintainable designs.