모든 프런트엔드 개발자가 2024년에 알아야 할 5가지 CSS 스니펫

지금 바로 사용할 수 있는, 강력하고 안정적인 CSS의 도구 벨트입니다.

모든 프런트엔드 개발자는 :has()가 '상위 선택자' 그 이상이라는 사실을 알아야 한다고 생각합니다. subgrid의 방법과 그 이유, 기본 제공 CSS 문법으로 중첩하는 방법, 브라우저 밸런스 광고 제목 텍스트 줄바꿈, 컨테이너 쿼리 단위의 사용 방법을 알아봅니다.

이 게시물은 2023년에 모든 프런트엔드 개발자가 알아야 할 지난해의 6가지 CSS 스니펫

CSS:has(.potential-beyond-being-a-parent-selector)

:has()은 2023년 말에 모든 주요 브라우저에서 지원되었습니다. 이 새로운 선택기는 놀랍게도 다양한 사용 사례를 실현할 수 있습니다. 콘텐츠 인식 레이아웃, 스마트 구성요소, 이 기사에서 이 글에서 다룬 내용보다 훨씬 더 많은 내용을 살펴보겠습니다.

다음은 :has()를 상위 선택기로 사용하는 몇 가지 예입니다. 이 이름은 일반적으로 선택기의 제목은 ul li과 같이 끝에 있습니다. 여기서 li는 제목입니다. 스타일을 가져옵니다. :has()를 사용하면 선택기의 시작 부분에 있는 요소가 다음과 같이 될 수 있습니다. 있습니다. 다음 예에서는 내부에 요소가 있는 경우 버튼에 간격이 있습니다. .icon 클래스로 대체합니다. 안에 이미지가 있으면 카드의 방향이 변경됩니다.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

오래 원하는 선택기는 항목 수에 따라 레이아웃을 변경하는 것입니다. 이제 가능 하위 요소 수를 쿼리하는 동안 컨테이너를 주체로 유지할 수 있기 때문에 :has()로 대체합니다.

main:has(> :nth-child(5)) {…}

또 다른 상위 수준의 예, 전체 문서에 설정된 스타일을 변경합니다. 페이지의 특정 체크박스가 사용 설정된 경우:

html:has(#dark-mode:checked) {…}

예시만 살펴보면 선택기의 주제를 변경하지 않는 간단한 사용 사례입니다. 이와 같이 :has()가 상위 선택기로 제한된다고 생각할 수 있습니다. 다음 사항을 고려하세요. 예로 들 수 있습니다 공통 상위 항목을 기반으로 무언가를 확인한 다음 선택기를 피벗 페이지 어딘가에 있는 하위 요소에 적용될 수 있습니다

다음은 입력이 잘못된 경우 양식 오류 요소를 표시합니다.

form:has(:user-invalid) .error {
  display: block;
}

다음은 측면 탐색에 .--is-open 클래스가 있을 때 기본 콘텐츠 영역을 슬라이드아웃합니다.

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

다음은 :has()를 상위 선택기로 사용하는 재미있는 데모입니다. :has()를 수량 쿼리와 함께 사용하면 사용하여 매끄럽게 표시할 수 있는 그리드 레이아웃을 만들 수 있습니다. 세로 또는 가로 방향 요소 1~12개:

<ph type="x-smartling-placeholder">

</ph>

서브 그리드 만들기

수년 동안 프런트엔드 웹 커뮤니티는 마무리하고 완료하는 데 도움이 되는 서브그리드를 요청했습니다. 널리 사용되는 강력한 CSS 그리드 레이아웃 엔진입니다. 이제 3가지 주요 엔진 모두에서 사용할 수 있습니다.

개요를 보려면 여기에서 하위 그리드에 대해 자세히 알아보세요.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

CSS 방식으로 중첩

내장된 CSS 중첩은 2023년에 모든 주요 브라우저에서 사용할 수 있게 되었습니다. 웹사이트를 업데이트하여 중첩을 컴파일하는 빌드 프로세스를 제거했고 이제 더 작은 스타일 시트입니다. 네, 중첩이 있는 스타일시트는 더 작고 브라우저 개발 도구가 이를 나타낼 준비가 되었습니다.

CSS 중첩 구문의 개요는 를 참조하세요. 다음 코드 예는 문법 예시를 보여줍니다.

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

브라우저에서 광고 제목의 균형 유지

text-wrap: balance가 없으면 개발자와 카피라이터가 줄바꿈 힌트를 사용할 수 있음 (예: <wbr> 요소 또는 ­). 전투가 벌어지자마자 전투가 벌어지자마자 콘텐츠가 어떤 식으로든 번역, 확대/축소되거나 수정되는 경우 래핑 힌트는 새로운 콘텐츠 프레젠테이션에 적합합니다.

텍스트 줄바꿈을 균형 있게 사용하면 이 작업을 브라우저에 맡길 수 있습니다. 다음 Codepen에서 비교 내용을 확인할 수 있습니다.

컨테이너 쿼리 단위 사용

작년 게시물에서는 모든 프런트엔드 개발자가 쿼리합니다 아직 배우지 못했다면 2024년을 도전해 보세요. 컨테이너 쿼리 단위도 확인해 보세요 개략적으로 설명하자면 2021년 아마드 셰이드가 컨테이너 쿼리 단위에 관한 유용한 자료를 작성했습니다.

다음과 같은 6개의 새로운 컨테이너 품질 단위가 추가됩니다.

1. 인라인 변형 cqi
2. 너비 변형 cqw.
3. 블록 변형 cqb
4. 높이 변형 cqh.
5. 길이에 관계없이 변형은 cqmin입니다.
6. 길이가 더 큰 변형은 cqmax입니다.

컨테이너에 대한 상대적 애니메이션과 내장 애니메이션에 대한 시나리오를 생각해 보세요. 컨테이너에서 완전히 밖으로 슬라이드되는 하위 요소는 100cqi를 사용합니다. 이는 컨테이너 인라인 크기의 100% 입니다.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

다음은 컨테이너 반응형 서체와 컨테이너의 방향으로, 방향이 가로 모드인 경우 크기의 절반이 됩니다.

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

이러한 단원을 처음 사용하는 경우 2024년에 이용할 수 있는 모든 단원을 검토하세요.