1

Pretty simple question. Just need to know if you can use clamp() inside of scale()? Like this:

.element {
   scale(clamp(100px, 10%, 300px));
}

This does not work. How can i do this?

acharb
  • 63
  • 2
  • 7
  • 3
    scale as a property is not supported on many browsers at the moment. What browser are you using? Have you tried transform: scale()? And what error are you seeing when you inspect the applied CSS? – A Haworth Apr 25 '22 at 15:26
  • 1
    ..for example, what would scaling with a factor of 100px actually mean? Read up about scale and how to use it e.g. on MDN. – A Haworth Apr 25 '22 at 15:32
  • no it's not possible – Temani Afif Apr 25 '22 at 15:39
  • @AHaworth I am using chrome, and there is no error, It just doesn't scale as expected. I also am doing this to have the element be responsive. – acharb Apr 25 '22 at 17:02
  • I can't understand why Chrome isn't giving you some warning. Are you sure? Using Chrome and your CSS I get a yellow triangle by the style and Unknown Property. If I change to a transform I get Invalid property value. Anyway, given 100px, for example, does not make sense as a scale parameter please could you describe what you want to happen. How much do you want it to scale in different circumstances? – A Haworth Apr 25 '22 at 17:10
  • @AHaworth I just want to scale responsively. – acharb Apr 25 '22 at 17:11
  • I don't know what that means. If you want say an element to scale to the width of the viewport set its width in vw units. If you want an element to scale to the width of its containing element set its width in % units. Nothing to do with transform: scale. – A Haworth Apr 25 '22 at 17:14
  • So there is no way to scale responsively using ```transform: scale()``` or ```scale()```? Cuz that was another thing i wanted to find out – acharb Apr 25 '22 at 17:16
  • Perhaps if you could give two examples of viewport dimensions and an element you want to scale responsively I'd understand better what you mean. Are you for example stuck with some fixed px dimensions for an element which you are happy with at one screen size and need to change for another? – A Haworth Apr 25 '22 at 17:26
  • You can scale using rem instead, where you set different values of the font size depending if it's mobile or desktop. If it's just height/width that you need to scale, that is. – Rickard Elimää Apr 25 '22 at 22:55

1 Answers1

1

This

.element {
   scale(clamp(100px, 10%, 300px));
}

is invalid in 2 ways. First of all there is no scale() what you mean is transform: scale(). Second: scale() works with number/float only (e.g. 0.5, 1, 2). So no, clamp() is not possible.

Edit:

What you could do is to use a css variable and media queries:

#box {
  --scale: 3;
  
  width: 64px;
  height: 64px;
  background-color: #aaa;
  transform: scale(var(--scale));
} 

@media (max-width: 768px) {
  #box {
    --scale: 2;
  }
}

@media (max-width: 512px) {
  #box {
    --scale: 1;
  }
}
<div id="box"></div>

Edit:

Well you could actually make the scale() responsive by manipulating a css variable e.g. --scale via js and using the computed font-size for clamp().

window.addEventListener('resize', function(event) {
    scaleBox();
}, true);

window.addEventListener('load', function(event) {
    scaleBox();
}, true);

function scaleBox() {
  const box = document.querySelector('#box');
  
  // Box font size in px.
  const boxFontSize = parseFloat(getComputedStyle(box).fontSize);
  
  // Document font size in px.
  const documentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
  
  // Calculated scale factor.
  const scaleFactor = boxFontSize / documentFontSize;
  
  // Update the scale factor variable.
  box.style.setProperty('--scale', scaleFactor);
  
  console.log(`font-size: ${boxFontSize}px;`, `--scale: ${scaleFactor};`);
}
#box {
  --scale: 1;
  
  width: 64px;
  height: 64px;
  background-color: #aaa;
  font-size: clamp(.5rem, 10vmax, 300px);
  transform: scale(var(--scale));
}
<div id="box"></div>
Dmitrij Kiltau
  • 305
  • 2
  • 11