개발자 도구 · HTML WYSIWYG 편집기
지저분한 마크업의 숨겨진 비용: 접근성, 페이지 무게 및 재설계
· 그것이 중요한 이유
HTML 접근성 텍스트 정리
중첩된 범위, 인라인 글꼴 및 빈 단락은 외관상 좋지 않다고 주장합니다. 보조 기술을 손상시키고 페이지를 부풀리며 모든 재설계를 더 어렵게 만듭니다.
이전 기사에서 실패한 재설계 — 수천 개의 인라인 스타일을 재정의할 수 없는 새 스타일시트로 열립니다.
재설계로 인해 승인된 모든 제목 규칙이 변경될 수 있으며 해당 기사에 로컬 스타일과 즉석 래퍼가 포함된 경우 이전 기사가 시각적으로 일관성이 없는 상태로 남을 수 있습니다. 전역 CSS는 콘텐츠 전체에 포함된 프레젠테이션을 쉽게 제어할 수 없습니다. ToolAcre는 스타일 및 클래스 속성을 제거하여 해당 속성에 의존하는 조각의 양을 노출합니다.
그에 따른 시각적 변화는 증거이지 자동 마이그레이션 계획이 아닙니다. 제거된 클래스는 애플리케이션 구성 요소를 통해 필요한 의미를 제공했을 수 있지만 인라인 글꼴 선언은 일회용 장식일 수 있습니다. 아카이브 전체에 정리를 적용하기 전에 소스와 대상을 함께 검토하세요.
'지저분하다'가 실제로 의미하는 것 — 이를 구체적으로 정의합니다: 중복 래퍼, 인라인 프리젠테이션, 의미 없는 태그 및 간격 해킹
지저분한 마크업은 구체적입니다. 의미 작업이 없는 중첩된 범위, 공백에만 사용되는 div 래퍼, 레거시 b 및 i 태그, 인라인 스타일, 빈 단락, 이벤트 속성 및 반복되는 프레젠테이션 조각. 바이트 수만으로는 정의가 아닙니다. 불필요하거나 오해의 소지가 있는 구조는 유지 관리 문제입니다.
ToolAcre는 지원되지 않는 일반 컨테이너를 풀고, 여러 레거시 인라인 태그를 의미론적 동등 항목에 매핑하고, 요소별 목록 외부의 속성을 제거하고 허용된 중첩의 균형을 맞춥니다. 허용되는 모든 중복 요소를 감지하지는 않습니다. 두 개의 중첩된 강력한 요소는 둘 다 좁은 어휘의 유효한 구성원이므로 남아 있을 수 있습니다.
접근성: 화면 판독기가 듣는 내용 — 누락된 구조와 가짜 제목이 탐색에 미치는 영향을 설명합니다.
접근성은 사용자 에이전트와 보조 도구가 노출할 수 있는 실제 구조에서 시작됩니다. 굵은 단락은 여전히 단락인 반면 제목 요소는 문서의 제목 구조에 들어갑니다. 입력된 대시의 순서는 텍스트입니다. ul 및 li는 기계가 읽을 수 있는 목록 관계를 제공합니다.
정확한 발표를 과장하지 마십시오. 보조 기술 및 사용자 설정은 다양하며 이 저장소에는 교차 판독기 테스트 매트릭스가 포함되어 있지 않습니다. 방어 가능한 권장 사항은 적절한 요소로 의미를 인코딩하고, 논리적 제목 순서를 유지하고, 청중이 의존하는 실제 접근성 도구를 사용하여 대표 출력을 테스트하는 것입니다.
페이지 무게 및 렌더링 — 비대해진 마크업이 바이트를 추가하고 레이아웃을 복잡하게 만드는 방법을 설명합니다.
추가 마크업은 전송 및 구문 분석된 문자를 추가하지만 이 문서에서는 성능 임계값이나 범용 렌더링 페널티를 제공하지 않습니다. 더 즉각적인 비용은 복잡성입니다. 동등한 기사가 관련 없는 래퍼 및 로컬 선언을 통해 동일한 아이디어를 표현할 때 선택기 디버깅 및 마이그레이션이 더 어려워집니다.
ToolAcre는 필터링 후 감소를 나타낼 수 있는 삭제된 HTML 문자를 계산하지만 해당 카운터는 성능 벤치마크가 아닙니다. 페이지 속도는 문서, 스타일, 스크립트, 미디어, 캐싱 및 장치에 따라 다릅니다. 더 작은 소스를 유지 관리 가능성의 신호로 간주한 다음 성능을 주장하기 전에 실제 페이지를 측정하십시오.
재설계 및 마이그레이션 — 인라인 스타일과 일회성 마크업이 전역 변경에 저항하는 이유를 설명합니다.
스타일시트 재설계는 반복되는 콘텐츠가 안정적인 의미 체계와 중앙 집중식 표현을 사용할 때 가장 잘 작동합니다. 인라인 스타일은 전체 색상, 간격 및 타이포그래피 변경에 저항합니다. 알 수 없는 클래스 이름은 콘텐츠를 폐기된 테마에 바인딩할 수 있습니다. 빈 블록과 수동 나누기는 주변 템플릿이 변경된 후에도 오랫동안 기존 레이아웃 가정을 유지합니다.
따라서 마이그레이션은 표시와 의미를 분리해야 합니다. 제목 수준, 단락, 목록, 인용문, 코드 및 의도적인 링크를 유지합니다. 승인된 모양을 대상 스타일로 이동합니다. 편집기는 단일 조각을 검사하는 데 도움이 되지만 사이트 전체 구성 요소 모델을 추론하거나 저장된 기록을 대량 업데이트할 수는 없습니다.
작업 예: 하나의 기사 정리 — 붙여넣은 기사를 가져와 해당 마크업을 검사하고 동일한 모양의 더 깔끔한 버전을 표시합니다.
스타일이 지정된 div, 가짜 굵은 제목, 두 개의 단락 및 손으로 입력한 대시 항목이 포함된 기사를 복사하세요. 필터링은 div, 스타일 및 클래스를 제거하지만 굵은 선이 h2가 되어야 하는지 또는 대시가 li가 되어야 하는지를 알 수 없습니다. 사람은 의미론적 선택을 다시 구축해야 합니다.
각 수정 후 시각적 결과와 소스를 비교하세요. 가짜 제목을 선택한 제목 수준으로 바꾸고 대시를 실제 목록으로 바꾼 다음 링크 체계와 단락 경계를 확인합니다. 대상 CSS가 아직 적용되지 않았기 때문에 더 깔끔한 버전은 샌드박스에서 더 단순해 보일 수 있습니다.
여기에 포함되지 않는 내용 — 자동 대량 정리, CSS 아키텍처 또는 성능 측정
이 문서에서는 대량 정리 알고리즘, CSS 아키텍처 또는 성능 예산을 규정하지 않습니다. 또한 위생만으로 접근 가능한 콘텐츠가 생성된다고 주장하지 않습니다. 대체 텍스트, 언어, 링크 목적, 제목 계층 구조 및 편집 명확성을 위해서는 태그 허용 목록 이상의 정보가 필요합니다.
단순히 ToolAcre가 해당 조각을 수락했다는 이유만으로 신뢰할 수 없는 아카이브를 게시해서는 안 됩니다. 직접 작성한 토크나이저는 브라우저 파서 차이에 대해 경고합니다. 수신 시스템의 정책에 따라 유지 관리되는 서버 측 소독제를 사용하고 로컬 초안 작성과 별도로 렌더링된 결과를 테스트합니다.
요점: 깨끗한 마크업은 매년 더 저렴해집니다. 사례를 요약하고 ToolAcre의 HTML WYSIWYG 편집기에서 출력을 확인하여 소스의 혼란을 방지하는 방법을 설명합니다.
클린 마크업은 출판 후 매년 이해하는 것이 더 저렴합니다. 왜냐하면 미래의 편집자가 리버스 엔지니어링 프리젠테이션 해킹 없이 구조를 식별할 수 있기 때문입니다. 즉각적인 바이트 감소가 미미한 경우에도 재설계, 내보내기 및 마이그레이션을 통해 이점이 더욱 커집니다.
대표 출력이 CMS에 들어가기 전에 검사하여 소스의 혼란을 방지합니다. ToolAcre를 사용하여 수하물을 노출하고 필터링한 다음 누락된 의미를 의도적으로 제공하고 대상에 스타일을 지정합니다. 변환을 수천 개로 확장하기 전에 하나의 기사를 자세히 검토하세요.