YanKaven 웹사이트 : http://dancewithnet.com/
데이터 URI
데이터 URI 는 작은 파일을 문서에 직접 포함하기 위해 RFC 2397 에서 정의한 체계입니다. 다음 구문을 통해 작은 파일을 지정된 인코딩으로 변환하고 페이지에 직접 포함할 수 있습니다.
데이터:[
HTML 4.01은 지난 세기에 데이터 URI 체계를 도입했으며 현재 IE6 및 IE7을 제외한 모든 주류 브라우저는 이를 지원 하지만 IE8은 여전히 데이터 URI 지원에 제한이 있습니다 . img, 입력 유형=이미지, CSS의 링크 및 URL이며 데이터 크기는 32K를 초과할 수 없습니다.
이점:
단점 :
MHTML
MHTML은 MIME HTML(Multi Purpose Internet Mail Extension HTML) 의 약자로 멀티미디어 페이지의 모든 내용을 동일한 문서에 저장하도록 RFC 2557에서 정의한 솔루션입니다. 이 솔루션은 IE5.0부터 지원하기 위해 Microsoft에서 제안했으며 Opera9.0에서도 지원하기 시작했습니다. Safari에서는 파일을 .mht(MHTML 파일 접미사) 형식으로 저장할 수 있지만 표시는 지원하지 않습니다.
MHTML은 데이터 URI와 상대적으로 유사하며 더 강력한 기능과 더 복잡한 구문을 가지고 있으며 데이터 URI에서 "재사용할 수 없다"는 단점이 없습니다. 예를 들어 MHTML은 사용하기 편리하지 않습니다. mht 파일에 있는 리소스 참조는 상대 주소일 수 있으며, 그렇지 않으면 절대 주소여야 합니다. "Cross Browser Base64 Encoded Images Embedded in HTML" 의 IE용 헤저 솔루션은 IE가 MHTML에 따라 구문 분석하도록 Content-type: message/rfc822가 선언되어 있기 때문에 상대 경로를 사용합니다. MHTML 프로토콜을 사용하려면 이때 "MHTML – 데이터가 필요한 경우: IE7 이하의 URI" 와 같은 절대 경로를 사용해야 합니다.
애플리케이션
데이터 URI와 MHTML의 조합은 모든 주류 브라우저의 문제를 완전히 해결할 수 있습니다. 캐시하고 재사용할 수 없기 때문에 페이지에서 직접 사용하기에는 적합하지 않지만 CSS 및 JavaScript 파일의 이미지에는 적절하게 사용할 수 있습니다. 다음을 사용하면 큰 이점이 있습니다.
CSS에서 데이터 URI와 MHTML을 쉽게 구현하기 위해 데이터 URI 및 MHTML 생성기를 작성했습니다. 이를 사용하여 데이터 URI 및 MHTML을 생성하는 응용 사례를 볼 수 있습니다.
CSS 파일에서 MHTML을 사용할 때 URL은 매우 유연하지 않은 절대 경로를 사용해야 하므로 다음과 같이 CSS 표현식( DEMO )을 사용하여 문제를 해결하는 것을 고려할 수 있습니다.
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*배경 이미지:표현식(함수(ele){
ele.style.BackgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(이것));