Новая технология замены изображений: метод государственного домена

Разработчики, знакомые с CSS, должны знать технологию замены изображений и ее значение. Дэйв Ши сделал подробное описание этого в одной из своих статей. См. превосходное резюме Дэйва Ши . Пол Янг анализирует все существующие методы. предлагается новый метод, получивший название «Метод состояния». В этой статье подробно описан принцип этого метода:

Недостатки существующих методов:

1. Например, легко выйти из строя: изображение отключено или заменяющее изображение содержит прозрачные области;
2. Слишком сложно выполнить быстро и надежно;
3. При обходе дерева документа через js мерцание, возникающее при загрузке страницы, неудовлетворительное;
4. Может быть несовместимо с некоторыми браузерами

Новый метод замены изображения:

Новую технологию замены изображений необходимо реализовать с помощью js, но ее легко реализовать. Нужно лишь внедрить небольшой кусочек js в голову. После выполнения js к правилу ответа будет добавлено «.image-on». Пока изображение клиента не отключено, правило вступит в силу. Ниже приведен оператор, применяемый к «методу поля статуса» h1:

Первое правило действует всегда, второе действует только тогда, когда изображение не отключено. «text-indent» смещает текст за пределы экрана. «overflow:hidden» в основном используется для размещения опорной точки под FF, чтобы ее фокус смещался за пределы экрана при нажатии на нее.

Второе правило заключено в экран @media и в основном используется для обеспечения того, чтобы замена изображения происходила только в программе чтения с экрана, а не в состоянии печати. Если этого не сделать, то при печати страницы большинство пользователей вместо осмысленного текста увидят большой пробел.

Технология отличается быстротой исполнения. Поскольку текст смещен от экрана, изображение может содержать прозрачные элементы, поэтому вы не можете видеть текст сквозь само изображение. Выполнение Js происходит очень быстро, почти мгновенно, и он полностью использует характеристики самого браузера.

Метод анализа

«Метод поля состояния» — это метод, позволяющий быстро заставить правила CSS вступить в силу в предполагаемом состоянии, при этом фоном контекста является документ, что позволяет избежать обхода браузером дерева DOM. Есть две причины для применения «подхода государственного домена»:

1. В ответ на реакцию пользователей часть контента на странице была переформатирована;
2. Добавляет дополнительные стили в зависимости от браузера клиента, устройства и других условий.

«Метод поля состояния» добавляет класс в 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);
}

Если «поле состояния» включено, имя поля состояния будет добавлено к селектору правила. Следующее правило изменит цвет привязки на синий, если условие истинно.

a { color: red; }
.myScope a { color: blue; }

Как и следовало ожидать, метод замены изображения в домене состояния работает, проверяя, отключено ли изображение. Если этот параметр не отключен, поле статуса «изображение включено» активируется, что очень просто.

ч1 {
ширина: 100 пикселей;
высота: 50 пикселей;
}

@медиа экран {
.images-on h1 {
текстовый отступ: -10000 пикселей;
фоновое изображение: URL (image.png);
переполнение: скрыто;
}
}