Chrome 88 : aspect-ratio 속성

크롬 88버전이 업데이트 되면서 새로운 속성이 등장했습니다.

바로 aspect-ratio에 관한 것 입니다.

 

이것은 1 월 6일에 출시된 Safari Technology Preview 118에서 지원을 발표한 Safari의 뒤를 잇는 것입니다.

이는 Edge, Firefox 및 기타 브라우저로 출시 될 때 기대할만한 무언가를 제공합니다.

 

크롬 88 업데이트에 관한 내용을 아래의 공식 youtube를 통해 확인해보세요. 

 

 

• 가로 세로 비율은 요소 크기의 비율을 정의합니다. 예를 들어 가로 세로 비율이 1/1 인 상자는 완벽한 정사각형입니다. 3/1의 종횡비는 넓은 직사각형입니다. 많은 비디오가 16/9 종횡비를 목표로합니다.
• 이미지 및 iframe과 같은 일부 요소에는 고유한 종횡비가 있습니다. 즉, 너비 또는 높이가 선언되면 다른 하나는 비율을 유지하는 방식으로 자동으로 계산됩니다.

.square {
  aspect-ratio: 1 / 1;
}

점진적 향상을 사용하여 브라우저에서 지원되는지 확인하고 필요한 경우 대체를 적용할 수도 있습니다.

그런 다음 새로운 CSS4 not selector를 사용하면 코드를 좀 더 깔끔하게 만들 수 있습니다!

.square {
  aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
  .square {
    height: 4rem;
    width: 4rem;
  }
}

실용적이네요 ~ : )

 

 

 

출처 : css-tricks.com/new-in-chrome-88-aspect-ratio/?fbclid=IwAR0MpZStHN1CBVrzVBf4kqyTZAzyb6cQtRpgRB92mA83iuW3-g6SjIfx-Lk