CSS 스위치 케이스 조건

CSS는 @Media 쿼리의 특정 특성과 CSS 사용자 정의 속성을 갖춘 깊은 속임수를 제외하고는 아직 스위치 규칙 또는 조건부가 없습니다. 우리가 왜 유용한지를 살펴보고 오늘 그것을 끌어 내기 위해 사용할 수있는 트릭을 살펴 보겠습니다.

가능성에 대한 최근의 수다쟁이

오늘날 이러한 것들 중 어느 것도 사용할 수 없지만 작년에 일반 조건부 CSS의 개념에 대해 많은 대화가있었습니다.

• Brian Kardell은 Switch () 문과 Tab Atkins Riff를 제안했습니다.
• Jonathan Neal은 많은 대화를 일으킨 조건부 값에 대한 미디어 쿼리 변형을 제안했습니다.
• Lea Verou는“더 높은 수준의 사용자 정의 속성”을 제안했습니다.

그래서 그렇습니다. 조건부 CS에 대한 수요가 있습니다.

조건부 CS가 왜 유용한 지 상상해보십시오

아마도 일정량의 스크롤 후 시각적 변화 일 것입니다. 숫자 입력 후 시각적 변화는 특정 범위 내에 있습니다. 소수의 상태를 가진 구성 요소.

상태를 기반으로 UI를 구축하기위한 UI (예 : React, Vue 등)에 대한 매우 인기있는 JavaScript 라이브러리의 전체 장르가 있습니다. 분명히 이것은 개발자의 요구입니다. 우리가 그 상태 기반 스타일을 CSS로 옮길 수 있다면, 그것은 우리가 필요로 할 수있는 자바 스크립트가 적은 것입니다.

일반적인 테마

우리는 이미 CSS에 사용자 정의 속성을 가지고 있으며, 특정 값으로 변경하는 사용자 정의 속성의 부작용으로 스타일 블록을 변경하여 상태 변경 논리를 기반으로 할 수 있습니다.

스타일 블록을 변경하는 메커니즘이 이미 있다는 것은 사실입니다. 우리는 JavaScript를 통해 수업을 변경할 수 있으며 해당 수업은 CSS에서 우리가 좋아하는 것을 적용 할 수 있습니다. 그러나 이것이 CSS의 상태 기반 스타일이 유용하지 않다는 것을 의미하지는 않습니다. 우리는 항상 능력이 있거나 이에 대한 JavaScript를 작성하고 싶지는 않으며 다른 방식으로 사용자 정의 속성을 변경합니다 (예 : 미디어 쿼리, HTML 변경 등). CSS에서 수행한다는 것은 별도의 비즈니스 논리와 시각적 스타일 로직을 돕는 것을 의미합니다.

트릭! 상태에 @keyframes 사용

CSS @keyframes를 사용하여 특정 변경 사항을 전환 할 수 있습니다. 애니메이션 속성의 성능을 통해 가능성은 어떤 프레임을 표시하고 해당 프레임에서 정확하게 일시 중지하여 스위치 케이스 문 또는 상태 기반 스타일을 효과적으로 모방 할 수 있습니다.

애니메이션 지연 속성을 가지고 연주함으로써 이것을 실제로 보자.

그 펜에서 일어나는 일은 다음과 같습니다.

• 애니메이션 지연 : 음수 지연 값은 특정 프레임 (또는 그 사이)을 강제로 발효합니다 (양수 값은 그렇게 작동하지 않습니다). 우리는이 트릭을 사용하여 상태를 강제로 사용하겠습니다.
• 애니메이션 플레이-스테이트 : 잠시 멈춤 : 우리는 실제로 애니메이션을하지 않기 때문에 애니메이션은 일시 정지 상태를 유지합니다.
• 애니메이션 기간 : 실제 지속 시간은 중요하지 않으며 하나만 필요하므로 다른 키 프레임을 보유 할 시간이 있습니다. 우리는 그것을 100.001과 같은 값으로 만들어서 100s를 지연 시키면 마지막 키 프레임이 여전히 작동합니다. 기간은 지연 값보다 길어야합니다.

첫 번째 범위 입력은 -100과 0 사이의 애니메이션 지연을 수정합니다.

실제 사용 사례

우리가 작업 예제로 바로 뛰어 들기 전에, 당신이 알아야 할 뉘앙스가 있기 때문에이 트릭에 대해 더 자세히 논의 할 가치가 있습니다.

우선, 트릭은 숫자 값으로 만 작동합니다. 따라서 색상 값이나 문자열은 엄격하게 수학을 수행하기 때문입니다.

둘째, 부울 속임수가 있습니다. 0과 100 사이의 숫자 값을 취할 수있는 변수 -값 : 10을 고려하십시오. 값이 5 이상인 경우 색상을 적용하고 싶습니다. 값이 5 이상인지 5 이상인지 어떻게 알 수 있습니까? 그리고 우리가 알고 있더라도, 그것이 실제로 우리를 어떻게 도울 수 있습니까?

 -IS-ABOVE-5 : 클램프 (0, var (-값) -5, 1)

Clamp ()는 더 똑똑한 calc ()과 같습니다. 왜냐하면 이상적인 값을 선언하면서 계산 된 값을 범위에 엄격히 제한 할 수 있다는 점에서. 이 범위는 부울 변수를 달성하는 데 필요한 모든 것입니다.

클램프 ()의 두 번째 매개 변수에 수학을 작성하면 0 (또는 아래) 또는 1 (또는 위)을 출력합니다. 0에서 1 사이의 숫자를 초래할 수있는 수학을 작성하지 마십시오.

그것이 어떻게 작동하는지는 다음과 같습니다.

입력 범위의 유일한 작업은 -value, --min 및 - -max에 대한 값을 정의한 다음 OnInput 이벤트를 사용하여 -value를 수정하여 값을 "방송"하는 것입니다. 그것은 CSS에서 상태와 같은 행동을 얻을 수있는 가장 최소한의 일입니다. 자바 스크립트가 필요하지 않습니다.

CSS 수학 기능을 사용하면 동일한 변수에서 진행률 표시 줄의 "완료된"비율을 유추 할 수 있습니다.

 -완성 : calc ((var (-value)-var (-min)) / (var (-max)-var (-min)) * 100);

이제 우리는 값이 특정 비율 이상인지 알 수 있으며, 우리는 주별로 변경할 수있는 또 다른 방법을 제공합니다.

 -30 : 클램프 (0, var (-완성) -30, 1);
-70 : 클램프 (0, var (-완성) -70, 1);
/ * ... 그리고 ... */

좋아, 훌륭하지만,이를 어떻게 사용하여 특정 키 프레임을 선택할 수 있습니까? max () 함수를 사용하여 :

 -프레임 : Max ( 
    calc (1- var (-30)), 
    var (-30 세 이상) * 2, 
    var (-70 이상) * 3, 
    var (-IS-100) * 4 
);

CSS Booleans의 것은 특정 목표를 달성하기 위해 그것들을 사용하는 방법이 많이 있으며 창의력을 발휘하여 짧고 읽을 수있는 공식을 찾아야한다는 것입니다.

위의 공식에서 부울은 부울의 값이 1 인 경우 프레임 번호를 "토글"합니다. 최대 기능을 사용하기 때문에 가장 큰 토글 프레임 번호는 -프레임의 계산 값입니다.

색상 변화에는 약간의 전환이 있습니다. 우리는 배경으로 이것을 할 수있었습니다 : currentColor; 부모의 색상을 물려받는 채우기 영역에서는 CSS Houdini를 사용하여 유형을 선언하여 CSS 변수에 전환을 할당하는 힘을 설명했습니다.

심하게 사용되는 CSS 부울 트릭 의 예는 아래 펜에서 볼 수 있으며, 이는 광범위한 사용자 정의를 허용하는 많은 변수를 가진 CSS 전용 구성 요소입니다.

나는이 작은 속임수에 대한 다른 많은 사용 사례가 있다고 확신하며 커뮤니티의 창의성에 의해 달성 될 수있는 것을 보게되어 기쁩니다.

위 내용은 CSS 스위치 케이스 조건의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!