Страницы

среда, 27 февраля 2013 г.

Background images in print css

При создании стилей для печатной версии сайта нужно помнить о том, что не всегда у пользователя будет стоять галочка "Print Background Images". Но что если нам нужно распечатать фоновое изображение, которое несет некий важный смысл, не привязываясь к настройкам пользователя? Неплохим решением было бы сделать его картинкой и вывести в псевдоэлементе :before

  .arrow {
    background: none;

    &:before {
        content: url('arrow.png');
    }
  }

Но данный метод плохо работает в firefox и ie, потому как при первой загрузке (печати) данная картинка не успевает загрузится и на ее месте мы ничего не увидим. При повторной попытке печати, все будет ок, но будет ли пользователь второй раз печатать?

Решение - заменить фоновую картинку дефолтной картинкой списка:

  .arrow {
    background: none;
    display: list-item;
    list-style: url("arrow.png");
    margin-left: 20px;
    width: 0;
  }

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

CSS3 tooltips

Toolips (подсказки) можно организовать несколькими способами:

1. используя атрибут title


<a href="#" title="usual tooltip">Link</a>

Самый простой способ, но тултипы получаются стандартными и поэтому оооочень скуууучни. К тому же их вид зависит от браузера (( Т.е. почти все браузеры отображают их небольшими желтыми лейбочками внизу, но они совершенно не поддаются стилизации.

2. при помощи js (jQuery Tooltip Plugin)


<div id="tooltip">
...
</div>
Как правило, эта конструкция добавляется в низ страницы и абсолютно позиционируется применительно к нужному элементу.

Тултипы красиви, сочни, вкусни. Но для тех, кто не боится нагружать клиента ещё одним ломтиком яваскрипта.

3. css


<a href="#">
  Link
  <span>Tooltip<span>
</a>
Хорошая альтернатива яваскриптовому решению. Присутствуют все нужные плюшки, разве что не очень семантично, отчего ссылка перегружается излишней информацией.

4. css3

<a href="#" data-tooltip="tooltip" >
  Link
</a>

Та-дамм!! Усовершенствованный метод + семантика. Впрочем, достоинства и недостатки обсудим позже, после рассмотрения подробностей реализации =)
Реализуем пример справа:

HTML:

<a href="#" data-tooltip="Beautiful tooltip">Link</a>

CSS:

*[data-tooltip] {
  position: relative;
  text-decoration: none;

  &:after,
  &:before {
    @include opacity(0);

    content: '';
    outline: none;
    z-index: 3;
  }

  &:hover,
  &:focus {
    &:after {
      @include border-radius(2px);
      @include opacity(1);

      background: #464746;
      bottom: 115%;
      color: #fff;
      content: attr(data-tooltip);
      display: block;
      font-size: 12px;
      font-weight: normal;
      left: -50%;
      line-height: 1.3em;
      min-height: 13px;
      outline: none;
      padding: 7px 10px;
      position: absolute;
      text-align: left;
      text-shadow: none;
      max-width: 250px;
    } 
  }
}

Как это работает:

текст тултипа описывается в аттрибуте ссылки data-tooltip, показывается он через псевдоэлемент :after, а добавляется в стилях через свойство content: attr(data-tooltip). Далее просто добавляется позиционирование и стилизуется по макету.

+ Advantage:

  • work in IE8+, Chrome 4+, Safari 4+, Firefox 3.6+ and Opera 10+;
  • quicker than js;
  • more comfortable on iPad

- Imperfection:

  • can't use html tags inside tooltip;
  • not for <img />;
  • title for <a> must be removed.

Arrows:

Подобным образом (с использованием псевдоэлементов :after и :before) можно организовать и простые стрелки, не требующие наличия тени или сложных градиентов.

*[data-tooltip] {
  &:hover,
  &:focus {
    &:before {
      @include opacity(1);

      border-bottom: transparent;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #464746;
      content: '';
      outline: none;
      display: block;
      font-size: 0;
      height: 0;
      left: 8px;
      line-height: 0;
      position: absolute;
      top: -15%;
      width: 0;
    }
  }
}

+ Advantage:

  • no image

- Imperfection:

  • can't use shadow or gradient, just solid