Допустимый способ использования изображений спрайтов для HTML5

У меня есть несколько глобальных изображений, которые я буду использовать на сайте. Какова правильная разметка для HTML5 для использования таких элементов. Могу ли я использовать тег img без атрибута src или вместо этого просто использовать div и не беспокоиться о тегах alt или о том, как вы могли видеть в коде, все в порядке?

.social-links div{
display:inline-block;
  vertical-align:middle;
}
.icon-icon-facebook {
  background-image: url(../images/global/spritesheet.png);
  background-position: -111px -145px;
  width: 23px;
  height: 23px;
}
.icon-icon-google-plus {
  background-image: url(../images/global/spritesheet.png);
  background-position: -134px -145px;
  width: 23px;
  height: 23px;
}
.icon-icon-instagram {
  background-image: url(../images/global/spritesheet.png);
  background-position: -124px -111px;
  width: 23px;
  height: 23px;
}
.icon-icon-linkedin {
  background-image: url(../images/global/spritesheet.png);
  background-position: -147px -111px;
  width: 23px;
  height: 23px;
}
.icon-icon-pinterest {
  background-image: url(../images/global/spritesheet.png);
  background-position: -170px -111px;
  width: 23px;
  height: 23px;
}
.icon-icon-twitter {
  background-image: url(../images/global/spritesheet.png);
  background-position: -65px -145px;
  width: 23px;
  height: 23px;
}
.icon-icon-youtube {
  background-image: url(../images/global/spritesheet.png);
  background-position: -88px -145px;
  width: 23px;
  height: 23px;
}
          <div class="col-md-2">
            <ul class="social-links">
              <li><div role="img" class="icon-icon-facebook" title="facebook icon"></div>Facebook</li>
              <li><div role="img" class="icon-icon-twitter" title="twitter icon"></div>Twitter</li>
              <li><div role="img" class="icon-icon-pinterest" title="pinterest icon"></div>Pinterest</li>
              <li><div role="img" class="icon-icon-instagram" title="instagram icon"></div>Instagram</li>
              <li><div role="img" class="icon-icon-google-plus" title="google-plus icon"></div>Google Plus</li>
              <li><div role="img" class="icon-icon-linkedin" title="linkedin icon"></div>LinkedIn</li>
              <li><div role="img" class="icon-icon-youtube" title="youtube icon"></div>YouTube</li>
            </ul>
          </div>


html css sprite-sheet
person Tan Kucukhas    schedule 04.01.2016    source источник
comment
вы можете использовать псевдоэлемент (::before/:before) и установить класс на li (или ‹a›ссылка‹/a›), поскольку это цель дизайна, нет необходимости в атрибуте роли или альтернативном тексте, который уже стоит здесь :)   -  person G-Cyrillus    schedule 04.01.2016

Ответы (1)


arrow_upward
1
arrow_downward

Я бы использовал его на :before элементах. Поскольку за значком следует текст, атрибут роли здесь не нужен. Кроме того, значок здесь для поддержки текста в вопросе «дизайна», он ничего не добавляет к вашему документу, поэтому вам не нужно добавлять к нему заголовок.

Кроме того, роль «img» недействительна в HTML5. Взгляните на документацию здесь для получения дополнительной информации о роли:

http://www.w3.org/wiki/PF/XTech/HTML5/RoleAttribute

Я бы сделал это так:

HTML

     <div class="col-md-2">
        <ul class="social-links">
          <li class="facebook">Facebook</li>
          <...></...>
         </ul>
     </div>

CSS

 .social-link .facebook:before {
    background-image: url(../images/global/spritesheet.png);
    background-position: -111px -145px;
    content: '';
    display: inline-block;
    margin-right: 15px /* Set the desired margin here */;
    width: 23px;
    height: 23px;
 }

Дополнительные сведения о псевдоэлементе :before см. здесь: https://developer.mozilla.org/fr/docs/Web/CSS/%3Abefore

person Yann Chabot    schedule 04.01.2016
comment
Как насчет других элементов пользовательского интерфейса без текста, таких как логотип веб-сайта или стрелки? Позже я добавлю их в спрайт. - person Tan Kucukhas; 04.01.2016
comment
@TanKucukhas если ваше изображение имеет значение, то оно должно стоять в html (тег img), если это только цель дизайна, оно может стоять как фон или псевдоэлемент. протестируйте свою страницу без какого-либо стиля, чтобы узнать, должна ли она быть там или нет. - person G-Cyrillus; 04.01.2016
comment
Если, например, вы используете стрелку, я бы использовал элемент HTML5 кнопки с заголовком и эффектом, который он делает. Это всегда зависит от того, является ли это внешней ссылкой, тогда вы можете использовать ссылку с атрибутом title и использовать значок в диапазоне с классом на нем (немного похоже на то, что вы сделали в своем примере) - person Yann Chabot; 04.01.2016
comment
Я также согласен с @GCyrillus, если изображение имеет смысл, то оно заслуживает того, чтобы быть в теге img, поскольку оно является частью вашего контента. Фоновое изображение не будет считываться в div, как если бы оно было частью вашего контента, средствами чтения с экрана или поисковым роботом. - person Yann Chabot; 04.01.2016