CSS에 익숙한 개발자는 이미지 대체 기술과 그 중요성을 알아야 합니다. Dave Shea 는 기존 방법의 장점과 단점을 모두 분석한 Dave Shea의 훌륭한 요약을 참조하세요. , 새로운 방법이 제안되었으며 "The State Method"라는 이름이 붙었습니다. 이 기사에서는 이 방법의 원리를 자세히 소개합니다.
기존 방법의 단점:
새로운 이미지 교체 방법:
새로운 이미지 교체 기술은 js의 도움으로 구현해야 하는데, 헤드에 js의 작은 부분만 도입하면 구현이 쉽습니다. js가 실행되면 응답 규칙에 ".image-on"이 추가됩니다. 클라이언트의 이미지가 비활성화되지 않는 한 규칙은 h1 "상태 필드 메서드"에 적용됩니다.
첫 번째 규칙은 항상 적용되며, 두 번째 규칙은 이미지가 비활성화되지 않은 경우에만 적용됩니다. "text-indent"는 텍스트를 화면 외부로 오프셋시킵니다. "overflow:hidden"은 클릭할 때 초점이 화면 외부로 오프셋되도록 FF 아래에 앵커 포인트를 배치하는 데 주로 사용됩니다.
두 번째 규칙은 @media screen에 포함되어 있으며 주로 인쇄 상태가 아닌 화면 판독기에서만 이미지 교체가 발생하도록 하는 데 사용됩니다. 그렇지 않으면 페이지가 인쇄될 때 대부분의 사용자에게 의미 있는 텍스트 대신 큰 공백이 표시됩니다.
기술 수행 속도가 빠릅니다. 텍스트가 화면에서 오프셋되어 있기 때문에 이미지 자체를 통해 텍스트를 볼 수 없도록 이미지에 투명한 요소가 포함될 수 있습니다. Js 실행은 매우 빠르고 거의 즉각적이며 브라우저 자체의 특성을 최대한 활용합니다.
방법 분석
"상태 필드 방법"은 컨텍스트 배경이 문서인 가정된 상태에서 CSS 규칙을 빠르게 적용하여 브라우저가 DOM 트리를 탐색하는 것을 방지하는 방법입니다. "상태 영역 접근 방식"을 적용하는 데에는 두 가지 이유가 있습니다.
"상태 필드 메서드"는 다음 스크립트를 사용하여 html에 클래스를 추가합니다.
document.enableStateScope = function(scope, on)
{
var de = document.documentElement;
if (on)
de.className += " " + scope;
else
de.className = de.className.replace(
new RegExp(" \b " + scope + " \b "), "");
};
이 js에는 작은 문제가 있습니다. 샘플 페이지에서는 전환 기능이 적용되지 않습니다. 코드를 다음과 같습니다.
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\s|^)'+cls+'(\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
document.enableStateScope = function(scope, on) {
var de = document.documentElement;
On ? addClass(de,scope) : removeClass(de,scope);
};
위의 hasClass, addClass, RemoveClass 메소드는 "Pro JavaScript Techniques"에서 제공하는 메소드를 차용한 것입니다. jquery를 사용했다면 방법은 더 간단할 것입니다.
"상태 필드"는 다음 방법을 통해 전환할 수 있습니다.
if (condition == true) {
document.enableStateScope("myScope", true);
}
"상태 필드"가 "켜짐"인 경우 상태 필드의 이름이 규칙 선택기에 추가됩니다. 다음 규칙은 조건이 true일 때 앵커 색상을 파란색으로 변경합니다.
a { color: red; }
.myScope a { color: blue; }
예상할 수 있듯이 상태 도메인 이미지 교체 기술은 이미지가 비활성화되었는지 확인하는 방식으로 작동합니다. 비활성화하지 않으면 "이미지 켜짐" 상태 필드가 활성화됩니다. 이는 간단합니다.
h1 {
너비: 100px;
높이: 50px;
}
@미디어 화면 {
.images-on h1 {
텍스트 들여쓰기: -10000px;
배경 이미지: url(image.png);
오버플로: 숨김;
}
}