개발자 도구 · HTML WYSIWYG 편집기
인라인 스타일과 클래스: 비주얼 편집기가 생성하는 HTML 읽기
· 작동 방식
HTML CSS 내용 편집 가능
시각적 서식 선택이 태그, 인라인 스타일 또는 전혀 아무것도 되지 않는 방법과 해당 출력을 스타일시트 기반 사이트에 적용하는 방법을 설명합니다.
스니펫은 스타일시트에 맞을 때까지 올바르게 보입니다. 사이트 CSS와 충돌하는 편집기 출력으로 열립니다.
스타일 속성이 로컬에서 승리한 다음 대상 테마와 충돌하거나 게시 중에 해당 속성을 잃기 때문에 조각이 소스 애플리케이션에서 올바르게 보일 수 있습니다. ToolAcre는 인라인 프레젠테이션을 수행하지 않기로 선택했습니다. 허용 목록은 어디에서나 스타일과 클래스를 삭제하고 스타일 대상에 대해 지원되는 구조적 및 의미적 요소를 남겨 둡니다.
해당 정책은 미리보기를 의도적으로 겸손하게 만듭니다. 제목, 목록 또는 강력한 문구는 여전히 인식 가능하지만 색상, 글꼴, 간격 및 복사된 디자인 시스템 클래스는 사라졌습니다. 정리된 조각은 모든 소스 모양이나 기능을 자체 포함된 스타일 구성 요소로 재현할 수는 없지만 추론하기가 더 쉽습니다.
일반적으로 세 가지 표현이 존재합니다. 이 편집기는 의미 태그를 유지하고 스타일과 클래스를 제거합니다.
HTML은 요소, 스타일 속성이 있는 로컬 표시 또는 스타일시트로 해석되는 클래스 이름이 있는 재사용 가능한 표시를 사용하여 의미를 표현할 수 있습니다. 이러한 메커니즘은 서로 바꿔 사용할 수 없습니다. 강한 요소는 중요성에 대해 말해줍니다. 빨간색 스타일은 단지 색상을 선택하는 것뿐입니다. 클래스는 특정 스타일시트가 정의하는 것만을 의미합니다.
이 편집기는 의미적 하위 집합을 유지하고 두 프레젠테이션 채널을 모두 거부합니다. ToolAcre가 아닌 수신 사이트가 클래스 정의를 소유하기 때문에 무해한 클래스라도 허용 목록에 알려지지 않습니다. 제거 보고서에는 폐기된 속성의 이름이 지정되므로 작성자는 설명할 수 없는 시각적 변경과 의도적인 정리를 구별할 수 있습니다.
이 편집기가 자체 포함된 프레젠테이션을 유지하는 대신 인라인 스타일을 거부하는 이유
많은 편집자는 인라인 스타일을 유지합니다. 이러한 선언은 외부 스타일시트 없이도 붙여넣은 조각과 함께 이동하기 때문입니다. ToolAcre는 반대 거래를 합니다. 스타일 속성은 예측할 수 없는 렌더링 및 URL 포함 CSS 표면을 생성할 수 있을 만큼 광범위하지만 이 제도 도구에는 구조화된 텍스트만 필요합니다.
테스트에는 JavaScript 모양의 URL이 포함된 스타일 값이 포함되어 있으며 전체 스타일 속성이 사라짐을 증명합니다. 이는 가능한 모든 CSS 페이로드가 독립적으로 분류되었다는 주장이 아니라 좁은 필터에 대한 증거입니다. 스타일을 전혀 허용하지 않으면 이 모듈에서 부분적인 CSS 삭제 프로그램을 유지하는 것을 피할 수 있습니다.
작업 예: 이 도구 모음이 실제로 제공하는 형식
도구 모음은 굵게, 기울임꼴, 두 가지 목록 유형, 명확한 서식, 블록 선택, 링크 및 링크 해제를 제공합니다. 굵게 및 기울임꼴 출력은 Strong 및 em으로 정규화됩니다. 블록 선택에는 단락, h1~h4, blockquote 및 pre가 포함됩니다. 색상 선택기, 글꼴 선택기, 정렬 작업 또는 클래스 필드가 없습니다.
해당 컨트롤을 샘플 단락에 적용하고 소스를 검사합니다. 유용한 비교는 의도된 의미와 방출된 요소 사이입니다. 인용문은 인용구가 되어야 하고, 코드와 같은 공백은 pre를 사용할 수 있으며 제목은 제목이어야 합니다. 단지 소스 모드가 이를 유지할 수 있다는 이유만으로 밑줄, 위 첨자 또는 기타 허용 목록에 있는 태그에 대한 지원을 추론하지 마십시오.
출력을 조정한다는 것은 대상에서 스타일을 지정하는 것을 의미합니다. 여기서는 클래스를 작성할 수 없습니다.
내보내기 후 CMS 조정이 시작됩니다. 해당 CMS, 구성 요소 템플릿 또는 해당 정의가 알려진 검토된 변환에 대상 클래스를 추가합니다. ToolAcre는 알 수 없는 인라인 선언을 프로젝트별 토큰으로 변환할 수 없으며 클래스가 프로덕션 스타일시트에 존재하는지 확인할 수 없습니다.
내용과 일치하는 의미 태그를 유지합니다. 모든 노드를 스타일 지정된 범위로 만들기 위해 강력한 또는 제목 구조를 제거하면 정리의 이점이 반전됩니다. 대상 레이어는 모양을 결정해야 하며 초안에는 테마 없이도 의미가 유지되는 단락, 계층 구조, 목록, 인용문, 코드 및 링크가 포함됩니다.
인라인 스타일은 다른 작업 흐름에 적합할 수 있지만 이 도구에서는 출력되지 않습니다.
인라인 스타일은 공유 스타일시트를 유지하거나 로드하지 않는 시스템, 특히 일부 이메일 제작 경로에서 필요할 수 있습니다. 그러나 이 저장소는 이메일 호환성 프로세서를 제공하지 않으며 스타일 속성을 생성하지 않습니다. 작성자는 나중에 이메일 전용의 테스트된 워크플로우를 통해 깨끗한 초안을 번역해야 합니다.
일회성 삽입에는 유사한 제약이 있을 수 있지만 이것이 이 편집자의 계약을 확장하지는 않습니다. 다운로드한 문서에는 정리된 본문 마크업을 중심으로 ToolAcre가 작성한 고정 미리보기 스타일시트가 포함되어 있습니다. 조각을 복사해도 해당 래퍼나 해당 CSS는 복사되지 않습니다. 목적지로 전달되는 정확한 유물을 검사하세요.
여기서 다루지 않는 내용 — CSS 특정 디버깅, 디자인 토큰 또는 자동 변환 도구
이 문서에서는 CSS 특이성, 지도 디자인 토큰, 인라인 스타일을 자동으로 디버깅하거나 픽셀 패리티를 약속하지 않습니다. 또한 의미론적 태그가 특정 화면 판독기 알림이나 검색 순위를 강제한다고 말하는 것을 방지합니다. 의미론은 구조를 개선하는 반면 실제 표현과 해석은 소비 환경에 따라 달라집니다.
샌드박스 미리보기는 렌더링된 검사 표면이며 라이브 스타일시트의 모델이 아닙니다. 가벼운 문서 테마에 고정되어 있으며 스크립트, 양식 또는 동일 출처 액세스 권한을 부여하지 않습니다. 깔끔한 미리 보기로는 모든 출판 시스템에서 동일한 조각이 안전하거나 시각적으로 정확하다는 것을 확인할 수 없습니다.
요점: 출력을 읽은 후 결정 - 선택 사항을 요약하고, 무엇을 유지할지 결정하기 전에 ToolAcre의 HTML WYSIWYG 편집기를 사용하여 마크업을 볼 수 있는 방법을 요약합니다.
출력을 읽은 다음 목적지를 결정합니다. ToolAcre는 스타일이 적용된 붙여넣은 자료를 의도적으로 더 작은 의미 어휘로 바꾸고 제거 내용을 기록하며 검토를 위해 소스를 노출합니다. 이러한 워크플로는 시각적 충실도가 저하될 수 있다는 점을 인정하면서 우발적인 인라인 프레젠테이션이 눈에 보이지 않는 기술적 부채가 되는 것을 방지합니다.
게시되지 않은 전체 캠페인이 아닌 대표 콘텐츠로 테스트하세요. 제목, 목록, 강조 및 링크를 확인합니다. 그런 다음 콘텐츠가 게시될 승인된 클래스를 적용하세요. 픽셀 동일 전송이 요구되는 경우 이 도구의 스타일 없음 정책은 활성화를 기다리는 숨겨진 기능이 아니라 불일치입니다.