Хочу поделиться небольшим советом в верстке.
Итак, если вы занимаетесь версткой, то наверное уже знакомы с технологией CSS Sprites, поэтому объяснять, что это такое я не буду. В двух словах это технология которая позволяет сверстать, например, вот такое меню:
при этом используя только один файл, содержащий 2 изображения иконки:
Преимущества всем известны, а теперь о недостатках такого метода:
- Невозможно прописать alt-текст к изображению.
- CSS Spriting и IE6 PNG — несовместимы.
- Если нужно будет распечатать страницу, то такие изображение напечатаны не будут.
- Семантически плохо, если в CSS спрятаны не семантические изображения.
- Невозможно подчеркнуть элемент бордером (border) не подчеркивая при этом саму картинку.
Всегда проще объяснить на примере, поэтому вот и он:
Для примера взял несколько элементов меню главной страницы своего проекта, реализованную технологией CSS Sprites:
HTML:
<li><a href=«#» class=«right»>Правила игры</a></li>
<li><a href=«#» class=«hist»>История игры</a></li>
</ul>
CSS:
list-style-type:none;
position:relative;
}
.links li {
float:left;
position:relative;
}
.links a {
color:#E02100;
display:block;
font-size:11px;
height:16px;
letter-spacing:1px;
line-height:16px;
margin:0 5px;
padding:0 0 0 20px;
}
.links li a.right {
background:transparent url(images/link.png) no-repeat scroll 0 0;
}
.links li a.hist {
background:transparent url(images/link.png) no-repeat scroll 0 -16px;
}
Отправляем на печать и получаем:
А хотелось бы так:
Теперь пробуем другой подход, ради которого я и написал этот совет:
HTML:
Внутри тега A я добавляю по тегу IMG, которому прописываю необходимые атрибуты:
<li><a href=«#» class=«right»><img src=«images/link.png» alt=«Правила игры» title=«Правила игры»/>Правила игры</a></li>
<li><a href=«#» class=«hist»><img src=«images/link.png» alt=«История игры» title=«История игры»/>История игры</a></li>
</ul>
CSS:
list-style-type:none;
position:relative;
font-family:verdana;
}
.links li {
float:left;
position:relative;
}
.links a {
color:#E02100;
display:block;
font-size:11px;
height:16px;
letter-spacing:1px;
line-height:16px;
margin:0 5px 0 22px;
padding:0px;
border-bottom:1px dashed #E02100;
text-decoration:none;
}
.links li a img {
border:none; /* убераем бордюр */
margin-left:-18px; /* сдвигаем относительно ссылки */
position: absolute;
}
.links li a.right img {
clip: rect(0px 16px 16px 0px); /* вырезаем нужный кусочек */
}
.links li a.hist img {
clip: rect(16px 16px 32px 0px);
margin-top:-16px; /* смещаем т.к. исходная картинка вертикальная */
}
В итоге получаем как в браузере так и в предварительном просмотре при печати, такой результат:
Теперь у пиктограммы и подсказка есть, и альт-текст, и красиво распечатывается на бумагу. Также ссылка подчеркнута теперь отдельно.
Ну вот и все. Думаю такой метод пригодится, задачи ведь бывают разные.
Автор статьи: divbyzero
RSS
twitter
lj
Вот это то что нужно !!!