Fab-Four 기술을 사용한 응답 CSS 경계 반지름

저자: Kiril Peyanski✏️
지난 몇 년 동안 브라우저의 각종 CSS 기능에 대한 지원은 이미 장족한 발전을 이루었다.수직 중심 div은 우리가 이런 방식으로 상당히 쉽게 실행할 수 있는 일이지만, 우리는 여전히 몇 가지 관건적인 기능이 부족하다.
브라우저 뷰포트나 화면 해상도를 기반으로 스타일을 적용하는 media-queries에 익숙할 수도 있지만, 때로는 container-queries 이 필요할 수도 있습니다. 일부 브라우저의 feature 로고에서만 사용할 수 있습니다.
오늘 Fab Four 기술은 border-radius 너비 대신 요소의 container 크기에 따라 screen을 요소에 적용합니다.

Author’s note: I have recently stumbled upon this technique on where (a Facebook engineer) further explained its implication. In the thread it was suggested that this piece of code should not be “human-written,” so I’ve got you covered by the end of this blog post.

이 기술의 작용은 무엇입니까?

Fab Four 기술은 각종 CSS 함수(예를 들어 min, max, calc과 clamp)를 사용하여 특정한 CSS 규칙을 적용해야 하는지 계산하고 용기 요소의 차원(설비 뷰포트가 아닌)과 비교할 수 있다.
크기를 조절할 수 있는 컨테이너에 포장된 card 구성 요소 몇 개를 살펴보겠습니다.
Kiril Peyanski(Untitled)의 @kspeyanski에 있는 CodePen 만년필 참조.
우리가 여기서 실현하고자 하는 구체적인 요구는 이 카드의 용기 폭이 border-radius보다 작으면 그 중의 400px을 제거하는 것이다.

Author’s note: The CSS equivalent to debugging with console.log is border: 1px solid red, and you should not feel bad about using it!

코드를 자세히 살펴보면 다음과 같은 border-radius 컴퓨팅을 볼 수 있습니다.

.dynamic-card {
  border-radius: max(0px, min(16px, (100% - 400px + 1px) * 9999)) / 16px;
}

언뜻 보기에는 이상할 수도 있지만, 우리는 모든 계산을 자세히 검사하고 진일보한 해석을 할 것이다.코드에서 다음 변수를 확인하고자 합니다.

필요 border-radius

컨테이너 너비 breakpoint

.dynamic-card {
  border-radius: max(0px, min(DESIRED_BORDER_RADIUS, (100% - WIDTH_BREAKPOINT + 1px) * 9999)) / DESIRED_BORDER_RADIUS;
}

이러한 CSS 규칙을 심도 있게 연구하려면 다음과 같은 세 가지 다른 계산으로 분류해야 합니다.

min 계산

max 계산

픽셀당

division

최소값 계산

  min(DESIRED_BORDER_RADIUS, (100% - WIDTH_BREAKPOINT + 1px) * 9999)

여기서 무슨 일이 있었죠?우선 100%이 무엇을 하고 있는지 생각해 봐야 한다.width: 100%을 CSS 요소로 설정하면 전체 용기 너비로 원소를 확장합니다. 이것은 100%이 min 함수에 사용될 때 용기의 width을 항상 되돌려줍니다.
이것은 우리의 용기가 480px폭이고 WIDTH_BREAKPOINT의 400px폭을 정의했다면 계산 결과는 다음과 같다는 것을 의미한다.

  /* 480px - 400px + 1px = 81px * 9999 = a really big POSITIVE number */
  min(DESIRED_BORDER_RADIUS, (480px - 400px + 1px) * 9999)

계산된 * 9999부분은 우리가 시종일관 max치보다 높거나 min치보다 낮음을 확보하기 위해서이다.그렇지 않으면, 우리는 결국 둘 사이에 끼어 있는 일을 만날 수 있다.
컨테이너 너비가 미리 정의된 브레이크보다 작은 대안을 봅니다.

  /* 320px - 400px + 1px = -79px * 9999 = a really big NEGATIVE number */
  min(DESIRED_BORDER_RADIUS, (320px - 400px + 1px) * 9999)

우리는 min 함수를 가지고 있기 때문에 계산 결과는 다음과 같다.

container의 폭이 breakpoint보다 크면 최종 결과는 DESIRED_BORDER_RADIUS(또는 예제 16px)

이 됩니다.

container의 폭이 breakpoint보다 낮을 때 우리는 마이너스가 하나 있다(우리의 예는 -789,921)

max 계산은 우리의 복잡한 계산 집합에서 호출된 다음 함수이다.

  max(0px, RESULT_FROM_MIN)

우리는 우리가 정경계 반경이나 음수를 받을 수 있다는 것을 이미 알고 있다.min을 적용하여 계산한 결과는 다음과 같습니다.

container 너비가 breakpoint보다 크면: RESULT_FROM_MIN (또는 16px)

container 너비가 breakpoint보다 낮을 경우

: 0px

필요한 경계 반지름 계산

  border-radius: RESULT_FROM_MAX / DESIRED_BORDER_RADIUS;

이것은 division 연산자가 아니라 extended syntax을 원소에 응용한 border-radius 연산자다.위 코드가 계산됩니다(누락된 /자 참고).

  border-top-left-radius:     RESULT_FROM_MAX DESIRED_BORDER_RADIUS;
  border-top-right-radius:    RESULT_FROM_MAX DESIRED_BORDER_RADIUS;
  border-bottom-right-radius: RESULT_FROM_MAX DESIRED_BORDER_RADIUS;
  border-bottom-left-radius:  RESULT_FROM_MAX DESIRED_BORDER_RADIUS;

이 점은 매우 중요하다. CSS 해석 엔진은 우리가 min과 max 함수를 어떻게 사용하여 경계 반경을 정의하는지에 대해 특별히 만족하지 않기 때문에 우리는 이 간결한 기교를 사용했다.
우리는 clamp 함수를 대체할 수 있지만, Safari12에서 not supported이기 때문에 이렇게 하는 것을 피한다.

미디어 쿼리와 비교

이 기술은 계산 중인 100%을 CSS 해석 엔진에 의존합니다.이 비율은 width이 아니라 우리 컨테이너의 screen width으로 평가되며 우리는 media-queries에서 사용할 수 있다.
다음 코드는 대부분의 경우 작동할 수 있지만 크기를 조절할 수 있는 컨테이너가 있으면 이전 예와 같이 실패합니다.

.dynamic-card {
    border-radius: 0;
}
@media screen and (min-width: 400px) {
  .dynamic-card {
    border-radius: 16px;
  }
}

논리를 뒤바꾸다

응용 수요에 따라Fab-Four 기술은 다양한 장면에 응용할 수 있다.때로는 용기 width이 특정한 breakpoint보다 작으면 특정한 규칙을 적용해야 한다.이런 상황에서 우리는 논리를 전도할 수 있다.
보낸 사람:

(100% - WIDTH_BREAKPOINT + 1px) * 9999))

다음을 수행합니다.

(WIDTH_BREAKPOINT - 1px - 100%) * 9999))

value이 width보다 낮을 때만 필요한 breakpoint을 적용할 수 있다.

공용 사업

설령 당신이 이 기술에 익숙하다 하더라도 이런 계산은 간단하고 이해하기 쉬운 것이 아니다.다행히도 우리는 JS 라이브러리(예를 들어 styled-components)에서SASS mixin이나 각종 CSS의 실용 함수를 추출할 수 있다.

CSS 변수가 있는 네이티브 CSS

  .dynamic-card {
    --border-radius: 16px;
    --breakpoint: 400px;
  }
  .dynamic-border {
    border-radius: max(0px, min(var(--border-radius), (100% - var(--breakpoint) + 1px) * 9999)) / var(--border-radius);
  }

SASS mixin

다음 SASS mixin은 SASS 기반 프로젝트에서 Fab Four 기술을 구현하는 데 도움을 줍니다.

@mixin dynamic-border-radius($value, $breakpoint) {
  & {
    border-radius: #{"max(0px, min(#{$value}, 100% - #{$breakpoint} + 1px) * 9999) / #{$value}"};
  }
}
.dynamic-card {
  @include dynamic-border-radius(16px, 400px);
}

JS의 CSS

import styled, { css } from 'styled-components';
const dynamicBorderRadius = (value, breakpoint) => css`
  border-radius: max(0px, min(${value}px, 100% - ${breakpoint}px + 1px) * 9999) /
    ${value}px;
`;
const Card = styled('div')`
    ${dynamicBorderRadius(16, 400)};
`;

결론

인터넷이 발전함에 따라 우리는 container-queries이 대부분의 웹 브라우저에서 실현되는 것과 같은 더 많은 기능을 보게 될 것이다.이 날이 오기 전에, 우리는 Fab Four와 같은 기술을 사용하여 특정한 응용 프로그램의 수요를 실현할 수 있는데, 이것은 항상 그렇게 간단해 보이지 않는다.

당신의 앞부분이 사용자의 CPU를 차지합니까?

웹 전단이 갈수록 복잡해지면서 자원 탐욕의 기능이 브라우저에 대한 요구가 점점 높아지고 있다.프로덕션의 모든 사용자를 위해 클라이언트 CPU 사용량, 메모리 사용량 등을 모니터링하고 추적하려면 try LogRocket으로 전화하십시오.

LogRocket은 인터넷 응용 프로그램의 DVR과 같이 당신의 인터넷 응용 프로그램이나 사이트에서 발생하는 모든 것을 기록합니다.문제의 원인을 추측할 필요가 없습니다. 관건적인 전단 성능 지표를 집합하고 보고하며, 사용자 세션과 응용 프로그램 상태를 재생하고, 네트워크 요청을 기록하며, 모든 오류를 자동으로 표시할 수 있습니다.
네트워크 응용 방식을 현대화해 보세요. Start monitoring for free.