CSS 다중 열 레이아웃 재 방문

첫 번째 책인

CSS를 초월하는 이후 거의 20 년이 지났다. 업데이트되고 자유롭게 사용할 수있는 온라인 버전 인

CSS Revisited 는 현대적인 관점을 제공합니다. 인쇄 배경은이 CSS 기능에 대한 초기 열정을 불러 일으켜 불필요한 마크 업없이 원주 내용을 가능하게했습니다. 내 작업에서 일관된 사용에도 불구하고 CSS 열은 놀랍게도 활용률이 낮습니다. 왜? <.> 사양 간격 다중 열 레이아웃은 오랫동안 상당한 한계로 인해 오랫동안 고통을 겪고 있으며 계속해서 계속되고 있습니다. 5 년 전 Rachel Andrew (현재 사양 편집자)가 강조한 것처럼 : 개별 열 상자의 직접 스타일은 불가능합니다. 자바 스크립트 조작 또는 배경, 패딩 및 여백에 대한 조정은 사용할 수 없습니다. 그리고 모든 기둥의 크기는 균일하게 유지됩니다. 열 규칙 만 스타일링 옵션을 제공합니다. <.> 이것은 사실입니다. 를 사용하는 교대 배경 색상과 같은 선택적 스타일은 불가능합니다. 열 규칙은 변형 (점선, 점선, 단단한 그루브, 릿지)을 허용하지만, 지지대가 부재하는 것은 거의 단순한 소개를 감안할 때 수수께끼입니다. 이러한 불완전 성이 존재하지만,이 귀중한 도구의 광범위한 소홀함을 완전히 설명하지는 않습니다. . 역사적 브라우저 불일치

이전 브라우저는 종종 지원되지 않은 열 속성을 무시했습니다. 그러나 멀티 컬럼 레이아웃의 초기 채택은 크로스 브라우저 일관성이 많은 개발자들에게 가장 큰 관심사가 아닌 기간과 일치했습니다. 초기 브라우저 지원, 특히 콘텐츠 중단과 관련하여 초기 브라우저 지원이 일관되지 않았지만 최신 브라우저는 이제 광범위한 호환성을 제공합니다. 그러나 "파손"으로 CSS 열에 대한 인식은 내가 말한 개발자들 사이에서 지속됩니다. 개선이 필요하지만 현재 기능적 측면의 사용을 방해해서는 안됩니다.

가독성 및 스크롤링 문제 멀티 컬럼 레이아웃의 활용률은 사양 결함이나 구현 문제가 아니라 유용성 문제에서 비롯 될 수 있습니다. Rachel Andrew는 긴 형태의 컨텐츠에서 과도한 수직 스크롤로 인해 가독성이 저하 될 가능성을 올바르게 지적했습니다. 이것은 의심 할 여지없이 부정적인 독서 경험입니다.

신중한 고려는 중요하지만 이것은 억제력이되어서는 안됩니다. 구조적 요소가없는 많은 양의 텍스트에 열을 부적절하게 적용하는 것과 같은 열악한 디자인 선택은 진정한 범인입니다. 제목, 이미지 및 따옴표는 열을 효과적으로 파악하여 가독성을 향상시킬 수 있습니다. 컨테이너 쿼리 및 최신 텍스트 크기 단위와 결합하여 멀티 컬럼 레이아웃을 피할 이유가 거의 없습니다. 속성과 값의 빠른 검토 열을 생성하기위한 두 가지 기본 방법이 존재합니다. 를 지정하거나 정의, 브라우저에서 열 수를 결정하도록합니다. , 너비 (예 : 18rem)를 설정하고 브라우저가 열 수를 최적화하도록 선호합니다.

(gutter)는 텍스트 크기 비례에 이상적으로 column-count 단위를 사용하는 열 사이의 간격을 제어합니다. column-width는 사용자 정의 가능한 두께 및 로 시각적 분리를 추가합니다. 이 간단한 구문은 사용 편의성에 기여합니다 현대 CSS의 관련성이 향상되었습니다 CSS column-width를 초월 할 때, 많은 최신 CSS 기능이 없었습니다. 및 뷰포트 유닛, , CSS Grid 및 Flexbox와 같은 고급 선택기. 이러한 진보는 다중 열 레이아웃의 기능을 향상시킵니다 및 및

와 결합 된 뷰포트 장치는 열 내에서 반응 형 텍스트 크기를 활성화합니다. 는 컨텐츠를 기반으로 조건부 열 생성을 허용합니다. 컨테이너 쿼리는 컨테이너 공간이 충분한 경우에만 열 구현을 활성화합니다. CSS 그리드 또는 Flexbox와의 통합은 훨씬 더 창의적인 레이아웃을 잠금 해제합니다. 실용 응용 프로그램 : 응답 기사 레이아웃 column-gap 내 도전은 화면 크기에 적응하는 유연한 미디어 쿼리가없는 기사 레이아웃을 만들고 rem의 존재 또는 부재를 만드는 것이 었습니다. 원주민 텍스트는 뷰포트 너비가 아니라 컨테이너 너비로 조정 된 텍스트 크기가 컨테이너 너비로 조정되면서 가독성을 향상시킵니다. HTML은 간단합니다. 제목 및 단락을 포함하는 column-rule 요소, 선택적으로 a border-style.

멀티 컬럼 레이아웃 스타일은

(40ch), 에 적용됩니다.

flexbox는 : 를 포함하는 경우에만 에 적용됩니다. rem > :has() 및 calc() : 에 대한 응답 성을 보장합니다 clamp() 이렇게하면 미디어 쿼리가 필요하지 않습니다. 반응 형 스케일링의 경우 컨테이너 쿼리 (를 사용하는 텍스트 크기 적응 :

결과는 다중 열 레이아웃을 효과적으로 활용하여 스크린 크기 및 콘텐츠에 적응하는 유연한 레이아웃입니다. 과거 한계 해결 많은 기사는 다중 열 레이아웃의 결함, 특히 스크롤 문제를 강조합니다. 속성 (제목, 이미지, 열에 대한 인용문)은 과도한 스크롤을 최소화하기 위해 신중한 컨텐츠 설계와 함께 이것을 크게 완화합니다. 고아 제목과 수치는 . 를 사용하여 다루어집니다 멀티 컬럼 레이아웃 에 대한 새로운 관점 나이와 과거의 한계에도 불구하고 멀티 컬럼 레이아웃은 활용도가 낮습니다. 도전이 존재하지만 디자인을 향상시키는 가치와 능력은 여전히 ​​남아 있습니다. 이 강력한 CSS 도구를 새롭게 볼 시간입니다.

위 내용은 CSS 다중 열 레이아웃 재 방문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!