다른 사람은 조건부 테두리 반경 트릭을 살펴 봅니다

Ahmad Shadeed의 흥미로운 Facebook CSS Border-Radius "Toggle"을 기억하십니까? 나는 이전 에이 영리한 기술을 다루었습니다. 후속 기사는 더 깊은 분석을 제공했습니다.

Michelle Barker의 "영리한 CSS 솔루션 평가"는 지나치게 영리한 코드의 지혜에 의문을 제기합니다.

의심 할 여지없이 독창적이고 매력적이지만, 나는 Robin Rendle의 CSS- 트릭 뉴스 레터 논평과 동의합니다. "너무 영리합니다."

이 감정은 공명합니다. 이러한 기술은 아마도 Facebook의 자원 내에있는 자리를 차지하고 있습니다. 그러나 영리하지만 유지 보수가 적은 솔루션보다 가독성 우선 순위 (예 : 미디어 쿼리 사용)가 일반적으로 바람직합니다.

Stefan Judis는 다가오는 컨테이너 쿼리를 사용하여 동일한 "조건부 국경-라디우스"효과를 달성했습니다.

 /* 컨테이너 너비가 
   뷰포트 너비, 국경-라디우스 제거 */
@Container (width> = 100vw) {
  .Conditional-Border-Radius {
    국경-라디우스 : 0;
  }
}

이 접근법은 상당히 명확합니다. Stefan은 또한 가상의 @when 기능의 잠재적 이점을 제안합니다.

 @When 컨테이너 (너비> = 100VW) {
  .Conditional-Border-Radius {
    국경-라디우스 : 0;
  }
}
@또 다른 {
  .Conditional-Border-Radius {
    국경-라디우스 : 1em;
  }
}

이 @when 통합의 타당성은 여전히 ​​불확실합니다. 그러나 포함은 CSS의 가독성과 논리적 일관성을 향상시킬 것입니다.

이전 기사는 중간 값을 방지하는 데있어 곱셈의 역할을 간략하게 언급했습니다. 결과는 8px 또는 0px입니다. 이를 명확히하기 위해 비디오 데모는 아래에 포함되어 있습니다. (참고 : 실제 출판물에 비디오가 여기에 삽입됩니다.)

위 내용은 다른 사람은 조건부 테두리 반경 트릭을 살펴 봅니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!