2020년 지금까지 배운 웹 개발의 4가지

내가 웹 개발에 대해 가장 좋아하는 점은 새로운 속성과 요령을 배우는 것을 멈추지 않는다는 것입니다. 지난 몇 달은 이상했습니다. 재택근무, 3년 다니던 회사 그만두고 프리랜서 시작. 그 모든 이유 등으로 인해 마지막 게시물을 작성한 지 꽤 오래되었지만 오늘 다시 시작하여 올해 새로운 것을 배우며 얻은 모든 작은 승리에 대해 쓰기로 결정했습니다!

채우기 가능

Safari iOS 브라우저에서 100vh는 하단 내비게이션 바의 가시성에 관계없이 뷰포트 높이에서 계산됩니다. 이것은 대부분의 경우 괜찮고 약간 위로 스크롤할 때 요소 높이가 다시 계산되는 다른 옵션보다 바람직할 수 있지만 고정된 스크롤 가능 컨테이너(다음 예의 팝업과 같은)에서 매우 이상한 버그가 될 수 있습니다. .

이것은 많은 developers이 fix many년 동안 many에 머리카락을 뽑아온 버그입니다.
그런 다음 4월에 Matt Smith는 이것을 트윗했고 그 시점까지 한 달 동안 사회적으로 고립된 것을 거의 만회했습니다.









맷 스미스










🔥 WebKit(iOS Safari)에서 `100vh`로 성가신 모바일 뷰포트 버그를 처리하는 요령까지!


오후 20:53 - 2020년 4월 25일





998

5232



내 생각에 이것을 구현하는 가장 좋은 방법은 예를 들어 이 속성을 아직 이해하지 못하는 브라우저를 위한 백업을 사용하여 Matt가 하는 것과 같습니다.

.container {
  height: 100vh;
  height: -webkit-fill-available;
  height: fill-available;
}

인터랙션 기반 미디어 쿼리

나는 파티에 조금 늦었다고 생각하지만 이것은 올해 내가 가장 좋아하는 CSS 발견일 것입니다. supported by all modern browsers이며 사용자의 기본 입력 메커니즘을 기반으로 스타일을 지정할 수 있습니다. 이와 같은 미디어 쿼리의 좋은 점은 최신 장치(예: iPad Pro)와 항상 일치하지 않는 화면 크기 미디어 쿼리를 사용할 필요가 없다는 것입니다.

가능한 옵션은 pointer , any-pointer , hover 및 any-hover 이며 pointer 에 대한 아름다운 점은 포인터의 특수성을 고려하여 coarse , fine 또는 none 를 허용한다는 것입니다. 장치의 입력. 이렇게 하면 보다 접근하기 쉬운 경험을 만들기 위해 대략적인 포인터 입력이 있는 장치에 대해 약간 더 큰 CTA, 입력 또는 확인란을 만들 수 있습니다 ✨. 미세 포인터 값은 사용자가 스타일러스를 사용할 때 구현된다고 생각하지만 확실하지 않습니다.
나는 hover 속성을 몇 번 사용했는데, 주로 터치 장치에 표시할 필요가 없는 사용자 지정 커서를 만드는 데 사용했습니다.

예시:

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
  }
}

교차 관찰자 API

이것은 스크롤 위치 기반 애니메이션을 만드는 가장 좋은 방법 중 하나이며 이것에 대해서만 기사를 쓸 수 있습니다. 나는 이것Mozilla article을 읽으면서 그것에 대해 많은 것을 배웠습니다.
모든 최신 브라우저에서 지원되며 요소가 뷰포트에서 보기 위해 들어올 때(또는 교차할 때) 함수를 호출할 수 있습니다.

const header = document.querySelector('.header');
const inView = (entries) => {
  for (const entry of entries) {
    // try logging entry to view all the possible values
    if (entry.boundingClientRect.y < -32) {
      header.classList.add('background--dark'); // for example change the background of the header when the page has scrolled 32 px.
    } else {
      header.classList.remove('background--dark'); 
    }
  }
};
// threshold is just one of the options you can pass in the InteractionObserver
// It determines the amount of triggers while scrolling, it allows an array of numbers between 0 and 1
let threshold = []; 
for (let i = 0; i <= 100; i++) {
  threshold.push(i / 100);
}

const observePageHeader = new IntersectionObserver(inView, { threshold });

// observing the element that has .header as a class
observePageHeader.observe(header);

create lazy loading images 또는 play videos only when they're in view 에 사용할 수 있습니다. 또는 특정 스크롤 위치의 요소에 스타일과 애니메이션을 추가합니다.
Locomotive 스크롤 라이브러리를 사용하는 동안에도 여전히 작동한다는 사실에 놀랐습니다!

관점

분명히 cssperspective 속성을 설정하고 가로로 스크롤 가능한 컨테이너를 만들면 일종의 기본 스크롤 애니메이션이 생성됩니다. 이상한 물건!


일종의 스크롤 가능한 타임라인을 만드는 방법을 작업하는 동안 이 예상치 못한 기능을 발견했습니다.

보너스: 내 실수로부터 배우기

컨테이너가 모바일 iOS에서는 스크롤되지 않지만 데스크톱에서는 스크롤되는 '버그'를 수정하는 데 너무 많은 시간을 보냈습니다. 부모 요소에서 pointer-events: none를 사용하면 iOS에서 스크롤 가능한 컨테이너 내부를 스크롤하는 기능이 망가질 수 있습니다.

나와 함께 일하고 싶습니까?

Check out my portfolio