CSS-спрайты с поддержкой цветов браузера - PullRequest
Новая
       3

CSS-спрайты с поддержкой цветов браузера

0 голосов
/ 15 февраля 2011

Несколько пользователей сообщили о проблемах с использованием моего сайта в результате сочетания моего использования спрайтов CSS с их предпочтением просмотра с применением принудительных цветов браузера.Проблема, кажется, идентична как в Firefox, так и в IE.Есть ли хорошее решение для этого, которое позволит мне поддерживать этих пользователей?

1 Ответ

0 голосов
/ 15 февраля 2011

Проблема здесь в том, что настройки цвета фона браузера переопределяют изображение, которое CSS устанавливает для создания спрайта.

Некоторые умные CSS решили это разумным образом. Сначала я скорректировал размеры CSS-спрайтов, чтобы уменьшить их высоту и ширину на 2 пикселя. Затем я добавил прозрачную границу 1px. Таким образом, когда страница отображается, браузер рисует границу по периметру области CSS-спрайтов.

Кроме того, я добавил color:transparent; в CSS, чтобы сделать любой содержащийся текст прозрачным. Затем в каждое место, где я использую спрайты, я добавляю небольшой кусочек текста (всего одну или две буквы; этого достаточно, чтобы указать немного смысла, не расширяя сайт элемента, используемого для спрайта), в сочетании с хорошим описанием title='blah blah...'.

Оригинальный CSS: 

.sprite1 {
   background:url(../images/mySprite.png);
   height:18px;
   width:18px; 
   background-position:0px 0px;
}
.sprite1:hover {
   background:url(../images/mySprite.png);
   height:18px;
   width:18px; 
   background-position:0px -20px;
}
.sprite2 {
   background:url(../images/mySprite.png);
   height:18px;
   width:18px; 
   background-position:-20px 0px;
}
.sprite2:hover {
   background:url(../images/mySprite.png);
   height:18px;
   width:18px; 
   background-position:-20px -20px;
}

Новый CSS 

.sprite1 {
   background:url(../images/mySprite.png);
   height:16px; //adjusted to account for border
   width:16px; //adjusted to account for border
   background-position:-1px -1px; //adjusted to account for border
   border: 1px solid transparent; //encloses element in a box that will only be seen if browser colors are enforced
   color: transparent; //enables including text that will only be seen if browser colors are enforced
   filter: alpha(opacity = 0); //make transparency work in IE
}
.sprite1:hover {
   background:url(../images/mySprite.png);
   height:16px; //adjusted to account for border
   width:16px; //adjusted to account for border
   background-position:0px -21px; //adjusted to account for border
   border: 1px solid transparent; //encloses element in a box that will only be seen if browser colors are enforced
   color: transparent; //enables including text that will only be seen if browser colors are enforced
   filter: alpha(opacity = 0); //make transparency work in IE
}
.sprite2 {
   background:url(../images/mySprite.png);
   height:16px; //adjusted to account for border
   width:16px; //adjusted to account for border
   background-position:-21px -1px; //adjusted to account for border
   border: 1px solid transparent; //encloses element in a box that will only be seen if browser colors are enforced
   color: transparent; //enables including text that will only be seen if browser colors are enforced
   filter: alpha(opacity = 0); //make transparency work in IE
}
.sprite2:hover {
   background:url(../images/mySprite.png);
   height:16px; //adjusted to account for border
   width:16px; //adjusted to account for border
   background-position:-21px -21px; //adjusted to account for border
   border: 1px solid transparent; //encloses element in a box that will only be seen if browser colors are enforced
   color: transparent; //enables including text that will only be seen if browser colors are enforced
   filter: alpha(opacity = 0); //make transparency work in IE
}
...