패딩 해킹 중지(동영상용)

누구보다 저 자신을 위한 PSA입니다. CSS는 내가 사용하기 시작한 이후로 먼 길을 왔습니다.

2010년에 CSS에서 사용했던 대부분의 "해킹"은 더 나은 대안으로 대체되었습니다. 지난 10년 동안 우리가 이룬 몇 가지 패러다임 변화는 다음과 같습니다.


우리가 사용했던…
이제 우리는…


플로트, 절대 포지셔닝 및 테이블
Flexbox 및 CSS 그리드

PHP 및 Sass 변수
CSS 사용자 정의 속성

JS 애니메이션 라이브러리
CSS 애니메이션 및 전환

패딩을 위한 마법의 숫자box-sizing: border-box
JS를 사용한 유연한 글꼴 크기 조정
뷰포트 단위


오늘은 CSS 개발자가 되기에 좋은 날입니다. 저는 CSS에서 레이아웃과 씨름하면서 몇 시간(때로는 며칠)을 보냈지만 더 이상은 아닙니다. CSS에서 내 레이아웃 문제의 대부분은 5줄 이하의 CSS로 해결되며 정말 아름답습니다.

CSS에서 무언가를 중앙에 배치하시겠습니까? No longer a meme . Flexbox를 사용하면 사물을 쉽게 중앙에 배치할 수 있습니다.

끊임없이 새로운 것을 배우고 1년 또는 2년마다 직업을 다시 배우는 것은 쉽지 않지만 CSS의 경우 그만한 가치가 있습니다. 오늘날 거의 모든 것이 5년 전보다 더 쉽고 빠릅니다. [1]

그러나 아직 머리에 통합하지 못한 몇 가지 새로운 CSS 기능이 있습니다. 가장 분명히 유익한 것 중 하나는 종횡비입니다. 수년 동안 우리는 종횡비를 시뮬레이션하기 위해 패딩 해킹을 사용했습니다. YouTube 동영상과 같은 삽입된 동영상에 자주 사용되며 다음과 같이 표시됩니다.

.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

이 기술은 2009년에 pioneered in ALA 사용되었습니다. 좋은 기술이며 오늘날에도 "반응형 비디오 css"를 검색하면 상위 결과는 모두 이와 동일한 기술입니다.

그러나 더 이상 필요하지 않습니다! 위의 패딩 핵은 16/9 종횡비를 시뮬레이트합니다. 대부분의 YouTube 동영상에서 사용하기 때문에 사용합니다. 반마법적인 56.25% 패딩 핵을 사용하는 대신 요즘에는 원하는 정확한 종횡비를 철자할 수 있습니다.

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

이것은 supported everywhere입니다(물론 IE는 제외).

11줄 요약을 기억하기 쉬운 2줄로 줄이는 것은 멋진 일입니다. [2]

패딩 해킹이 조밀하고 기억하기 어렵고 작성하기 어려웠기 때문에 의심할 여지없이 "반응형 비디오 css"를 수백 번 검색했습니다. CSS Tricks 기사에서 복사/붙여넣기가 항상 더 쉬웠습니다. 하지만 더 이상!

CSS는 시간이 지남에 따라 계속해서 더 좋아지고 있으며, 위와 같은 투박한(훌륭하지만) 핵을 역사적인 쓰레기통에 남겨두는 것이 항상 기쁩니다.



나는 Logical Properties에 팔리지 않았습니다. 이 목록의 다른 모든 항목과 달리 논리적 속성은 밀도가 더 높고 이해하기 어려우며 대부분의 상황에서 별 소용이 없는 것 같습니다. 그러나 나는 빗나간다. ↩︎

컨테이너 요소도 필요하지 않습니다. ↩︎