내가 몰랐던 CSS 속성

sam2·2022년 9월 20일
1

2022년 5월즘, 다니는 회사의 웹페이지를 전적으로 개편한적이 있었다.
정말 간만에 전처리기 없이 순수하게 html, css, js로만 만들어봤는데 정말 토나오는줄 😇..
각종 라이브러리와 프레임워크가 엄청 그립기도 했고, 한편으로는 '이걸 내가 css로 모두 해내다니!' 하며 희열을 느끼기도 했다. 물론 크로스 브라우징 했을 때는 정말 찢어버리고 싶었다

그 중 정말 사용해본 적 없던 CSS를 정리해보려고 한다.

(사)파리🪰 크로스브라우징 속성

-webkit-logical-height

이미지의 크기를 정할 때, 이미지 자체에 고정높이를 주기보단 차지해야할 width크기만큼 지정하고, 그 width에 맞는 비율로 나오는게 좋아서 height: fit-content를 자주 사용하는 편이다.
그런데 이 속성이 모든 브라우저가 동일하게 계산하는 건 아니었다.

MDN fit-content

The fit-content behaves as fit-content(stretch). In practice this means that the box will use the available space, but never more than max-content.

가용범위 내에서 최대한 늘어나지만, 최대 넓이를 벗어날 수 없다고 한다.
그럼 max-content 계산이 또 최대라면..? 더 넓어질 수도 있을 것 같다 🤔

logical-height

A measurement in the block dimension: refers to the physical height (vertical dimension) in horizontal writing modes, and to the physical width (horizontal dimension) in vertical writing modes.

쓰는 방향에 따라 어딜 width로 삼고, 어딜 height로 삼을 지 논리적으로 확인해서 크기를 지정한다고 한다. 예를 들어 가로쓰기(좌 -> 우 또는 우 -> 좌)방식으로 글자를 쓴다면 가로가 width의 기준이 될 것이고, 위에서 아래로 글자를 쓴다면 세로가 width의 기준이 된다.

사파리에서 이 속성을 사용할 때 -webkit-logical-height: intrinsic 값을 넣어서 처리해줬는데, MDN에서는 이 속성자체가 뻘건줄로 그어져있다. 🤔

isolation

이 속성은 카드 형태의 컴포넌트를 만들 때 알게 되었는데, 컨테이너가 될 element에 border-radiusoverflow:hidden의 콜라보로 만들어놨더니 사파리에서는 전~혀 먹지 않았던 문제가 있었다.

요건 아래 링크가 훨씬 잘 설명되어 있다.
사파리 overflow:hidden + border-radius 관련 이슈 해결법

border-radius

상당히 많이 쓰고 있는 속성이지만, 이 속성을 쓸 땐 항상 rem이나 px, em같은 고정수치값을 쓴적이 많은데, 특이하게 border-radius: 14.7% / 7.3%;로 쓴적이 있다.

%값을 안쓴건 아니지만, 나눠서 적용한 것도 처음이라 적어두었다. top-left-and-bottom-right | top-right-and-bottom-left 를 위와 같은 비율로 적용시킨 건데, 이미지가 가변적인 크기를 가지고 있고 창의 크기가 변화되더라도 border-radius비율이 유지되어야 한다면 이 방법이 유용할 수도 있다.

휴대폰 목업 이미지의 크롭도 이 속성으로 꼼수를 쓰면 가능하다 🙄

profile
고양이 두마리를 모시고 있는 프론트엔드 코더(?)

0개의 댓글