3가지 짧은 10월 CSS 팁

여러분!

min() lifehack을 사용하고 outline: none을 올바르게 사용하기 위해 gap 속성이 margins보다 나은 이유에 대해 이야기하고 싶습니다.

그러나 독서를 시작하기 전에 나는 떠납니다 the link on my Substack newsletter about CSS . 당신은 무엇을 만들지 알고 있습니다 😎

또한 저의 스폰서인 Ben Rinehart, Jesse Willard, Tatiana Ten, Konstantinos Kapenekakis에게도 감사드립니다. 저는 그들의 지원 없이 이 글을 쓰지 않았습니다.

gap 속성은 여백을 부수고 있습니다!

마지막에 적용되지 않는 방식으로 몇 가지 요소 사이에 간격을 설정할 때 여백을 사용하는 일반적인 솔루션이 있습니다. 대체로 우리는 2개 또는 3개의 at-규칙을 작성해야 합니다.

간격 속성이 그것을 깨뜨립니다! 우리는 한 줄만 씁니다. 예이! 🥳

하지마

.parent {
  display: flex;
}

.child:not(:last-child) {
  margin-right: 1rem;
}

대신 당신은 그것을 사용할 수 있습니다

.parent {
  display: flex;
  gap: 1rem;
}

width 속성과 max-width 속성의 조합을 하나로 줄여봅시다.

width 및 max-width 속성을 사용하여 현재 및 최대 너비를 정의하는 오래되고 확실한 방법이 있습니다.

.container {
  width: 100%;
  max-width: 70rem;
}

줄일 수 있다는 사실 알고 계셨나요?🤔

값을 정의할 수 있는 min() 함수가 있으며 브라우저는 그 중에서 가장 작은 값을 선택합니다💡

.container {
  width: min(100%, 70rem);
}

outline: none을 올바르게 사용하자

outline: none 사용을 중지하십시오. 다른 해결책이 있습니다! 컨트롤을 클릭하는 사용자를 위해 :focus:not(:focus-visible)로 개요를 재설정하고 다음으로 키보드 사용자를 위해 :focus-visible로 설정하십시오💡

하지마

.button:focus {
  outline: none;
}

대신 당신은 그것을 사용할 수 있습니다

.button:focus:not(:focus-visible) {
  outline: none;
}

.button:focus-visible {
  outline: 0.25rem solid;
}