기능 비교 테이블을위한 반응 형 솔루션

키 포인트

반응 형 웹 디자인과 테이블은 완벽하게 일치하지 않지만 안정적인 구조로 인해 기능 비교 테이블이 개선 될 여지가 여전히 남아 있습니다. 성공적인 응답 기능 비교 테이블은 제품을 쉽게 구별하고 기능을 명확하게 식별하며 제품 기능이 존재하는지 여부를 보여 주어야합니다.

반응 형 기능 비교 테이블을 만들기위한 두 가지 옵션 : Flexbox 사용 (현대 브라우저 지원 속도는 80%, 접두사가 필요한 브라우저 버전을 포함한 93% 지원 속도) 및 추가 태그 및 ARIA 역할 (이전 버전의 Android 버전에 더 적합합니다. 그리고 iOS).

옵션이 선택되는지 여부, 접근성, 접근성 및 가용성은 반응 형 기능 비교 테이블을 설계 할 때 장애가있는 사용자를 포함하여 모든 사용자가 친숙하고 액세스 할 수 있도록 고려해야합니다.
반응 형 웹 디자인 및 테이블은 최고의 파트너가 아닙니다. 많은 사람들이 이것을 연구하고 많은 방법을 설계했습니다 (일부는 최근 itepoint의 기사에 요약되었습니다). 그러나 우리는 여전히 완벽한 솔루션에서 멀리 떨어져 있으며 검색은 계속됩니다.
• 일반적인 상황은 여전히 ​​복잡하지만 일부 특정 상황은 더 많은 관심을 끌 수 있습니다. 내가 여기서 말하는 것은 기능 비교 테이블입니다. 우리는 여러 곳에서이를 만날 수 있습니다. 포털에서 돈을 대가로.
이 유형의 테이블은 비교적 안정적이고 일관된 구조를 가지므로 작은 화면에 표시 될 때 동작을 더 잘 제어 할 수 있습니다.
기능 비교 표
• 의 구조 클래식 비교 테이블은 최소 3 개의 제품 (열에 표시)을 결합하고 함수는 아래 행에 표시됩니다. 전통적인 구조에서 각 행의 첫 번째 셀에는 함수의 이름이 포함되며, 각 제품의 셀에는 체크 마크 또는 기능이 제품에 속하는지 여부를 보여주는 다른 기호가 포함되어 있습니다. 우리는이 고전적인 구조의 훌륭한 예를 찾을 수 있습니다 : 여기, 여기, 여기.
이 예제에 따라 다음 코드를 사용하여 비교 표의 구조를 요약 할 수 있습니다.

기능이 존재하는지 아닌지 여부를 보여주는 제품 이름, 기능 이름 및 마크와 같은 위에서 언급 한 요소를 쉽게 식별 할 수 있습니다. repres 코드는 체크 마크 (✔) 문자를 나타냅니다.

이제 우리는 문제의 근원에 있습니다. 테이블이 낮은 화면 너비에서 최적의 효율을 유지하려면 다음 조건을 충족해야합니다.

사용자는 제품을 쉽게 구별 할 수 있어야합니다 기능은 쉽게 인식되어야합니다 제품의 기능이 존재하는지 여부는 명확해야합니다.

이 결과를 달성하는 가장 좋은 방법은 기능 이름을 포함하는 셀을 기능의 존재 또는 부재를 표시하는 다른 세 셀의 상단으로 이동하는 것입니다.

계획 1 : Flexbox

우리는 어떻게해야합니까? 한 가지 대답은 Flexbox입니다. Flexbox가 무엇인지 모르거나 리뷰가 필요한 경우이 주제에 대한 Nick Salloum의 최근 기사를 확인할 수 있습니다. 우리 중 나머지는 솔루션을 탐구 할 수 있습니다.

우선, 우리는 작은 화면에서만 변경 사항이 발생하는지 확인해야합니다. 이를 위해 미디어 쿼리를 사용하여 768 픽셀의 클래식 너비를 중단 점으로 사용하여 코드를 찾습니다.

이 규칙 세트에는 마법 효과를 달성 할 수있는 몇 가지 중요한 사항이 있습니다.

우리는 테이블 행의 디스플레이 값을 플렉스로 변경하고 자식 요소에 열에 균등하게 분포되도록 지시합니다.

다음, 셀에게 셀에게 정상 컨테이너로 정규화하도록 지시합니다 (기본값을 보존하면 테이블 규칙, 특히 크기 측면에서 간섭이 발생합니다).

<table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table>

다음 단계는 각 행의 첫 번째 셀을 100% 너비로 찾아서 대비를 향상시키기 위해 배경색을 변경하는 것입니다. 프로세스 규칙은 다른 세 셀의 맨 위에 유지합니다. 이것이 바로 우리가 필요한 것입니다.

우리는 제품 이름 위에 아무것도 표시되지 않도록 첫 번째 Th를 숨겨서 변경합니다.

• 여기에서 데모를 볼 수 있습니다.
분명히, 솔루션의 효과는 지원 정도에만 의존합니다. Caniuse.com에 따르면 Flexbox는 대부분의 최신 변형에 대해 80% 이상의 지원을 받고 있으며, 접두사 또는 사용 규칙이 필요한 이전 버전의 브라우저를 포함하는 경우 93% 이상입니다. IE 지원은 IE10 (2012 구문 만)에서 시작하는 반면 IE11은이를 완전히 지원합니다. 우리는 주로 작은 화면에서의 지원에 중점을두기 때문에 이전 IE 버전에 대한 지원 부족을 무시할 수 있습니다. 모바일 측면에서 지원은 Android 4.4 및 iOS 7.1에서 시작합니다. 이전 버전에는 공급 업체 접두사가 필요했으며 랩 기능을 지원하지 않았습니다.
• 부트 스트랩에 사용 된 스크롤 DIV와 같은 폴백 옵션도 제공해야합니다. 이런 식으로, 지원 외부의 방문자는 여전히 다른 디스플레이 대안이 있습니다.
반응식 2 : 추가 표시 aria 역할
지원하려는 대부분의 브라우저가 Flexbox를 지원하지 않으면 대안이 있습니다. 실제로 이것은 2013 년 실제 프로젝트에서 사용한 솔루션입니다. 추가 태그가 필요합니다. 추가 선을 추가하고 함수 이름을 복사해야합니다. 수동 작업은 지루한 것처럼 보일 수 있지만 데이터 소스에서 정보를 읽으면 자동으로 수행 할 수 있습니다. 마지막으로, 우리의 초기 예의 코드는 다음과 같아야합니다.
• CSS도 매우 간단합니다
접근성을 향상시키기 위해 한 걸음 더 나아가 Aria-Hidden = "True"를 사용하여 화면 리더의 추가 마커를 숨길 수 있습니다. 이런 식으로 Aria-Hidden 사양을 존중하는 화면 리더 애플리케이션은 중복 내용을 두 번 읽지 않습니다.

이것은 두 번째 솔루션의 데모입니다. 결론

우리는 비교 테이블을 진정으로 반응하는 두 가지 방법을 찾았습니다. 둘 다 그들의 장점과 단점이 있습니다. 궁극적으로 선택은 청중에게 달려 있어야합니다. 대부분의 경우 첫 번째 옵션 (폴백 계획 포함)이 충분해야합니다. 이전 버전의 Android 및 iOS를 수용 해야하는 경우 두 번째 옵션을 배포 할 수 있습니다. 어느 쪽이든, 기능 비교 테이블은 화면 크기에 관계없이 지금부터 훨씬 더 좋아 보입니다.

(원본 문서의 FAQ 부분은이 부분의 내용이 의사 원리 목표와 일치하지 않고 너무 길기 때문에 여기서 생략됩니다. 필요한 경우 FAQ 부품의 의사 원리를 처리 할 수 ​​있습니다. 별도로.)

위 내용은 기능 비교 테이블을위한 반응 형 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!